Merge pull request #5405 from luixxiul/steps-button
Make steps header on adding/editing backup task accessible with keyboard
This commit is contained in:
@@ -49,6 +49,10 @@ a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
button {
|
||||
border: none; /* Remove default border */
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
@@ -646,7 +650,6 @@ body {
|
||||
height: 26px;
|
||||
background-size: 26px;
|
||||
cursor: pointer;
|
||||
border: none; /* Remove default border */
|
||||
}
|
||||
|
||||
.logo {
|
||||
@@ -1342,11 +1345,6 @@ body {
|
||||
color: @lColor;
|
||||
}
|
||||
}
|
||||
|
||||
.step:first-child {
|
||||
padding-left: 0;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.steps-legend {
|
||||
@@ -1718,6 +1716,11 @@ body {
|
||||
|
||||
.step {
|
||||
padding-left: @step-width - @circle-width;
|
||||
padding-right: 0;
|
||||
|
||||
&:first-child {
|
||||
padding-inline: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -2,30 +2,30 @@
|
||||
|
||||
<div class="add" ng-controller="EditBackupController">
|
||||
<div class="steps">
|
||||
<div class="step step1" ng-class="{active: CurrentStep == 0}" ng-click="CurrentStep = 0">
|
||||
<button class="step step1" ng-class="{active: CurrentStep == 0}" ng-click="CurrentStep = 0" aria-labelledby="steps-legend__1">
|
||||
<span>1</span>
|
||||
</div>
|
||||
<div class="step step2" ng-class="{active: CurrentStep == 1}" ng-click="CurrentStep = 1">
|
||||
</button>
|
||||
<button class="step step2" ng-class="{active: CurrentStep == 1}" ng-click="CurrentStep = 1" aria-labelledby="steps-legend__2">
|
||||
<span>2</span>
|
||||
</div>
|
||||
<div class="step step3" ng-class="{active: CurrentStep == 2}" ng-click="CurrentStep = 2">
|
||||
</button>
|
||||
<button class="step step3" ng-class="{active: CurrentStep == 2}" ng-click="CurrentStep = 2" aria-labelledby="steps-legend__3">
|
||||
<span>3</span>
|
||||
</div>
|
||||
<div class="step step4" ng-class="{active: CurrentStep == 3}" ng-click="CurrentStep = 3">
|
||||
</button>
|
||||
<button class="step step4" ng-class="{active: CurrentStep == 3}" ng-click="CurrentStep = 3" aria-labelledby="steps-legend__4">
|
||||
<span>4</span>
|
||||
</div>
|
||||
<div class="step step5" ng-class="{active: CurrentStep == 4}" ng-click="CurrentStep = 4">
|
||||
</button>
|
||||
<button class="step step5" ng-class="{active: CurrentStep == 4}" ng-click="CurrentStep = 4" aria-labelledby="steps-legend__5">
|
||||
<span>5</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<!-- .steps -->
|
||||
|
||||
<ol class="steps-legend">
|
||||
<li ng-class="{active: CurrentStep == 0}" class="step1" ng-click="CurrentStep = 0" translate>General</li>
|
||||
<li ng-class="{active: CurrentStep == 1}" class="step2" ng-click="CurrentStep = 1" translate>Destination</li>
|
||||
<li ng-class="{active: CurrentStep == 2}" class="step3" ng-click="CurrentStep = 2" translate>Source Data</li>
|
||||
<li ng-class="{active: CurrentStep == 3}" class="step4" ng-click="CurrentStep = 3" translate>Schedule</li>
|
||||
<li ng-class="{active: CurrentStep == 4}" class="step5" ng-click="CurrentStep = 4" translate>Options</li>
|
||||
<li id="steps-legend__1" ng-class="{active: CurrentStep == 0}" class="step1" ng-click="CurrentStep = 0" translate>General</li>
|
||||
<li id="steps-legend__2" ng-class="{active: CurrentStep == 1}" class="step2" ng-click="CurrentStep = 1" translate>Destination</li>
|
||||
<li id="steps-legend__3" ng-class="{active: CurrentStep == 2}" class="step3" ng-click="CurrentStep = 2" translate>Source Data</li>
|
||||
<li id="steps-legend__4" ng-class="{active: CurrentStep == 3}" class="step4" ng-click="CurrentStep = 3" translate>Schedule</li>
|
||||
<li id="steps-legend__5" ng-class="{active: CurrentStep == 4}" class="step5" ng-click="CurrentStep = 4" translate>Options</li>
|
||||
</ol>
|
||||
<!-- .steps-legend -->
|
||||
|
||||
|
||||
Reference in New Issue
Block a user