webpack-bootstrap-ui-kit/src/scss/_mixings.scss

228 lines
3.7 KiB
SCSS
Raw Normal View History

2021-08-09 21:15:55 +02:00
@use "sass:math";
2021-08-18 20:38:12 +02:00
@import "~bootstrap/scss/mixins";
2019-12-29 06:04:00 +01:00
@mixin hover-disabled() {
2021-08-18 20:38:12 +02:00
&:not(.disabled) {
&.active,
&:active,
&:hover,
&:focus {
@content;
}
2021-08-18 20:38:12 +02:00
}
}
2021-08-18 20:38:12 +02:00
@mixin pseudo($display: block, $pos: absolute, $content: "") {
content: $content;
display: $display;
position: $pos;
}
@mixin responsive-ratio($x, $y, $pseudo: false) {
2021-08-18 20:38:12 +02:00
$padding: unquote(math.div($y, $x) * 100 + "%");
2021-08-18 20:38:12 +02:00
@if $pseudo {
&:before {
@include pseudo($pos: relative);
padding-top: $padding;
width: 100%;
}
2021-08-18 20:38:12 +02:00
} @else {
padding-top: $padding;
}
}
@mixin input-placeholder {
2021-08-18 20:38:12 +02:00
&.placeholder {
@content;
}
2021-08-18 20:38:12 +02:00
&:-moz-placeholder {
@content;
}
2021-08-18 20:38:12 +02:00
&::-moz-placeholder {
@content;
}
2021-08-18 20:38:12 +02:00
&:-ms-input-placeholder {
@content;
}
2021-08-18 20:38:12 +02:00
&::-webkit-input-placeholder {
@content;
}
}
@mixin truncate($truncation-boundary) {
2021-08-18 20:38:12 +02:00
max-width: $truncation-boundary;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@mixin fix-bold() {
2021-08-18 20:38:12 +02:00
display: inline-flex;
flex-direction: column;
&:before {
content: attr(data-text);
content: attr(data-text) / "";
font-weight: bold;
height: 0;
overflow: hidden;
pointer-events: none;
user-select: none;
visibility: hidden;
}
}
@mixin dropdowns-dark() {
2021-08-18 20:38:12 +02:00
.navbar-dark {
.nav-link {
@include hover-focus {
background: $navbar-dark-hover-background;
}
}
2021-08-18 20:38:12 +02:00
.active > .nav-link,
.nav-link.active {
background: $navbar-dark-active-background;
}
2021-08-18 20:38:12 +02:00
.nav-link.show,
.navbar-nav .show > .nav-link {
background: $navbar-dark-show-background;
color: $navbar-dark-show-color;
}
2021-08-18 20:38:12 +02:00
}
2021-08-18 20:38:12 +02:00
.dropdown-menu.bg-dark {
border-color: $dark;
2021-08-18 20:38:12 +02:00
.nav-link {
color: $navbar-dark-color;
2021-08-18 20:38:12 +02:00
@include hover-focus {
color: $navbar-dark-hover-color;
}
2021-08-18 20:38:12 +02:00
&.disabled {
color: $navbar-dark-disabled-color;
cursor: default;
}
}
2021-08-18 20:38:12 +02:00
.show > .nav-link,
.active > .nav-link,
.nav-link.show,
.nav-link.active {
color: $navbar-dark-active-color;
}
2021-08-18 20:38:12 +02:00
.dropdown-item {
@include hover-focus {
background: $navbar-dark-hover-background;
color: $navbar-dark-hover-color;
}
2021-08-18 20:38:12 +02:00
&.active,
&:active {
background: $navbar-dark-active-background;
}
2021-08-18 20:38:12 +02:00
.nav-link {
background: none;
}
}
2021-08-18 20:38:12 +02:00
}
}
@mixin dropdown-hovers() {
2021-08-18 20:38:12 +02:00
.dropdown.show {
.dropdown {
&:hover,
&.active,
&:focus {
2022-02-17 05:54:57 +01:00
> .dropdown-menu {
2021-08-18 20:38:12 +02:00
display: block;
}
}
}
2021-08-18 20:38:12 +02:00
}
2021-08-18 20:38:12 +02:00
@media only screen and (min-width: map-get($grid-breakpoints, "md")) {
.dropdown-hover ul li {
position: relative;
}
2021-08-18 20:38:12 +02:00
.dropdown-hover ul li {
&:hover,
&.active,
&:focus {
> .dropdown-toggle::after {
transform: rotate(-90deg);
}
2021-08-18 20:38:12 +02:00
> ul {
display: block;
}
2021-08-18 20:38:12 +02:00
}
}
2021-08-18 20:38:12 +02:00
.dropdown-hover ul ul {
display: none;
left: 0;
min-width: 250px;
position: absolute;
top: 100%;
}
2021-08-18 20:38:12 +02:00
.dropdown-hover ul ul li {
position: relative;
}
2021-08-18 20:38:12 +02:00
.dropdown-hover ul ul li {
&:hover,
&.active,
&:focus {
> ul {
display: block;
}
2021-08-18 20:38:12 +02:00
}
}
2021-08-18 20:38:12 +02:00
.dropdown-hover ul ul ul {
display: none;
left: 100%;
min-width: 250px;
position: absolute;
top: 0;
}
2021-08-18 20:38:12 +02:00
.dropdown-hover ul ul ul li {
position: relative;
}
2021-08-18 20:38:12 +02:00
.dropdown-hover ul ul ul li {
&:hover,
&.active,
&:focus {
ul {
display: block;
}
2021-08-18 20:38:12 +02:00
}
}
2021-08-18 20:38:12 +02:00
.dropdown-hover ul ul ul ul {
display: none;
left: -100%;
min-width: 250px;
position: absolute;
top: 0;
z-index: 1;
}
2021-08-18 20:38:12 +02:00
}
}