150 lines
3.2 KiB
SCSS
150 lines
3.2 KiB
SCSS
.btn{
|
|
border: none;
|
|
border-radius: $border-radius-base;
|
|
position: relative;
|
|
padding: 12px 30px;
|
|
margin: 10px 1px;
|
|
|
|
font-size: $mdb-btn-font-size-base;
|
|
font-weight: 400;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0;
|
|
|
|
will-change: box-shadow, transform;
|
|
transition: box-shadow 0.2s $mdb-animation-curve-fast-out-linear-in,
|
|
background-color 0.2s $mdb-animation-curve-default;
|
|
|
|
&::-moz-focus-inner {
|
|
border: 0;
|
|
}
|
|
|
|
&,
|
|
&.btn-default{
|
|
@include btn-styles($gray-light);
|
|
}
|
|
|
|
&.btn-primary{
|
|
@include btn-styles($brand-primary);
|
|
}
|
|
&.btn-info{
|
|
@include btn-styles($brand-info);
|
|
}
|
|
&.btn-success{
|
|
@include btn-styles($brand-success);
|
|
}
|
|
&.btn-warning{
|
|
@include btn-styles($brand-warning);
|
|
}
|
|
&.btn-danger{
|
|
@include btn-styles($brand-danger);
|
|
}
|
|
|
|
|
|
&:focus,
|
|
&:active,
|
|
&:active:focus{
|
|
outline: 0;
|
|
}
|
|
|
|
&.btn-round{
|
|
border-radius: $border-radius-extreme;
|
|
}
|
|
|
|
&:not(.btn-just-icon):not(.btn-fab){
|
|
.fa{
|
|
font-size: 18px;
|
|
margin-top: -2px;
|
|
position: relative;
|
|
top: 2px;
|
|
}
|
|
}
|
|
|
|
|
|
&.btn-fab {
|
|
// see above for color variations
|
|
border-radius: 50%;
|
|
font-size: $mdb-btn-fab-font-size;
|
|
height: $mdb-btn-fab-size;
|
|
margin: auto;
|
|
min-width: $mdb-btn-fab-size;
|
|
width: $mdb-btn-fab-size;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
position: relative;
|
|
line-height: normal;
|
|
|
|
.ripple-container {
|
|
border-radius: 50%;
|
|
}
|
|
|
|
&.btn-fab-mini,
|
|
.btn-group-sm & {
|
|
height: $mdb-btn-fab-size-mini;
|
|
min-width: $mdb-btn-fab-size-mini;
|
|
width: $mdb-btn-fab-size-mini;
|
|
|
|
&.material-icons {
|
|
top: ($mdb-btn-icon-size-mini - $mdb-btn-fab-font-size) / 2;
|
|
left: ($mdb-btn-icon-size-mini - $mdb-btn-fab-font-size) / 2;
|
|
}
|
|
|
|
.material-icons{
|
|
font-size: $mdb-btn-icon-size-mini;
|
|
}
|
|
}
|
|
|
|
i.material-icons {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-($mdb-btn-fab-font-size / 2), -($mdb-btn-fab-font-size / 2));
|
|
line-height: $mdb-btn-fab-font-size;
|
|
width: $mdb-btn-fab-font-size;
|
|
font-size: $mdb-btn-fab-font-size;
|
|
}
|
|
}
|
|
|
|
// Size variations
|
|
&.btn-lg,
|
|
.btn-group-lg & {
|
|
font-size: $mdb-btn-font-size-lg;
|
|
padding: 18px 36px;
|
|
}
|
|
&.btn-sm,
|
|
.btn-group-sm & {
|
|
padding: 5px 20px;
|
|
font-size: $mdb-btn-font-size-sm;
|
|
}
|
|
&.btn-xs,
|
|
.btn-group-xs & {
|
|
padding: 4px 15px;
|
|
font-size: $mdb-btn-font-size-xs;
|
|
}
|
|
|
|
&.btn-just-icon{
|
|
font-size: 18px;
|
|
padding: 10px 10px;
|
|
line-height: 1em;
|
|
|
|
i{
|
|
width: 20px;
|
|
}
|
|
&.btn-lg{
|
|
font-size: 22px;
|
|
padding: 13px 18px;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.btn{
|
|
// Align icons inside buttons with text
|
|
.material-icons{
|
|
vertical-align: middle;
|
|
font-size: $mdb-btn-icon-size-mini;
|
|
top: -1px;
|
|
position: relative;
|
|
}
|
|
|
|
}
|