mirror of
https://github.com/balena-io/etcher.git
synced 2025-04-24 07:17:18 +00:00
Merge pull request #221 from resin-io/refactor/components
Style refactoring
This commit is contained in:
Juan Cruz Viotti
commit
568781f8c6
@ -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; }
|
||||
@ -256,7 +257,7 @@ th {
|
||||
src: url("../../node_modules/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot");
|
||||
src: url("../../node_modules/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"), url("../../node_modules/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.woff2") format("woff2"), url("../../node_modules/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.woff") format("woff"), url("../../node_modules/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.ttf") format("truetype"), url("../../node_modules/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.svg#glyphicons_halflingsregular") format("svg"); }
|
||||
|
||||
.glyphicon {
|
||||
.glyphicon, .tick {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
display: inline-block;
|
||||
@ -322,10 +323,10 @@ th {
|
||||
.glyphicon-th-list:before {
|
||||
content: "\e012"; }
|
||||
|
||||
.glyphicon-ok:before {
|
||||
.glyphicon-ok:before, .tick--success:before {
|
||||
content: "\e013"; }
|
||||
|
||||
.glyphicon-remove:before {
|
||||
.glyphicon-remove:before, .tick--error:before {
|
||||
content: "\e014"; }
|
||||
|
||||
.glyphicon-zoom-in:before {
|
||||
@ -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) {
|
||||
@ -5832,6 +5887,31 @@ button.close {
|
||||
.hidden-print {
|
||||
display: none !important; } }
|
||||
|
||||
/*
|
||||
* 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.
|
||||
*/
|
||||
html {
|
||||
background-color: #535760; }
|
||||
|
||||
.checkbox input[type="checkbox"] {
|
||||
position: initial;
|
||||
margin-right: 2px; }
|
||||
|
||||
.checkbox input[type="checkbox"]:not(:checked) + * {
|
||||
color: #ddd; }
|
||||
|
||||
/*
|
||||
* Copyright 2016 Resin.io
|
||||
*
|
||||
@ -5854,6 +5934,9 @@ button.close {
|
||||
margin-top: 15px;
|
||||
margin-bottom: 15px; }
|
||||
|
||||
.space-top-medium {
|
||||
margin-top: 15px; }
|
||||
|
||||
.space-vertical-large {
|
||||
margin-top: 30px;
|
||||
margin-bottom: 30px; }
|
||||
@ -5864,37 +5947,170 @@ button.close {
|
||||
.space-right-tiny {
|
||||
margin-right: 5px; }
|
||||
|
||||
html {
|
||||
/*
|
||||
* 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.
|
||||
*/
|
||||
.badge {
|
||||
border: 2px solid;
|
||||
border-radius: 50%;
|
||||
padding: 7px 10px;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
letter-spacing: 0;
|
||||
background-color: #535760; }
|
||||
|
||||
hero-badge .badge {
|
||||
background-color: #535760; }
|
||||
|
||||
hero-badge[disabled] .badge {
|
||||
.badge[disabled] {
|
||||
background-color: #5c5e5c;
|
||||
color: #787c7f; }
|
||||
|
||||
hero-icon[disabled] hero-caption {
|
||||
color: #787c7f; }
|
||||
/*
|
||||
* 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.
|
||||
*/
|
||||
.caption {
|
||||
font-weight: bold;
|
||||
font-size: 11px;
|
||||
margin-bottom: 0;
|
||||
text-transform: uppercase; }
|
||||
|
||||
hero-button .btn {
|
||||
min-width: 170px; }
|
||||
hero-button .btn[disabled] {
|
||||
/*
|
||||
* 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.
|
||||
*/
|
||||
button.btn, button.progress-button {
|
||||
padding: 10px;
|
||||
padding-top: 11px;
|
||||
border-radius: 2px;
|
||||
border: none;
|
||||
letter-spacing: 0.5px;
|
||||
outline: none;
|
||||
position: relative; }
|
||||
button.btn[disabled], button[disabled].progress-button {
|
||||
background-color: #313339;
|
||||
color: #787c7f;
|
||||
pointer-events: none; }
|
||||
hero-button .btn[disabled]:hover {
|
||||
button.btn[disabled]:hover, button[disabled].progress-button:hover {
|
||||
background-color: #36383e; }
|
||||
|
||||
hero-progress-button .bar {
|
||||
background: #6ca1e0; }
|
||||
.btn:not(.btn-link), .progress-button:not(.btn-link) {
|
||||
min-width: 170px; }
|
||||
|
||||
hero-progress-button[percentage="100"][active="false"] .bar {
|
||||
.btn > .glyphicon, .progress-button > .glyphicon, .btn > .tick, .progress-button > .tick {
|
||||
top: 2px;
|
||||
margin-right: 2px; }
|
||||
|
||||
/*
|
||||
* Remove blue/orange outline
|
||||
* !important is needed here for some reason
|
||||
* despite the rule having top precedence.
|
||||
*/
|
||||
button.btn:focus, button.progress-button:focus {
|
||||
outline: none !important; }
|
||||
|
||||
/*
|
||||
* 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.
|
||||
*/
|
||||
.tick {
|
||||
display: inline-block;
|
||||
border-radius: 50%;
|
||||
padding: 5px;
|
||||
font-size: 18px; }
|
||||
|
||||
.tick--success {
|
||||
background-color: #5fb835; }
|
||||
|
||||
.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; }
|
||||
|
||||
hero-progress-button[percentage="100"][active="true"] .bar {
|
||||
.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; }
|
||||
|
||||
hero-icon[disabled] .caption {
|
||||
color: #787c7f; }
|
||||
|
||||
hero-icon[disabled] path {
|
||||
fill: #787c7f; }
|
||||
|
||||
@ -5949,9 +6165,6 @@ body {
|
||||
margin-top: 10px;
|
||||
margin-bottom: -40px;
|
||||
color: #85898c;
|
||||
font-size: 12px; }
|
||||
|
||||
.tiny {
|
||||
font-size: 10px; }
|
||||
|
||||
.separator-xs {
|
||||
@ -5964,23 +6177,13 @@ body {
|
||||
margin: 0 auto 15px;
|
||||
max-width: 165px; }
|
||||
|
||||
.checkbox input[type="checkbox"] {
|
||||
position: initial;
|
||||
margin-right: 2px; }
|
||||
|
||||
.checkbox input[type="checkbox"]:not(:checked) + * {
|
||||
color: #ddd; }
|
||||
|
||||
.wrapper {
|
||||
height: 100%;
|
||||
margin: 20px 60px; }
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-top: 0; }
|
||||
|
||||
.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,24 +0,0 @@
|
||||
<link rel="import" href="../../bower_components/polymer/polymer.html">
|
||||
|
||||
<dom-module id="hero-badge">
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
:host ::content .badge {
|
||||
border: 2px solid;
|
||||
border-radius: 50%;
|
||||
padding: 7px 10px;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<span class="badge">
|
||||
<content></content>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
Polymer({ is: 'hero-badge' });
|
||||
</script>
|
||||
</dom-module>
|
||||
@ -1,58 +0,0 @@
|
||||
<link rel="import" href="../../bower_components/polymer/polymer.html">
|
||||
|
||||
<dom-module id="hero-button">
|
||||
<template>
|
||||
<style>
|
||||
:host ::content button.btn {
|
||||
padding: 10px;
|
||||
padding-top: 11px;
|
||||
|
||||
border-radius: 2px;
|
||||
border: none;
|
||||
|
||||
letter-spacing: 0.5px;
|
||||
outline: none;
|
||||
|
||||
position: relative;
|
||||
}
|
||||
|
||||
:host ::content .glyphicon {
|
||||
top: 2px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
/*
|
||||
* Remove blue/orange outline
|
||||
* !important is needed here for some reason
|
||||
* despite the rule having top precedence.
|
||||
*/
|
||||
:host ::content button.btn:focus {
|
||||
outline: none !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<button type="button" class="btn" disabled="{{disabled}}">
|
||||
<content></content>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
Polymer({
|
||||
is: 'hero-button',
|
||||
properties: {
|
||||
disabled: {
|
||||
type: String
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
value: 'primary'
|
||||
}
|
||||
},
|
||||
ready: function() {
|
||||
'use strict';
|
||||
|
||||
this.querySelector('.btn').className += ` btn-${this.type}`;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</dom-module>
|
||||
@ -1,20 +0,0 @@
|
||||
<link rel="import" href="../../bower_components/polymer/polymer.html">
|
||||
|
||||
<dom-module id="hero-caption">
|
||||
<template>
|
||||
<style>
|
||||
:host ::content strong {
|
||||
font-size: 11px;
|
||||
}
|
||||
</style>
|
||||
<div>
|
||||
<strong>
|
||||
<content></content>
|
||||
</strong>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
Polymer({ is: 'hero-caption' });
|
||||
</script>
|
||||
</dom-module>
|
||||
@ -1,10 +1,10 @@
|
||||
<link rel="import" href="../../bower_components/polymer/polymer.html">
|
||||
<link rel="import" href="hero-caption.html">
|
||||
|
||||
<dom-module id="hero-icon">
|
||||
<template>
|
||||
<style>
|
||||
:host ::content div {
|
||||
:host ::content .caption {
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
<div class="icon"></div>
|
||||
|
||||
<template is="dom-if" if="{{label}}">
|
||||
<hero-caption>{{label}}</hero-caption>
|
||||
<span class="caption">{{label}}</span>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,70 +0,0 @@
|
||||
<link rel="import" href="../../bower_components/polymer/polymer.html">
|
||||
<link rel="import" href="hero-button.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>
|
||||
|
||||
<hero-button disabled="{{disabled}}">
|
||||
<span class="text">
|
||||
<content></content>
|
||||
</span>
|
||||
<span class="bar"></span>
|
||||
</hero-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>
|
||||
@ -1,48 +0,0 @@
|
||||
<link rel="import" href="../../bower_components/polymer/polymer.html">
|
||||
|
||||
<dom-module id="hero-tick">
|
||||
<template>
|
||||
<style>
|
||||
:host ::content .glyphicon {
|
||||
display: inline-block;
|
||||
border-radius: 50%;
|
||||
padding: 5px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
:host ::content .glyphicon-ok {
|
||||
background-color: rgb(95, 184, 53);
|
||||
}
|
||||
|
||||
:host ::content .glyphicon-remove {
|
||||
background-color: #d9534f;
|
||||
}
|
||||
</style>
|
||||
|
||||
<span class="glyphicon"></span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
Polymer({
|
||||
is: 'hero-tick',
|
||||
properties: {
|
||||
type: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
ready: function() {
|
||||
'use strict';
|
||||
|
||||
let glyphicon = this.querySelector('.glyphicon');
|
||||
|
||||
if (this.type === 'success') {
|
||||
glyphicon.className += ' glyphicon-ok';
|
||||
} else if (this.type === 'error') {
|
||||
glyphicon.className += ' glyphicon-remove';
|
||||
} else {
|
||||
throw new Error(`Unknown hero-tick type: ${this.state}`);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</dom-module>
|
||||
@ -52,3 +52,8 @@ input:focus,
|
||||
button:focus {
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
/* Titles don't have margins on desktop apps */
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@ -7,12 +7,7 @@
|
||||
<link rel="stylesheet" type="text/css" href="css/desktop.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/angular.css">
|
||||
|
||||
<link rel="import" href="components/hero-badge.html">
|
||||
<link rel="import" href="components/hero-caption.html">
|
||||
<link rel="import" href="components/hero-icon.html">
|
||||
<link rel="import" href="components/hero-button.html">
|
||||
<link rel="import" href="components/hero-progress-button.html">
|
||||
<link rel="import" href="components/hero-tick.html">
|
||||
|
||||
<script>
|
||||
window._trackJs = {
|
||||
@ -50,7 +45,7 @@
|
||||
|
||||
<div class="col-xs">
|
||||
<div class="box text-right">
|
||||
<hero-caption><span ng-click="navigation.open('https://github.com/resin-io/etcher')">AN OPEN SOURCE PROJECT</span> BY <span ng-click="navigation.open('https://resin.io')">RESIN.IO</span></hero-caption>
|
||||
<p class="caption"><span ng-click="navigation.open('https://github.com/resin-io/etcher')">AN OPEN SOURCE PROJECT</span> BY <span ng-click="navigation.open('https://resin.io')">RESIN.IO</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@ -2,12 +2,12 @@
|
||||
<div class="col-xs">
|
||||
<div class="box text-center">
|
||||
<hero-icon path="images/image.svg" label="SELECT IMAGE"></hero-icon>
|
||||
<hero-badge class="block space-vertical-medium">1</hero-badge>
|
||||
<span class="badge space-top-medium">1</span>
|
||||
|
||||
<div class="space-vertical-large">
|
||||
<div ng-hide="app.selection.hasImage()">
|
||||
<hero-button ng-click="app.selectImage()">Select image</hero-button>
|
||||
<p class="step-footer tiny">*supported files: .img, .iso, .zip</p>
|
||||
<button class="btn btn-primary" ng-click="app.selectImage()">Select image</button>
|
||||
<p class="step-footer">*supported files: .img, .iso, .zip</p>
|
||||
</div>
|
||||
<div ng-show="app.selection.hasImage()">
|
||||
<span ng-bind="app.selection.getImage() | basename" ng-click="app.reselectImage()"></span>
|
||||
@ -22,15 +22,17 @@
|
||||
<div class="step-border-right" ng-disabled="!app.selection.hasImage() || !app.selection.hasDrive()"></div>
|
||||
|
||||
<hero-icon path="images/drive.svg" ng-disabled="!app.selection.hasImage()" label="SELECT DRIVE"></hero-icon>
|
||||
<hero-badge class="block space-vertical-medium" ng-disabled="!app.selection.hasImage()">2</hero-badge>
|
||||
|
||||
<span class="badge space-top-medium" ng-disabled="!app.selection.hasImage()">2</span>
|
||||
|
||||
<div class="space-vertical-large">
|
||||
<div ng-hide="app.selection.hasDrive()">
|
||||
|
||||
<div ng-show="app.scanner.hasAvailableDrives() || !app.selection.hasImage()">
|
||||
<div class="btn-group" uib-dropdown>
|
||||
<hero-button ng-disabled="!app.selection.hasImage()"
|
||||
uib-dropdown-toggle>Select drive</hero-button>
|
||||
<button class="btn btn-primary"
|
||||
ng-disabled="!app.selection.hasImage()"
|
||||
uib-dropdown-toggle>Select drive</button>
|
||||
|
||||
<ul class="dropdown-menu">
|
||||
<li ng-repeat="drive in app.scanner.drives">
|
||||
@ -41,7 +43,7 @@
|
||||
</div>
|
||||
|
||||
<div ng-hide="app.scanner.hasAvailableDrives() || !app.selection.hasImage()">
|
||||
<hero-button type="danger">Connect a drive</hero-button>
|
||||
<button class="btn btn-danger">Connect a drive</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -53,10 +55,10 @@
|
||||
<div class="col-xs">
|
||||
<div class="box text-center">
|
||||
<hero-icon path="images/burn.svg" ng-disabled="!app.selection.hasImage() || !app.selection.hasDrive()" label="BURN IMAGE"></hero-icon>
|
||||
<hero-badge class="block space-vertical-medium" ng-disabled="!app.selection.hasImage() || !app.selection.hasDrive()">3</hero-badge>
|
||||
<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>
|
||||
@ -64,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>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<div class="row around-xs">
|
||||
<div class="col-xs">
|
||||
<div class="box text-center">
|
||||
<h3><hero-tick type="success" class="space-right-tiny"></hero-tick> Burn Complete!</h3>
|
||||
<h3><span class="tick tick--success" class="space-right-tiny"></span> Burn Complete!</h3>
|
||||
<p class="soft"
|
||||
ng-controller="SettingsController as settings"
|
||||
ng-show="settings.storage.unmountOnSuccess">Safely ejected and ready for use</p>
|
||||
@ -11,9 +11,9 @@
|
||||
<div class="box">
|
||||
<p class="soft button-label">Would you like to burn the same image?</p>
|
||||
|
||||
<hero-button ng-click="finish.restart({ preserveImage: true })">
|
||||
<button class="btn btn-primary" ng-click="finish.restart({ preserveImage: true })">
|
||||
Use <b>same</b> image
|
||||
</hero-button>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -23,9 +23,9 @@
|
||||
<div class="box">
|
||||
<p class="soft button-label">Would you like to burn a new image?</p>
|
||||
|
||||
<hero-button ng-click="finish.restart()">
|
||||
<button class="btn btn-primary" ng-click="finish.restart()">
|
||||
Use <b>new</b> image
|
||||
</hero-button>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
30
lib/scss/components/_badge.scss
Normal file
30
lib/scss/components/_badge.scss
Normal file
@ -0,0 +1,30 @@
|
||||
/*
|
||||
* 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.
|
||||
*/
|
||||
|
||||
.badge {
|
||||
border: 2px solid;
|
||||
border-radius: 50%;
|
||||
padding: 7px 10px;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
letter-spacing: 0;
|
||||
background-color: $body-bg;
|
||||
}
|
||||
|
||||
.badge[disabled] {
|
||||
background-color: #5c5e5c;
|
||||
color: $color-disabled;
|
||||
}
|
||||
56
lib/scss/components/_button.scss
Normal file
56
lib/scss/components/_button.scss
Normal file
@ -0,0 +1,56 @@
|
||||
/*
|
||||
* 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.
|
||||
*/
|
||||
|
||||
button.btn {
|
||||
padding: 10px;
|
||||
padding-top: 11px;
|
||||
|
||||
border-radius: 2px;
|
||||
border: none;
|
||||
|
||||
letter-spacing: 0.5px;
|
||||
outline: none;
|
||||
|
||||
position: relative;
|
||||
|
||||
&[disabled] {
|
||||
background-color: $btn-disabled;
|
||||
color: $color-disabled;
|
||||
pointer-events: none;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($btn-disabled, 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn:not(.btn-link) {
|
||||
min-width: $btn-min-width;
|
||||
}
|
||||
|
||||
.btn > .glyphicon {
|
||||
top: 2px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
/*
|
||||
* Remove blue/orange outline
|
||||
* !important is needed here for some reason
|
||||
* despite the rule having top precedence.
|
||||
*/
|
||||
button.btn:focus {
|
||||
outline: none !important;
|
||||
}
|
||||
22
lib/scss/components/_caption.scss
Normal file
22
lib/scss/components/_caption.scss
Normal file
@ -0,0 +1,22 @@
|
||||
/*
|
||||
* 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.
|
||||
*/
|
||||
|
||||
.caption {
|
||||
font-weight: bold;
|
||||
font-size: 11px;
|
||||
margin-bottom: 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
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;
|
||||
}
|
||||
36
lib/scss/components/_tick.scss
Normal file
36
lib/scss/components/_tick.scss
Normal file
@ -0,0 +1,36 @@
|
||||
/*
|
||||
* 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.
|
||||
*/
|
||||
|
||||
.tick {
|
||||
@extend .glyphicon;
|
||||
|
||||
display: inline-block;
|
||||
border-radius: 50%;
|
||||
padding: 5px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.tick--success {
|
||||
@extend .glyphicon-ok;
|
||||
|
||||
background-color: rgb(95, 184, 53);
|
||||
}
|
||||
|
||||
.tick--error {
|
||||
@extend .glyphicon-remove;
|
||||
|
||||
background-color: #d9534f;
|
||||
}
|
||||
@ -23,60 +23,24 @@ $font-size-base: 13px;
|
||||
$cursor-disabled: initial;
|
||||
$color-disabled: rgb(120, 124, 127);
|
||||
$btn-disabled: rgb(49, 51, 57);
|
||||
$badge-disabled: rgb(92, 94, 92);
|
||||
$btn-padding: 10px;
|
||||
$btn-min-width: 170px;
|
||||
$link-color: $gray-light;
|
||||
$link-hover-decoration: none;
|
||||
|
||||
@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
|
||||
|
||||
@import "./modules/bootstrap";
|
||||
@import "./modules/space";
|
||||
@import "./components/badge";
|
||||
@import "./components/caption";
|
||||
@import "./components/button";
|
||||
@import "./components/tick";
|
||||
@import "./components/progress-button";
|
||||
|
||||
// Prevent white flash when running application
|
||||
html {
|
||||
background-color: $body-bg;
|
||||
}
|
||||
|
||||
hero-badge .badge {
|
||||
background-color: $body-bg;
|
||||
}
|
||||
|
||||
hero-badge[disabled] .badge {
|
||||
background-color: $badge-disabled;
|
||||
hero-icon[disabled] .caption {
|
||||
color: $color-disabled;
|
||||
}
|
||||
|
||||
hero-icon[disabled] hero-caption {
|
||||
color: $color-disabled;
|
||||
}
|
||||
|
||||
hero-button .btn {
|
||||
min-width: $btn-min-width;
|
||||
|
||||
&[disabled] {
|
||||
background-color: $btn-disabled;
|
||||
color: $color-disabled;
|
||||
pointer-events: none;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($btn-disabled, 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
@ -153,10 +117,6 @@ body {
|
||||
margin-top: 10px;
|
||||
margin-bottom: -40px;
|
||||
color: lighten($color-disabled, 5%);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.tiny {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
@ -174,25 +134,11 @@ body {
|
||||
max-width: $btn-min-width - 5px;
|
||||
}
|
||||
|
||||
// Fix slighly checkbox vertical alignment issue
|
||||
.checkbox input[type="checkbox"] {
|
||||
position: initial;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.checkbox input[type="checkbox"]:not(:checked) + * {
|
||||
color: $gray-light;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
height: 100%;
|
||||
margin: 20px 60px;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
@extend .text-right;
|
||||
padding: 5px 8px;
|
||||
|
||||
33
lib/scss/modules/_bootstrap.scss
Normal file
33
lib/scss/modules/_bootstrap.scss
Normal file
@ -0,0 +1,33 @@
|
||||
/*
|
||||
* 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.
|
||||
*/
|
||||
|
||||
// This file is meant to hold Bootstrap modifications
|
||||
// that don't qualify as separate UI components.
|
||||
|
||||
// Prevent white flash when running application
|
||||
html {
|
||||
background-color: $body-bg;
|
||||
}
|
||||
|
||||
// Fix slighly checkbox vertical alignment issue
|
||||
.checkbox input[type="checkbox"] {
|
||||
position: initial;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.checkbox input[type="checkbox"]:not(:checked) + * {
|
||||
color: $gray-light;
|
||||
}
|
||||
@ -27,6 +27,10 @@ $spacing-tiny: 5px;
|
||||
margin-bottom: $spacing-medium;
|
||||
}
|
||||
|
||||
.space-top-medium {
|
||||
margin-top: $spacing-medium;
|
||||
}
|
||||
|
||||
.space-vertical-large {
|
||||
margin-top: $spacing-large;
|
||||
margin-bottom: $spacing-large;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user