35 lines
940 B
SCSS
35 lines
940 B
SCSS
|
// Control button
|
||
|
|
// ----------------------------------------------
|
||
|
|
|
||
|
|
.CDB-Widget-controlButton {
|
||
|
|
width: $baseSize * 3;
|
||
|
|
min-width: $baseSize * 3; // to avoid the element to be "squashed" due to limited space in container
|
||
|
|
height: $baseSize * 3;
|
||
|
|
margin-top: $baseSize * 2;
|
||
|
|
border: 1px solid transparent; // border used for :hover, color set in theme
|
||
|
|
border-radius: 4px;
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// The flex layout requires a separate element, because a <button> tag don't support flex in all browsers
|
||
|
|
// see https://github.com/philipwalton/flexbugs#9-some-html-elements-cant-be-flex-containers for details
|
||
|
|
.CDB-Widget-controlButtonContent {
|
||
|
|
@include display-flex();
|
||
|
|
@include justify-content(center);
|
||
|
|
@include align-items(center);
|
||
|
|
}
|
||
|
|
|
||
|
|
.CDB-Widget-controlButtonIcon {
|
||
|
|
display: block;
|
||
|
|
width: $baseSize;
|
||
|
|
height: $baseSize;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 960px) {
|
||
|
|
.CDB-Widget-controlButton {
|
||
|
|
margin-top: 0;
|
||
|
|
}
|
||
|
|
}
|