mirror of
https://github.com/balena-io/etcher.git
synced 2025-04-24 15:27:17 +00:00
Convert hero-progress-button into an Angular directive
This commit is contained in:
Juan Cruz Viotti
parent
482b0a52ee
commit
6f7ea4e772
@ -237,8 +237,9 @@ th {
|
||||
page-break-after: avoid; }
|
||||
.navbar {
|
||||
display: none; }
|
||||
.btn > .caret,
|
||||
.dropup > .btn > .caret {
|
||||
.btn > .caret, .progress-button > .caret,
|
||||
.dropup > .btn > .caret,
|
||||
.dropup > .progress-button > .caret {
|
||||
border-top-color: #000 !important; }
|
||||
.label {
|
||||
border: 1px solid #000; }
|
||||
@ -2373,46 +2374,54 @@ input[type="search"] {
|
||||
input[type="date"].input-sm, .input-group-sm > input[type="date"].form-control,
|
||||
.input-group-sm > input[type="date"].input-group-addon,
|
||||
.input-group-sm > .input-group-btn > input[type="date"].btn,
|
||||
.input-group-sm > .input-group-btn > input[type="date"].progress-button,
|
||||
.input-group-sm input[type="date"],
|
||||
input[type="time"].input-sm,
|
||||
.input-group-sm > input[type="time"].form-control,
|
||||
.input-group-sm > input[type="time"].input-group-addon,
|
||||
.input-group-sm > .input-group-btn > input[type="time"].btn,
|
||||
.input-group-sm > .input-group-btn > input[type="time"].progress-button,
|
||||
.input-group-sm
|
||||
input[type="time"],
|
||||
input[type="datetime-local"].input-sm,
|
||||
.input-group-sm > input[type="datetime-local"].form-control,
|
||||
.input-group-sm > input[type="datetime-local"].input-group-addon,
|
||||
.input-group-sm > .input-group-btn > input[type="datetime-local"].btn,
|
||||
.input-group-sm > .input-group-btn > input[type="datetime-local"].progress-button,
|
||||
.input-group-sm
|
||||
input[type="datetime-local"],
|
||||
input[type="month"].input-sm,
|
||||
.input-group-sm > input[type="month"].form-control,
|
||||
.input-group-sm > input[type="month"].input-group-addon,
|
||||
.input-group-sm > .input-group-btn > input[type="month"].btn,
|
||||
.input-group-sm > .input-group-btn > input[type="month"].progress-button,
|
||||
.input-group-sm
|
||||
input[type="month"] {
|
||||
line-height: 30px; }
|
||||
input[type="date"].input-lg, .input-group-lg > input[type="date"].form-control,
|
||||
.input-group-lg > input[type="date"].input-group-addon,
|
||||
.input-group-lg > .input-group-btn > input[type="date"].btn,
|
||||
.input-group-lg > .input-group-btn > input[type="date"].progress-button,
|
||||
.input-group-lg input[type="date"],
|
||||
input[type="time"].input-lg,
|
||||
.input-group-lg > input[type="time"].form-control,
|
||||
.input-group-lg > input[type="time"].input-group-addon,
|
||||
.input-group-lg > .input-group-btn > input[type="time"].btn,
|
||||
.input-group-lg > .input-group-btn > input[type="time"].progress-button,
|
||||
.input-group-lg
|
||||
input[type="time"],
|
||||
input[type="datetime-local"].input-lg,
|
||||
.input-group-lg > input[type="datetime-local"].form-control,
|
||||
.input-group-lg > input[type="datetime-local"].input-group-addon,
|
||||
.input-group-lg > .input-group-btn > input[type="datetime-local"].btn,
|
||||
.input-group-lg > .input-group-btn > input[type="datetime-local"].progress-button,
|
||||
.input-group-lg
|
||||
input[type="datetime-local"],
|
||||
input[type="month"].input-lg,
|
||||
.input-group-lg > input[type="month"].form-control,
|
||||
.input-group-lg > input[type="month"].input-group-addon,
|
||||
.input-group-lg > .input-group-btn > input[type="month"].btn,
|
||||
.input-group-lg > .input-group-btn > input[type="month"].progress-button,
|
||||
.input-group-lg
|
||||
input[type="month"] {
|
||||
line-height: 45px; } }
|
||||
@ -2490,15 +2499,18 @@ fieldset[disabled]
|
||||
min-height: 31px; }
|
||||
.form-control-static.input-lg, .input-group-lg > .form-control-static.form-control,
|
||||
.input-group-lg > .form-control-static.input-group-addon,
|
||||
.input-group-lg > .input-group-btn > .form-control-static.btn, .form-control-static.input-sm, .input-group-sm > .form-control-static.form-control,
|
||||
.input-group-lg > .input-group-btn > .form-control-static.btn,
|
||||
.input-group-lg > .input-group-btn > .form-control-static.progress-button, .form-control-static.input-sm, .input-group-sm > .form-control-static.form-control,
|
||||
.input-group-sm > .form-control-static.input-group-addon,
|
||||
.input-group-sm > .input-group-btn > .form-control-static.btn {
|
||||
.input-group-sm > .input-group-btn > .form-control-static.btn,
|
||||
.input-group-sm > .input-group-btn > .form-control-static.progress-button {
|
||||
padding-left: 0;
|
||||
padding-right: 0; }
|
||||
|
||||
.input-sm, .input-group-sm > .form-control,
|
||||
.input-group-sm > .input-group-addon,
|
||||
.input-group-sm > .input-group-btn > .btn {
|
||||
.input-group-sm > .input-group-btn > .btn,
|
||||
.input-group-sm > .input-group-btn > .progress-button {
|
||||
height: 30px;
|
||||
padding: 5px 10px;
|
||||
font-size: 12px;
|
||||
@ -2507,17 +2519,20 @@ fieldset[disabled]
|
||||
|
||||
select.input-sm, .input-group-sm > select.form-control,
|
||||
.input-group-sm > select.input-group-addon,
|
||||
.input-group-sm > .input-group-btn > select.btn {
|
||||
.input-group-sm > .input-group-btn > select.btn,
|
||||
.input-group-sm > .input-group-btn > select.progress-button {
|
||||
height: 30px;
|
||||
line-height: 30px; }
|
||||
|
||||
textarea.input-sm, .input-group-sm > textarea.form-control,
|
||||
.input-group-sm > textarea.input-group-addon,
|
||||
.input-group-sm > .input-group-btn > textarea.btn,
|
||||
.input-group-sm > .input-group-btn > textarea.progress-button,
|
||||
select[multiple].input-sm,
|
||||
.input-group-sm > select[multiple].form-control,
|
||||
.input-group-sm > select[multiple].input-group-addon,
|
||||
.input-group-sm > .input-group-btn > select[multiple].btn {
|
||||
.input-group-sm > .input-group-btn > select[multiple].btn,
|
||||
.input-group-sm > .input-group-btn > select[multiple].progress-button {
|
||||
height: auto; }
|
||||
|
||||
.form-group-sm .form-control {
|
||||
@ -2544,7 +2559,8 @@ select[multiple].input-sm,
|
||||
|
||||
.input-lg, .input-group-lg > .form-control,
|
||||
.input-group-lg > .input-group-addon,
|
||||
.input-group-lg > .input-group-btn > .btn {
|
||||
.input-group-lg > .input-group-btn > .btn,
|
||||
.input-group-lg > .input-group-btn > .progress-button {
|
||||
height: 45px;
|
||||
padding: 10px 16px;
|
||||
font-size: 17px;
|
||||
@ -2553,17 +2569,20 @@ select[multiple].input-sm,
|
||||
|
||||
select.input-lg, .input-group-lg > select.form-control,
|
||||
.input-group-lg > select.input-group-addon,
|
||||
.input-group-lg > .input-group-btn > select.btn {
|
||||
.input-group-lg > .input-group-btn > select.btn,
|
||||
.input-group-lg > .input-group-btn > select.progress-button {
|
||||
height: 45px;
|
||||
line-height: 45px; }
|
||||
|
||||
textarea.input-lg, .input-group-lg > textarea.form-control,
|
||||
.input-group-lg > textarea.input-group-addon,
|
||||
.input-group-lg > .input-group-btn > textarea.btn,
|
||||
.input-group-lg > .input-group-btn > textarea.progress-button,
|
||||
select[multiple].input-lg,
|
||||
.input-group-lg > select[multiple].form-control,
|
||||
.input-group-lg > select[multiple].input-group-addon,
|
||||
.input-group-lg > .input-group-btn > select[multiple].btn {
|
||||
.input-group-lg > .input-group-btn > select[multiple].btn,
|
||||
.input-group-lg > .input-group-btn > select[multiple].progress-button {
|
||||
height: auto; }
|
||||
|
||||
.form-group-lg .form-control {
|
||||
@ -2608,6 +2627,7 @@ select[multiple].input-lg,
|
||||
.input-lg + .form-control-feedback, .input-group-lg > .form-control + .form-control-feedback,
|
||||
.input-group-lg > .input-group-addon + .form-control-feedback,
|
||||
.input-group-lg > .input-group-btn > .btn + .form-control-feedback,
|
||||
.input-group-lg > .input-group-btn > .progress-button + .form-control-feedback,
|
||||
.input-group-lg + .form-control-feedback,
|
||||
.form-group-lg .form-control + .form-control-feedback {
|
||||
width: 45px;
|
||||
@ -2617,6 +2637,7 @@ select[multiple].input-lg,
|
||||
.input-sm + .form-control-feedback, .input-group-sm > .form-control + .form-control-feedback,
|
||||
.input-group-sm > .input-group-addon + .form-control-feedback,
|
||||
.input-group-sm > .input-group-btn > .btn + .form-control-feedback,
|
||||
.input-group-sm > .input-group-btn > .progress-button + .form-control-feedback,
|
||||
.input-group-sm + .form-control-feedback,
|
||||
.form-group-sm .form-control + .form-control-feedback {
|
||||
width: 30px;
|
||||
@ -2801,7 +2822,7 @@ select[multiple].input-lg,
|
||||
padding-top: 6px;
|
||||
font-size: 12px; } }
|
||||
|
||||
.btn {
|
||||
.btn, .progress-button {
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
font-weight: normal;
|
||||
@ -2820,28 +2841,30 @@ select[multiple].input-lg,
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none; }
|
||||
.btn:focus, .btn.focus, .btn:active:focus, .btn:active.focus, .btn.active:focus, .btn.active.focus {
|
||||
.btn:focus, .progress-button:focus, .btn.focus, .focus.progress-button, .btn:active:focus, .progress-button:active:focus, .btn:active.focus, .progress-button:active.focus, .btn.active:focus, .active.progress-button:focus, .btn.active.focus, .active.focus.progress-button {
|
||||
outline: thin dotted;
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
outline-offset: -2px; }
|
||||
.btn:hover, .btn:focus, .btn.focus {
|
||||
.btn:hover, .progress-button:hover, .btn:focus, .progress-button:focus, .btn.focus, .focus.progress-button {
|
||||
color: #333;
|
||||
text-decoration: none; }
|
||||
.btn:active, .btn.active {
|
||||
.btn:active, .progress-button:active, .btn.active, .active.progress-button {
|
||||
outline: 0;
|
||||
background-image: none;
|
||||
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); }
|
||||
.btn.disabled, .btn[disabled],
|
||||
fieldset[disabled] .btn {
|
||||
.btn.disabled, .disabled.progress-button, .btn[disabled], [disabled].progress-button,
|
||||
fieldset[disabled] .btn,
|
||||
fieldset[disabled] .progress-button {
|
||||
cursor: initial;
|
||||
opacity: 0.65;
|
||||
filter: alpha(opacity=65);
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none; }
|
||||
|
||||
a.btn.disabled,
|
||||
fieldset[disabled] a.btn {
|
||||
a.btn.disabled, a.disabled.progress-button,
|
||||
fieldset[disabled] a.btn,
|
||||
fieldset[disabled] a.progress-button {
|
||||
pointer-events: none; }
|
||||
|
||||
.btn-default {
|
||||
@ -2881,40 +2904,48 @@ fieldset[disabled] a.btn {
|
||||
color: #fff;
|
||||
background-color: #333; }
|
||||
|
||||
.btn-primary {
|
||||
.btn-primary, .progress-button--primary {
|
||||
color: #fff;
|
||||
background-color: #5793db;
|
||||
border-color: #4286d7; }
|
||||
.btn-primary:focus, .btn-primary.focus {
|
||||
.btn-primary:focus, .progress-button--primary:focus, .btn-primary.focus, .focus.progress-button--primary {
|
||||
color: #fff;
|
||||
background-color: #2d78d2;
|
||||
border-color: #1b487e; }
|
||||
.btn-primary:hover {
|
||||
.btn-primary:hover, .progress-button--primary:hover {
|
||||
color: #fff;
|
||||
background-color: #2d78d2;
|
||||
border-color: #2767b5; }
|
||||
.btn-primary:active, .btn-primary.active,
|
||||
.open > .btn-primary.dropdown-toggle {
|
||||
.btn-primary:active, .progress-button--primary:active, .btn-primary.active, .active.progress-button--primary,
|
||||
.open > .btn-primary.dropdown-toggle,
|
||||
.open > .dropdown-toggle.progress-button--primary {
|
||||
color: #fff;
|
||||
background-color: #2d78d2;
|
||||
border-color: #2767b5; }
|
||||
.btn-primary:active:hover, .btn-primary:active:focus, .btn-primary:active.focus, .btn-primary.active:hover, .btn-primary.active:focus, .btn-primary.active.focus,
|
||||
.btn-primary:active:hover, .progress-button--primary:active:hover, .btn-primary:active:focus, .progress-button--primary:active:focus, .btn-primary:active.focus, .progress-button--primary:active.focus, .btn-primary.active:hover, .active.progress-button--primary:hover, .btn-primary.active:focus, .active.progress-button--primary:focus, .btn-primary.active.focus, .active.focus.progress-button--primary,
|
||||
.open > .btn-primary.dropdown-toggle:hover,
|
||||
.open > .dropdown-toggle.progress-button--primary:hover,
|
||||
.open > .btn-primary.dropdown-toggle:focus,
|
||||
.open > .btn-primary.dropdown-toggle.focus {
|
||||
.open > .dropdown-toggle.progress-button--primary:focus,
|
||||
.open > .btn-primary.dropdown-toggle.focus,
|
||||
.open > .dropdown-toggle.focus.progress-button--primary {
|
||||
color: #fff;
|
||||
background-color: #2767b5;
|
||||
border-color: #1b487e; }
|
||||
.btn-primary:active, .btn-primary.active,
|
||||
.open > .btn-primary.dropdown-toggle {
|
||||
.btn-primary:active, .progress-button--primary:active, .btn-primary.active, .active.progress-button--primary,
|
||||
.open > .btn-primary.dropdown-toggle,
|
||||
.open > .dropdown-toggle.progress-button--primary {
|
||||
background-image: none; }
|
||||
.btn-primary.disabled:hover, .btn-primary.disabled:focus, .btn-primary.disabled.focus, .btn-primary[disabled]:hover, .btn-primary[disabled]:focus, .btn-primary[disabled].focus,
|
||||
.btn-primary.disabled:hover, .disabled.progress-button--primary:hover, .btn-primary.disabled:focus, .disabled.progress-button--primary:focus, .btn-primary.disabled.focus, .disabled.focus.progress-button--primary, .btn-primary[disabled]:hover, [disabled].progress-button--primary:hover, .btn-primary[disabled]:focus, [disabled].progress-button--primary:focus, .btn-primary[disabled].focus, [disabled].focus.progress-button--primary,
|
||||
fieldset[disabled] .btn-primary:hover,
|
||||
fieldset[disabled] .progress-button--primary:hover,
|
||||
fieldset[disabled] .btn-primary:focus,
|
||||
fieldset[disabled] .btn-primary.focus {
|
||||
fieldset[disabled] .progress-button--primary:focus,
|
||||
fieldset[disabled] .btn-primary.focus,
|
||||
fieldset[disabled] .focus.progress-button--primary {
|
||||
background-color: #5793db;
|
||||
border-color: #4286d7; }
|
||||
.btn-primary .badge {
|
||||
.btn-primary .badge, .progress-button--primary .badge {
|
||||
color: #5793db;
|
||||
background-color: #fff; }
|
||||
|
||||
@ -3087,19 +3118,19 @@ fieldset[disabled] a.btn {
|
||||
color: #ddd;
|
||||
text-decoration: none; }
|
||||
|
||||
.btn-lg, .btn-group-lg > .btn {
|
||||
.btn-lg, .btn-group-lg > .btn, .btn-group-lg > .progress-button {
|
||||
padding: 10px 16px;
|
||||
font-size: 17px;
|
||||
line-height: 1.33333;
|
||||
border-radius: 6px; }
|
||||
|
||||
.btn-sm, .btn-group-sm > .btn {
|
||||
.btn-sm, .btn-group-sm > .btn, .btn-group-sm > .progress-button {
|
||||
padding: 5px 10px;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
border-radius: 3px; }
|
||||
|
||||
.btn-xs, .btn-group-xs > .btn {
|
||||
.btn-xs, .btn-group-xs > .btn, .btn-group-xs > .progress-button {
|
||||
padding: 1px 5px;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
@ -3283,20 +3314,27 @@ tbody.collapse.in {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: middle; }
|
||||
.btn-group > .btn,
|
||||
.btn-group-vertical > .btn {
|
||||
.btn-group > .btn, .btn-group > .progress-button,
|
||||
.btn-group-vertical > .btn,
|
||||
.btn-group-vertical > .progress-button {
|
||||
position: relative;
|
||||
float: left; }
|
||||
.btn-group > .btn:hover, .btn-group > .btn:focus, .btn-group > .btn:active, .btn-group > .btn.active,
|
||||
.btn-group > .btn:hover, .btn-group > .progress-button:hover, .btn-group > .btn:focus, .btn-group > .progress-button:focus, .btn-group > .btn:active, .btn-group > .progress-button:active, .btn-group > .btn.active, .btn-group > .active.progress-button,
|
||||
.btn-group-vertical > .btn:hover,
|
||||
.btn-group-vertical > .progress-button:hover,
|
||||
.btn-group-vertical > .btn:focus,
|
||||
.btn-group-vertical > .progress-button:focus,
|
||||
.btn-group-vertical > .btn:active,
|
||||
.btn-group-vertical > .btn.active {
|
||||
.btn-group-vertical > .progress-button:active,
|
||||
.btn-group-vertical > .btn.active,
|
||||
.btn-group-vertical > .active.progress-button {
|
||||
z-index: 2; }
|
||||
|
||||
.btn-group .btn + .btn,
|
||||
.btn-group .btn + .btn, .btn-group .progress-button + .btn, .btn-group .btn + .progress-button, .btn-group .progress-button + .progress-button,
|
||||
.btn-group .btn + .btn-group,
|
||||
.btn-group .progress-button + .btn-group,
|
||||
.btn-group .btn-group + .btn,
|
||||
.btn-group .btn-group + .progress-button,
|
||||
.btn-group .btn-group + .btn-group {
|
||||
margin-left: -1px; }
|
||||
|
||||
@ -3307,25 +3345,25 @@ tbody.collapse.in {
|
||||
display: table; }
|
||||
.btn-toolbar:after {
|
||||
clear: both; }
|
||||
.btn-toolbar .btn,
|
||||
.btn-toolbar .btn, .btn-toolbar .progress-button,
|
||||
.btn-toolbar .btn-group,
|
||||
.btn-toolbar .input-group {
|
||||
float: left; }
|
||||
.btn-toolbar > .btn,
|
||||
.btn-toolbar > .btn, .btn-toolbar > .progress-button,
|
||||
.btn-toolbar > .btn-group,
|
||||
.btn-toolbar > .input-group {
|
||||
margin-left: 5px; }
|
||||
|
||||
.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
|
||||
.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle), .btn-group > .progress-button:not(:first-child):not(:last-child):not(.dropdown-toggle) {
|
||||
border-radius: 0; }
|
||||
|
||||
.btn-group > .btn:first-child {
|
||||
.btn-group > .btn:first-child, .btn-group > .progress-button:first-child {
|
||||
margin-left: 0; }
|
||||
.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
|
||||
.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle), .btn-group > .progress-button:first-child:not(:last-child):not(.dropdown-toggle) {
|
||||
border-bottom-right-radius: 0;
|
||||
border-top-right-radius: 0; }
|
||||
|
||||
.btn-group > .btn:last-child:not(:first-child),
|
||||
.btn-group > .btn:last-child:not(:first-child), .btn-group > .progress-button:last-child:not(:first-child),
|
||||
.btn-group > .dropdown-toggle:not(:first-child) {
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0; }
|
||||
@ -3333,15 +3371,15 @@ tbody.collapse.in {
|
||||
.btn-group > .btn-group {
|
||||
float: left; }
|
||||
|
||||
.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
|
||||
.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn, .btn-group > .btn-group:not(:first-child):not(:last-child) > .progress-button {
|
||||
border-radius: 0; }
|
||||
|
||||
.btn-group > .btn-group:first-child:not(:last-child) > .btn:last-child,
|
||||
.btn-group > .btn-group:first-child:not(:last-child) > .btn:last-child, .btn-group > .btn-group:first-child:not(:last-child) > .progress-button:last-child,
|
||||
.btn-group > .btn-group:first-child:not(:last-child) > .dropdown-toggle {
|
||||
border-bottom-right-radius: 0;
|
||||
border-top-right-radius: 0; }
|
||||
|
||||
.btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child {
|
||||
.btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child, .btn-group > .btn-group:last-child:not(:first-child) > .progress-button:first-child {
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0; }
|
||||
|
||||
@ -3349,11 +3387,11 @@ tbody.collapse.in {
|
||||
.btn-group.open .dropdown-toggle {
|
||||
outline: 0; }
|
||||
|
||||
.btn-group > .btn + .dropdown-toggle {
|
||||
.btn-group > .btn + .dropdown-toggle, .btn-group > .progress-button + .dropdown-toggle {
|
||||
padding-left: 8px;
|
||||
padding-right: 8px; }
|
||||
|
||||
.btn-group > .btn-lg + .dropdown-toggle, .btn-group-lg.btn-group > .btn + .dropdown-toggle {
|
||||
.btn-group > .btn-lg + .dropdown-toggle, .btn-group-lg.btn-group > .btn + .dropdown-toggle, .btn-group-lg.btn-group > .progress-button + .dropdown-toggle {
|
||||
padding-left: 12px;
|
||||
padding-right: 12px; }
|
||||
|
||||
@ -3364,19 +3402,20 @@ tbody.collapse.in {
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none; }
|
||||
|
||||
.btn .caret {
|
||||
.btn .caret, .progress-button .caret {
|
||||
margin-left: 0; }
|
||||
|
||||
.btn-lg .caret, .btn-group-lg > .btn .caret {
|
||||
.btn-lg .caret, .btn-group-lg > .btn .caret, .btn-group-lg > .progress-button .caret {
|
||||
border-width: 5px 5px 0;
|
||||
border-bottom-width: 0; }
|
||||
|
||||
.dropup .btn-lg .caret, .dropup .btn-group-lg > .btn .caret {
|
||||
.dropup .btn-lg .caret, .dropup .btn-group-lg > .btn .caret, .dropup .btn-group-lg > .progress-button .caret {
|
||||
border-width: 0 5px 5px; }
|
||||
|
||||
.btn-group-vertical > .btn,
|
||||
.btn-group-vertical > .btn, .btn-group-vertical > .progress-button,
|
||||
.btn-group-vertical > .btn-group,
|
||||
.btn-group-vertical > .btn-group > .btn {
|
||||
.btn-group-vertical > .btn-group > .btn,
|
||||
.btn-group-vertical > .btn-group > .progress-button {
|
||||
display: block;
|
||||
float: none;
|
||||
width: 100%;
|
||||
@ -3389,40 +3428,42 @@ tbody.collapse.in {
|
||||
.btn-group-vertical > .btn-group:after {
|
||||
clear: both; }
|
||||
|
||||
.btn-group-vertical > .btn-group > .btn {
|
||||
.btn-group-vertical > .btn-group > .btn, .btn-group-vertical > .btn-group > .progress-button {
|
||||
float: none; }
|
||||
|
||||
.btn-group-vertical > .btn + .btn,
|
||||
.btn-group-vertical > .btn + .btn, .btn-group-vertical > .progress-button + .btn, .btn-group-vertical > .btn + .progress-button, .btn-group-vertical > .progress-button + .progress-button,
|
||||
.btn-group-vertical > .btn + .btn-group,
|
||||
.btn-group-vertical > .progress-button + .btn-group,
|
||||
.btn-group-vertical > .btn-group + .btn,
|
||||
.btn-group-vertical > .btn-group + .progress-button,
|
||||
.btn-group-vertical > .btn-group + .btn-group {
|
||||
margin-top: -1px;
|
||||
margin-left: 0; }
|
||||
|
||||
.btn-group-vertical > .btn:not(:first-child):not(:last-child) {
|
||||
.btn-group-vertical > .btn:not(:first-child):not(:last-child), .btn-group-vertical > .progress-button:not(:first-child):not(:last-child) {
|
||||
border-radius: 0; }
|
||||
|
||||
.btn-group-vertical > .btn:first-child:not(:last-child) {
|
||||
.btn-group-vertical > .btn:first-child:not(:last-child), .btn-group-vertical > .progress-button:first-child:not(:last-child) {
|
||||
border-top-right-radius: 4px;
|
||||
border-top-left-radius: 4px;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0; }
|
||||
|
||||
.btn-group-vertical > .btn:last-child:not(:first-child) {
|
||||
.btn-group-vertical > .btn:last-child:not(:first-child), .btn-group-vertical > .progress-button:last-child:not(:first-child) {
|
||||
border-top-right-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-right-radius: 4px;
|
||||
border-bottom-left-radius: 4px; }
|
||||
|
||||
.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
|
||||
.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn, .btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .progress-button {
|
||||
border-radius: 0; }
|
||||
|
||||
.btn-group-vertical > .btn-group:first-child:not(:last-child) > .btn:last-child,
|
||||
.btn-group-vertical > .btn-group:first-child:not(:last-child) > .btn:last-child, .btn-group-vertical > .btn-group:first-child:not(:last-child) > .progress-button:last-child,
|
||||
.btn-group-vertical > .btn-group:first-child:not(:last-child) > .dropdown-toggle {
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0; }
|
||||
|
||||
.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {
|
||||
.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child, .btn-group-vertical > .btn-group:last-child:not(:first-child) > .progress-button:first-child {
|
||||
border-top-right-radius: 0;
|
||||
border-top-left-radius: 0; }
|
||||
|
||||
@ -3431,20 +3472,23 @@ tbody.collapse.in {
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
border-collapse: separate; }
|
||||
.btn-group-justified > .btn,
|
||||
.btn-group-justified > .btn, .btn-group-justified > .progress-button,
|
||||
.btn-group-justified > .btn-group {
|
||||
float: none;
|
||||
display: table-cell;
|
||||
width: 1%; }
|
||||
.btn-group-justified > .btn-group .btn {
|
||||
.btn-group-justified > .btn-group .btn, .btn-group-justified > .btn-group .progress-button {
|
||||
width: 100%; }
|
||||
.btn-group-justified > .btn-group .dropdown-menu {
|
||||
left: auto; }
|
||||
|
||||
[data-toggle="buttons"] > .btn input[type="radio"],
|
||||
[data-toggle="buttons"] > .btn input[type="radio"], [data-toggle="buttons"] > .progress-button input[type="radio"],
|
||||
[data-toggle="buttons"] > .btn input[type="checkbox"],
|
||||
[data-toggle="buttons"] > .progress-button input[type="checkbox"],
|
||||
[data-toggle="buttons"] > .btn-group > .btn input[type="radio"],
|
||||
[data-toggle="buttons"] > .btn-group > .btn input[type="checkbox"] {
|
||||
[data-toggle="buttons"] > .btn-group > .progress-button input[type="radio"],
|
||||
[data-toggle="buttons"] > .btn-group > .btn input[type="checkbox"],
|
||||
[data-toggle="buttons"] > .btn-group > .progress-button input[type="checkbox"] {
|
||||
position: absolute;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
pointer-events: none; }
|
||||
@ -3493,13 +3537,15 @@ tbody.collapse.in {
|
||||
border-radius: 4px; }
|
||||
.input-group-addon.input-sm,
|
||||
.input-group-sm > .input-group-addon,
|
||||
.input-group-sm > .input-group-btn > .input-group-addon.btn {
|
||||
.input-group-sm > .input-group-btn > .input-group-addon.btn,
|
||||
.input-group-sm > .input-group-btn > .input-group-addon.progress-button {
|
||||
padding: 5px 10px;
|
||||
font-size: 12px;
|
||||
border-radius: 3px; }
|
||||
.input-group-addon.input-lg,
|
||||
.input-group-lg > .input-group-addon,
|
||||
.input-group-lg > .input-group-btn > .input-group-addon.btn {
|
||||
.input-group-lg > .input-group-btn > .input-group-addon.btn,
|
||||
.input-group-lg > .input-group-btn > .input-group-addon.progress-button {
|
||||
padding: 10px 16px;
|
||||
font-size: 17px;
|
||||
border-radius: 6px; }
|
||||
@ -3510,10 +3556,14 @@ tbody.collapse.in {
|
||||
.input-group .form-control:first-child,
|
||||
.input-group-addon:first-child,
|
||||
.input-group-btn:first-child > .btn,
|
||||
.input-group-btn:first-child > .progress-button,
|
||||
.input-group-btn:first-child > .btn-group > .btn,
|
||||
.input-group-btn:first-child > .btn-group > .progress-button,
|
||||
.input-group-btn:first-child > .dropdown-toggle,
|
||||
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
|
||||
.input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
|
||||
.input-group-btn:last-child > .progress-button:not(:last-child):not(.dropdown-toggle),
|
||||
.input-group-btn:last-child > .btn-group:not(:last-child) > .btn,
|
||||
.input-group-btn:last-child > .btn-group:not(:last-child) > .progress-button {
|
||||
border-bottom-right-radius: 0;
|
||||
border-top-right-radius: 0; }
|
||||
|
||||
@ -3523,10 +3573,14 @@ tbody.collapse.in {
|
||||
.input-group .form-control:last-child,
|
||||
.input-group-addon:last-child,
|
||||
.input-group-btn:last-child > .btn,
|
||||
.input-group-btn:last-child > .progress-button,
|
||||
.input-group-btn:last-child > .btn-group > .btn,
|
||||
.input-group-btn:last-child > .btn-group > .progress-button,
|
||||
.input-group-btn:last-child > .dropdown-toggle,
|
||||
.input-group-btn:first-child > .btn:not(:first-child),
|
||||
.input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
|
||||
.input-group-btn:first-child > .progress-button:not(:first-child),
|
||||
.input-group-btn:first-child > .btn-group:not(:first-child) > .btn,
|
||||
.input-group-btn:first-child > .btn-group:not(:first-child) > .progress-button {
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0; }
|
||||
|
||||
@ -3537,16 +3591,16 @@ tbody.collapse.in {
|
||||
position: relative;
|
||||
font-size: 0;
|
||||
white-space: nowrap; }
|
||||
.input-group-btn > .btn {
|
||||
.input-group-btn > .btn, .input-group-btn > .progress-button {
|
||||
position: relative; }
|
||||
.input-group-btn > .btn + .btn {
|
||||
.input-group-btn > .btn + .btn, .input-group-btn > .progress-button + .btn, .input-group-btn > .btn + .progress-button, .input-group-btn > .progress-button + .progress-button {
|
||||
margin-left: -1px; }
|
||||
.input-group-btn > .btn:hover, .input-group-btn > .btn:focus, .input-group-btn > .btn:active {
|
||||
.input-group-btn > .btn:hover, .input-group-btn > .progress-button:hover, .input-group-btn > .btn:focus, .input-group-btn > .progress-button:focus, .input-group-btn > .btn:active, .input-group-btn > .progress-button:active {
|
||||
z-index: 2; }
|
||||
.input-group-btn:first-child > .btn,
|
||||
.input-group-btn:first-child > .btn, .input-group-btn:first-child > .progress-button,
|
||||
.input-group-btn:first-child > .btn-group {
|
||||
margin-right: -1px; }
|
||||
.input-group-btn:last-child > .btn,
|
||||
.input-group-btn:last-child > .btn, .input-group-btn:last-child > .progress-button,
|
||||
.input-group-btn:last-child > .btn-group {
|
||||
z-index: 2;
|
||||
margin-left: -1px; }
|
||||
@ -3925,10 +3979,10 @@ tbody.collapse.in {
|
||||
.navbar-btn {
|
||||
margin-top: 9px;
|
||||
margin-bottom: 9px; }
|
||||
.navbar-btn.btn-sm, .btn-group-sm > .navbar-btn.btn {
|
||||
.navbar-btn.btn-sm, .btn-group-sm > .navbar-btn.btn, .btn-group-sm > .navbar-btn.progress-button {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px; }
|
||||
.navbar-btn.btn-xs, .btn-group-xs > .navbar-btn.btn {
|
||||
.navbar-btn.btn-xs, .btn-group-xs > .navbar-btn.btn, .btn-group-xs > .navbar-btn.progress-button {
|
||||
margin-top: 14px;
|
||||
margin-bottom: 14px; }
|
||||
|
||||
@ -4221,7 +4275,7 @@ tbody.collapse.in {
|
||||
border-radius: .25em; }
|
||||
.label:empty {
|
||||
display: none; }
|
||||
.btn .label {
|
||||
.btn .label, .progress-button .label {
|
||||
position: relative;
|
||||
top: -1px; }
|
||||
|
||||
@ -4275,11 +4329,12 @@ a.label:hover, a.label:focus {
|
||||
border-radius: 10px; }
|
||||
.badge:empty {
|
||||
display: none; }
|
||||
.btn .badge {
|
||||
.btn .badge, .progress-button .badge {
|
||||
position: relative;
|
||||
top: -1px; }
|
||||
.btn-xs .badge, .btn-group-xs > .btn .badge,
|
||||
.btn-group-xs > .btn .badge {
|
||||
.btn-xs .badge, .btn-group-xs > .btn .badge, .btn-group-xs > .progress-button .badge,
|
||||
.btn-group-xs > .btn .badge,
|
||||
.btn-group-xs > .progress-button .badge {
|
||||
top: 0;
|
||||
padding: 1px 5px; }
|
||||
.list-group-item.active > .badge,
|
||||
@ -5169,10 +5224,10 @@ button.close {
|
||||
display: table; }
|
||||
.modal-footer:after {
|
||||
clear: both; }
|
||||
.modal-footer .btn + .btn {
|
||||
.modal-footer .btn + .btn, .modal-footer .progress-button + .btn, .modal-footer .btn + .progress-button, .modal-footer .progress-button + .progress-button {
|
||||
margin-left: 5px;
|
||||
margin-bottom: 0; }
|
||||
.modal-footer .btn-group .btn + .btn {
|
||||
.modal-footer .btn-group .btn + .btn, .modal-footer .btn-group .progress-button + .btn, .modal-footer .btn-group .btn + .progress-button, .modal-footer .btn-group .progress-button + .progress-button {
|
||||
margin-left: -1px; }
|
||||
.modal-footer .btn-block + .btn-block {
|
||||
margin-left: 0; }
|
||||
@ -5594,7 +5649,7 @@ button.close {
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
|
||||
.carousel-caption .btn {
|
||||
.carousel-caption .btn, .carousel-caption .progress-button {
|
||||
text-shadow: none; }
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
@ -5930,7 +5985,7 @@ button.close {
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
button.btn {
|
||||
button.btn, button.progress-button {
|
||||
padding: 10px;
|
||||
padding-top: 11px;
|
||||
border-radius: 2px;
|
||||
@ -5938,17 +5993,17 @@ button.btn {
|
||||
letter-spacing: 0.5px;
|
||||
outline: none;
|
||||
position: relative; }
|
||||
button.btn[disabled] {
|
||||
button.btn[disabled], button[disabled].progress-button {
|
||||
background-color: #313339;
|
||||
color: #787c7f;
|
||||
pointer-events: none; }
|
||||
button.btn[disabled]:hover {
|
||||
button.btn[disabled]:hover, button[disabled].progress-button:hover {
|
||||
background-color: #36383e; }
|
||||
|
||||
.btn:not(.btn-link) {
|
||||
.btn:not(.btn-link), .progress-button:not(.btn-link) {
|
||||
min-width: 170px; }
|
||||
|
||||
.btn > .glyphicon, .btn > .tick {
|
||||
.btn > .glyphicon, .progress-button > .glyphicon, .btn > .tick, .progress-button > .tick {
|
||||
top: 2px;
|
||||
margin-right: 2px; }
|
||||
|
||||
@ -5957,7 +6012,7 @@ button.btn {
|
||||
* !important is needed here for some reason
|
||||
* despite the rule having top precedence.
|
||||
*/
|
||||
button.btn:focus {
|
||||
button.btn:focus, button.progress-button:focus {
|
||||
outline: none !important; }
|
||||
|
||||
/*
|
||||
@ -5987,21 +6042,52 @@ button.btn:focus {
|
||||
.tick--error {
|
||||
background-color: #d9534f; }
|
||||
|
||||
/*
|
||||
* Copyright 2016 Resin.io
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
.progress-button[percentage="100"][active="false"] .progress-button__bar {
|
||||
background-color: #5cb85c; }
|
||||
|
||||
.progress-button[percentage="100"][active="true"] .progress-button__bar {
|
||||
background-color: #f0ad4e; }
|
||||
|
||||
.progress-button[active="true"] {
|
||||
pointer-events: none; }
|
||||
|
||||
.progress-button--primary .progress-button__bar {
|
||||
background: #6ca1e0; }
|
||||
|
||||
.progress-button__content {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
transition: transform 0.3s; }
|
||||
|
||||
.progress-button__bar {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
transition: width 0.3s, opacity 0.3s; }
|
||||
|
||||
html {
|
||||
background-color: #535760; }
|
||||
|
||||
hero-icon[disabled] .caption {
|
||||
color: #787c7f; }
|
||||
|
||||
hero-progress-button .bar {
|
||||
background: #6ca1e0; }
|
||||
|
||||
hero-progress-button[percentage="100"][active="false"] .bar {
|
||||
background-color: #5cb85c; }
|
||||
|
||||
hero-progress-button[percentage="100"][active="true"] .bar {
|
||||
background-color: #f0ad4e; }
|
||||
|
||||
hero-icon[disabled] path {
|
||||
fill: #787c7f; }
|
||||
|
||||
@ -6085,6 +6171,6 @@ body {
|
||||
.section-header {
|
||||
padding: 5px 8px;
|
||||
font-size: 15px; }
|
||||
.section-header > .btn {
|
||||
.section-header > .btn, .section-header > .progress-button {
|
||||
padding-left: 3px;
|
||||
padding-right: 3px; }
|
||||
|
||||
@ -38,6 +38,7 @@ require('./browser/modules/notifier');
|
||||
require('./browser/modules/analytics');
|
||||
require('./browser/controllers/finish');
|
||||
require('./browser/controllers/navigation');
|
||||
require('./browser/components/progress-button');
|
||||
|
||||
const app = angular.module('Etcher', [
|
||||
'ui.router',
|
||||
@ -54,7 +55,10 @@ const app = angular.module('Etcher', [
|
||||
|
||||
// Controllers
|
||||
'Etcher.controllers.finish',
|
||||
'Etcher.controllers.navigation'
|
||||
'Etcher.controllers.navigation',
|
||||
|
||||
// Components
|
||||
'Etcher.Components.ProgressButton'
|
||||
]);
|
||||
|
||||
app.config(function($stateProvider, $urlRouterProvider) {
|
||||
|
||||
41
lib/browser/components/progress-button.js
Normal file
41
lib/browser/components/progress-button.js
Normal file
@ -0,0 +1,41 @@
|
||||
/*
|
||||
* Copyright 2016 Resin.io
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* @module Etcher.Components.ProgressButton
|
||||
*/
|
||||
|
||||
const angular = require('angular');
|
||||
const ProgressButton = angular.module('Etcher.Components.ProgressButton', []);
|
||||
|
||||
ProgressButton.directive('progressButton', function() {
|
||||
return {
|
||||
restrict: 'E',
|
||||
replace: true,
|
||||
transclude: true,
|
||||
scope: {
|
||||
percentage: '='
|
||||
},
|
||||
template: [
|
||||
'<button class="progress-button progress-button--primary">',
|
||||
'<span class="progress-button__content" ng-transclude></span>',
|
||||
'<span class="progress-button__bar" ng-style="{ width: percentage + \'%\' }"></span>',
|
||||
'</button>'
|
||||
].join('\n')
|
||||
};
|
||||
});
|
||||
@ -1,69 +0,0 @@
|
||||
<link rel="import" href="../../bower_components/polymer/polymer.html">
|
||||
|
||||
<!-- From http://tympanus.net/Development/ProgressButtonStyles/ -->
|
||||
<dom-module id="hero-progress-button">
|
||||
<template>
|
||||
<style>
|
||||
:host[active="true"] {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
:host ::content .text {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
:host ::content .bar {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
||||
width: 0;
|
||||
height: 100%;
|
||||
|
||||
transition: width 0.3s, opacity 0.3s;
|
||||
}
|
||||
</style>
|
||||
|
||||
<button class="btn btn-primary" disabled="{{disabled}}">
|
||||
<span class="text">
|
||||
<content></content>
|
||||
</span>
|
||||
<span class="bar"></span>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
Polymer({
|
||||
is: 'hero-progress-button',
|
||||
properties: {
|
||||
active: {
|
||||
type: Boolean
|
||||
},
|
||||
disabled: {
|
||||
type: String
|
||||
},
|
||||
percentage: {
|
||||
type: Number,
|
||||
value: 0,
|
||||
notify: true
|
||||
}
|
||||
},
|
||||
setProgress: function(percentage) {
|
||||
'use strict';
|
||||
|
||||
let bar = this.querySelector('.bar');
|
||||
bar.style.width = percentage + '%';
|
||||
},
|
||||
ready: function() {
|
||||
'use strict';
|
||||
|
||||
this.setProgress(this.percentage);
|
||||
this.addEventListener('percentage-changed', function(event) {
|
||||
this.setProgress(event.detail.value);
|
||||
}.bind(this));
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</dom-module>
|
||||
@ -8,7 +8,6 @@
|
||||
<link rel="stylesheet" type="text/css" href="css/angular.css">
|
||||
|
||||
<link rel="import" href="components/hero-icon.html">
|
||||
<link rel="import" href="components/hero-progress-button.html">
|
||||
|
||||
<script>
|
||||
window._trackJs = {
|
||||
|
||||
@ -58,7 +58,7 @@
|
||||
<span class="badge space-top-medium" ng-disabled="!app.selection.hasImage() || !app.selection.hasDrive()">3</span>
|
||||
|
||||
<div class="space-vertical-large">
|
||||
<hero-progress-button percentage="{{ app.writer.state.progress }}" ng-attr-active="{{ app.writer.isBurning() }}"
|
||||
<progress-button percentage="app.writer.state.progress" ng-attr-active="{{ app.writer.isBurning() }}"
|
||||
ng-click="app.burn(app.selection.getImage(), app.selection.getDrive())"
|
||||
ng-disabled="!app.selection.hasImage() || !app.selection.hasDrive()">
|
||||
<span ng-show="app.writer.state.progress == 100 && app.writer.isBurning()">Finishing...</span>
|
||||
@ -66,7 +66,7 @@
|
||||
<span ng-show="app.writer.state.progress == 0 && app.writer.isBurning() && !app.writer.state.speed">Starting...</span>
|
||||
<span ng-show="app.writer.state.speed && app.writer.state.progress != 100"
|
||||
ng-bind="app.writer.state.progress + '% '"></span>
|
||||
</hero-progress-button>
|
||||
</progress-button>
|
||||
|
||||
<p class="step-footer" ng-bind="app.writer.state.speed.toFixed(2) + ' MB/s'" ng-show="app.writer.state.speed && app.writer.state.progress != 100"></p>
|
||||
</div>
|
||||
|
||||
58
lib/scss/components/_progress-button.scss
Normal file
58
lib/scss/components/_progress-button.scss
Normal file
@ -0,0 +1,58 @@
|
||||
/*
|
||||
* Copyright 2016 Resin.io
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
// From http://tympanus.net/Development/ProgressButtonStyles/
|
||||
|
||||
.progress-button {
|
||||
@extend .btn;
|
||||
}
|
||||
|
||||
.progress-button[percentage="100"][active="false"] .progress-button__bar {
|
||||
background-color: $brand-success;
|
||||
}
|
||||
|
||||
.progress-button[percentage="100"][active="true"] .progress-button__bar {
|
||||
background-color: $brand-warning;
|
||||
}
|
||||
|
||||
.progress-button[active="true"] {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.progress-button--primary {
|
||||
@extend .btn-primary;
|
||||
|
||||
.progress-button__bar {
|
||||
background: lighten($brand-primary, 5);
|
||||
}
|
||||
}
|
||||
|
||||
.progress-button__content {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.progress-button__bar {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
||||
width: 0;
|
||||
height: 100%;
|
||||
|
||||
transition: width 0.3s, opacity 0.3s;
|
||||
}
|
||||
@ -34,6 +34,7 @@ $link-hover-decoration: none;
|
||||
@import "./components/caption";
|
||||
@import "./components/button";
|
||||
@import "./components/tick";
|
||||
@import "./components/progress-button";
|
||||
|
||||
// Prevent white flash when running application
|
||||
html {
|
||||
@ -44,18 +45,6 @@ hero-icon[disabled] .caption {
|
||||
color: $color-disabled;
|
||||
}
|
||||
|
||||
hero-progress-button .bar {
|
||||
background: lighten($brand-primary, 5);
|
||||
}
|
||||
|
||||
hero-progress-button[percentage="100"][active="false"] .bar {
|
||||
background-color: $brand-success;
|
||||
}
|
||||
|
||||
hero-progress-button[percentage="100"][active="true"] .bar {
|
||||
background-color: $brand-warning;
|
||||
}
|
||||
|
||||
hero-icon[disabled] path {
|
||||
fill: $color-disabled;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user