
| Current Path : /var/www/html/c12park/web/themes/contrib/bootstrap/scss/components/ |
Linux ift1.ift-informatik.de 5.4.0-216-generic #236-Ubuntu SMP Fri Apr 11 19:53:21 UTC 2025 x86_64 |
| Current File : /var/www/html/c12park/web/themes/contrib/bootstrap/scss/components/mixins.scss |
/* MIXINS */
//
// Alternate buttons
//
@each $color,
$value in $theme-colors {
.btn-#{$color} a {
@include button-variant($value, $value);
}
}
@each $color,
$value in $theme-colors {
.btn-outline-#{$color} a {
@include button-outline-variant($value);
}
}
// SVG
@mixin svg-icon-background($name, $color, $hover-color:null, $position:null, $size:null) {
background-image: svg-load('#{$name}.svg', fill='#{$color}');
background-position: $position;
background-size: $size;
background-repeat: no-repeat;
&:hover {
background-image: svg-load('#{$name}.svg', fill='#{$hover-color}');
}
}
@mixin svg-inline($name, $position, $color, $hover-color, $size, $margin) {
&::#{$position} {
content: '';
width: $size;
height: $size;
display: inline-block;
background-image: svg-load('#{$name}.svg', fill='#{$color}');
background-position: 0 center;
background-size: 100%;
background-repeat: no-repeat;
vertical-align: middle;
&:hover {
background-image: svg-load('#{$name}.svg', fill='#{$hover-color}');
}
@if $position == after {
margin-left: $margin;
} @else {
margin-right: $margin;
}
}
}
@mixin svg-icon-replace($name, $color, $hover-color, $size:null) {
background-image: svg-load('#{$name}.svg', fill='#{$color}');
background-repeat: no-repeat;
overflow: hidden;
text-indent: -9999px;
display: block;
width: $size;
height: $size;
&:hover {
background-image: svg-load('#{$name}.svg', fill='#{$hover-color}');
}
}
// Box shadow
@mixin box-shadow( $h: 10px , $v: 10px , $b: 10px , $s: 0px , $c: rgba(0,0,0,0.75) ) {
-webkit-box-shadow: $h $v $b $s $c;
-moz-box-shadow: $h $v $b $s $c;
box-shadow: $h $v $b $s $c;
}
// Gradient
@mixin gradient($start-color, $end-color, $orientation) {
background: $start-color;
@if $orientation == vertical {
// vertical
background: -moz-linear-gradient(top, $start-color 0%, $end-color 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$start-color), color-stop(100%,$end-color));
background: -webkit-linear-gradient(top, $start-color 0%,$end-color 100%);
background: -o-linear-gradient(top, $start-color 0%,$end-color 100%);
background: -ms-linear-gradient(top, $start-color 0%,$end-color 100%);
background: linear-gradient(to bottom, $start-color 0%,$end-color 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start-color', endColorstr='$end-color',GradientType=0 );
}
@else if $orientation == horizontal {
// horizontal
background: -moz-linear-gradient(left, $start-color 0%, $end-color 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,$start-color), color-stop(100%,$end-color));
background: -webkit-linear-gradient(left, $start-color 0%,$end-color 100%);
background: -o-linear-gradient(left, $start-color 0%,$end-color 100%);
background: -ms-linear-gradient(left, $start-color 0%,$end-color 100%);
background: linear-gradient(to right, $start-color 0%,$end-color 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start-color', endColorstr='$end-color',GradientType=1 );
}
@else {
// radial
background: -moz-radial-gradient(center, ellipse cover, $start-color 0%, $end-color 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,$start-color), color-stop(100%,$end-color));
background: -webkit-radial-gradient(center, ellipse cover, $start-color 0%,$end-color 100%);
background: -o-radial-gradient(center, ellipse cover, $start-color 0%,$end-color 100%);
background: -ms-radial-gradient(center, ellipse cover, $start-color 0%,$end-color 100%);
background: radial-gradient(ellipse at center, $start-color 0%,$end-color 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start-color', endColorstr='$end-color',GradientType=1 );
}
}
// Fade
@mixin fade($type) {
@if $type== "hide" {
visibility: hidden;
opacity: 0;
transition: visibility 1s, opacity 1s;
} @else if $type== "show" {
visibility: visible;
opacity: 1;
transition: visibility 1s, opacity 1s;
}
}