v1/web/modules/contrib/bootstrap_layout_builder/scss/_mixins.scss

75 lines
1.3 KiB
SCSS

// Mixins
@mixin sr-only() {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
@mixin smooth-all-transition() {
transition: all .3s ease-in-out;
}
// Rounded input style
@mixin blb_box_inputs($width: 100%) {
position: relative;
flex: $width;
width: $width;
margin: 0;
padding: 0;
input {
@include sr-only;
+ label {
@include smooth-all-transition;
border: 2px solid $panel_text_color;
padding: 10px;
height: 50px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
cursor: pointer;
&:hover {
background-color: rgba($panel_text_color, .1);
}
}
// Active state.
&:checked + label {
color: $panel_bg_color;
background-color: $panel_text_color;
}
}
// Custom fix for Bootstrap 3 Drupal theme.
label {
border: 2px solid $panel_text_color;
height: 50px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
cursor: pointer;
+ input {
opacity: 0;
position: absolute;
}
// Active state.
&.active {
color: $panel_bg_color;
background-color: $panel_text_color;
}
}
}