bulma/sass/elements/box.scss

49 lines
1.2 KiB
SCSS
Raw Normal View History

2022-11-23 17:44:02 +00:00
@import "../utilities/mixins";
2022-12-06 10:46:03 +00:00
$box-color: getVar("text") !default;
$box-background-color: getVar("scheme-main") !default;
$box-radius: getVar("radius-large") !default;
$box-shadow: getVar("shadow") !default;
2022-11-23 17:44:02 +00:00
$box-padding: 1.25rem !default;
2022-12-14 17:15:51 +00:00
$box-link-hover-shadow: 0 0.5em 1em -0.125em rgba(getVar("shadow-color-rgb"), 0.1),
2022-12-06 10:46:03 +00:00
0 0 0 1px getVar("link") !default;
2022-12-14 17:15:51 +00:00
$box-link-active-shadow: inset 0 1px 2px rgba(getVar("shadow-color-rgb"), 0.2),
2022-12-06 10:46:03 +00:00
0 0 0 1px getVar("link") !default;
:root {
@include register-vars(
(
box-color: #{$box-color},
box-background-color: #{$box-background-color},
box-radius: #{$box-radius},
box-shadow: #{$box-shadow},
box-padding: #{$box-padding},
box-link-hover-shadow: #{$box-link-hover-shadow},
box-link-active-shadow: #{$box-link-active-shadow},
)
);
}
2022-11-23 17:44:02 +00:00
2022-11-23 22:53:56 +00:00
.#{$class-prefix}box {
2022-11-23 17:44:02 +00:00
@extend %block;
2022-12-06 10:46:03 +00:00
background-color: getVar("box-background-color");
border-radius: getVar("box-radius");
box-shadow: getVar("box-shadow");
color: getVar("box-color");
2022-11-23 17:44:02 +00:00
display: block;
2022-12-06 10:46:03 +00:00
padding: getVar("box-padding");
2022-11-23 17:44:02 +00:00
}
2022-11-23 22:53:56 +00:00
a.#{$class-prefix}box {
2022-11-23 17:44:02 +00:00
&:hover,
&:focus {
2022-12-06 10:46:03 +00:00
box-shadow: getVar("box-link-hover-shadow");
2022-11-23 17:44:02 +00:00
}
&:active {
2022-12-06 10:46:03 +00:00
box-shadow: getVar("box-link-active-shadow");
2022-11-23 17:44:02 +00:00
}
}