Files
cms_thermo_active/Step/wwwroot/assets/styles/base/buttons.less
T
Paolo Possanzini 36ccd5956f user info
2018-01-16 14:32:15 +01:00

81 lines
2.1 KiB
Plaintext

// out: false, sourceMap: false, main: ../style.less
@import "colors.less";
@button-height: 48px;
@button-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
@button-success-color-from: #1756ad;
@button-success-color-to: #002680;
@button-machine-color-from : #657178;
@button-machine-color-to : #404040;
button:focus {
outline: none;
}
button.btn[disabled]{
border-radius: 2px;
border-radius: 2px;
background-color: #dddddd;
background-image: none;
box-shadow: none;
color: @color-warm-grey;
}
button.btn {
height: @button-height;
border-radius: 2px;
margin: 0 8px;
text-align: center;
font-size: 18px;
font-weight: bold;
box-shadow: @button-shadow;
padding: 0 20px;
border: none;
background-image: linear-gradient(to bottom, @color-white2, @color-silver);
color: @color-darkish-blue;
&:active {
background-image: linear-gradient(to bottom, @color-silver, @color-white2);
}
}
button.btn.btn-success {
background-image: linear-gradient(to bottom, @button-success-color-from, @button-success-color-to);
color: white;
&:active {
background-image: linear-gradient(to bottom, @button-success-color-to, @button-success-color-from);
box-shadow:inset @button-shadow;
}
&:hover {
background-image: linear-gradient(to bottom, @button-success-color-from, @button-success-color-from);
}
}
button.under {
width: 208px;
height: 45px;
object-fit: contain;
border-radius: 100px;
background-image: linear-gradient(to bottom, @button-machine-color-from, @button-machine-color-to);
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
border: none;
display: flex;
justify-content: center;
align-items: center;
img {
max-width: 178px;
max-height: 45px;
}
&:active, &.pressed {
background-image: linear-gradient(to bottom, @button-machine-color-to, @button-machine-color-from);
box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.4);
}
}
button.square {
// width: @button-height;
// height: @button-height;
border-radius: 2px !important; // background-color: #4b4b4b;
}