etcher/lib/gui/app/scss/components/_button.scss
Lorenzo Alberto Maria Ambrosi 17f83135c5 Rework drive-selector with react + rendition
Change-type: patch
Changelog-entry: Rework drive-selector with react + rendition
Signed-off-by: Lorenzo Alberto Maria Ambrosi <lorenzoa@balena.io>
2019-06-10 11:43:47 +02:00

99 lines
2.2 KiB
SCSS

/*
* 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 {
@extend .btn;
padding: 10px;
padding-top: 11px;
border-radius: 24px;
border: 0;
letter-spacing: .5px;
outline: none;
position: relative;
> .glyphicon {
top: 2px;
margin-right: 2px;
}
&.button-primary{
width: 200px;
height: 48px;
}
&[disabled] {
@extend .button-no-hover;
background-color: $palette-theme-dark-disabled-background;
color: $palette-theme-dark-disabled-foreground;
opacity: 1;
}
}
.button-link {
@extend .btn-link;
}
.button-block {
display: block;
width: 100%;
}
.button-no-hover {
pointer-events: none;
}
// Create map from Bootstrap `.btn` type styles
// since its not possible to perform variable
// interpolation (e.g: `$btn-${type}-bg`).
// See https://github.com/sass/sass/issues/132
$button-types-styles: (
default: (
bg: $palette-theme-default-background,
color: $palette-theme-default-foreground
),
primary: (
bg: $palette-theme-primary-background,
color: $palette-theme-primary-foreground
),
danger: (
bg: $palette-theme-danger-background,
color: $palette-theme-danger-foreground
),
warning: (
bg: $palette-theme-warning-background,
color: $palette-theme-danger-foreground
)
);
@each $style in map-keys($button-types-styles) {
$button-styles: map-get($button-types-styles, $style);
.button-#{$style} {
background-color: map-get($button-styles, "bg");
color: map-get($button-styles, "color");
}
.button-#{$style}:focus,
.button-#{$style}:hover {
background-color: darken(map-get($button-styles, "bg"), 10%);
color: map-get($button-styles, "color");
}
}