libs/elements/src/lib/themes/mixins.scss
@mixin input-cover() {
@include position(0, null, null, 0);
@include margin(0);
position: absolute;
width: 100%;
height: 100%;
border: 0;
background: transparent;
cursor: pointer;
appearance: none;
outline: none;
&::-moz-focus-inner {
border: 0;
}
}
@mixin text-inherit() {
font-family: inherit;
font-size: inherit;
font-style: inherit;
font-weight: inherit;
letter-spacing: inherit;
text-decoration: inherit;
text-indent: inherit;
text-overflow: inherit;
text-transform: inherit;
text-align: inherit;
white-space: inherit;
color: inherit;
}
@mixin button-state() {
@include position(0, 0, 0, 0);
position: absolute;
content: '';
opacity: 0;
}
// Font smoothing
// --------------------------------------------------
@mixin font-smoothing() {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
// Get the key from a map based on the index
@function index-to-key($map, $index) {
$keys: map-keys($map);
@return nth($keys, $index);
}
// Breakpoint Mixins
// ---------------------------------------------------------------------------------
// Breakpoint viewport sizes and media queries.
//
// Breakpoints are defined as a map of (name: minimum width), order from small to large:
//
// (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)
//
// The map defined in the `$screen-breakpoints` global variable is used as the `$breakpoints` argument by default.
// ---------------------------------------------------------------------------------
// Minimum breakpoint width. Null for the smallest (first) breakpoint.
//
// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
// 576px
@function breakpoint-min($name, $breakpoints: $screen-breakpoints) {
$min: map-get($breakpoints, $name);
@return if($name != index-to-key($breakpoints, 1), $min, null);
}
// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.
// Useful for making responsive utilities.
//
// >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
// "" (Returns a blank string)
// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
// "-sm"
@function breakpoint-infix($name, $breakpoints: $screen-breakpoints) {
@return if(breakpoint-min($name, $breakpoints) == null, '', '-#{$name}');
}
// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
// Makes the @content apply to the given breakpoint and wider.
@mixin media-breakpoint-up($name, $breakpoints: $screen-breakpoints) {
$min: breakpoint-min($name, $breakpoints);
@if $min {
@media (min-width: $min) {
@content;
}
} @else {
@content;
}
}
// Name of the next breakpoint, or null for the last breakpoint.
//
// >> breakpoint-next(sm)
// md
// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
// md
// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
// md
@function breakpoint-next($name, $breakpoints: $screen-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
$n: index($breakpoint-names, $name);
@return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
}
// Maximum breakpoint width. Null for the smallest (first) breakpoint.
// The maximum value is calculated as the minimum of the current one.
//
// >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
// 576px
@function breakpoint-max($name, $breakpoints: $screen-breakpoints) {
$min: breakpoint-min($name, $breakpoints);
@return if($min, breakpoint-min($name, $breakpoints), null);
}
// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
// Makes the @content apply to the given breakpoint and narrower.
@mixin media-breakpoint-down($name, $breakpoints: $screen-breakpoints) {
$max: breakpoint-max($name, $breakpoints);
@if $max {
@media (max-width: $max) {
@content;
}
} @else {
@content;
}
}
// Text Direction - ltr / rtl
//
// CSS defaults to use the ltr css, and adds [dir=rtl] selectors
// to override ltr defaults.
// ----------------------------------------------------------
@mixin multi-dir() {
@content;
// $root: #{&};
// @at-root [dir] {
// #{$root} {
// @content;
// }
// }
}
@mixin rtl() {
$root: #{&};
@at-root #{add-root-selector($root, "[dir=rtl]")} {
@content;
}
}
@mixin ltr() {
@content;
}
// SVG Background Image Mixin
// @param {string} $svg
// ----------------------------------------------------------
@mixin svg-background-image($svg, $flip-rtl: false) {
$url: url-encode($svg);
$viewBox: str-split(str-extract($svg, "viewBox='", "'"), ' ');
@if $flip-rtl != true or $viewBox == null {
@include multi-dir() {
background-image: url('data:image/svg+xml;charset=utf-8,#{$url}');
}
} @else {
$transform: "transform='translate(#{nth($viewBox, 3)}, 0) scale(-1, 1)'";
$flipped-url: $svg;
$flipped-url: str-replace($flipped-url, '<path', '<path #{$transform}');
$flipped-url: str-replace($flipped-url, '<line', '<line #{$transform}');
$flipped-url: str-replace($flipped-url, '<polygon', '<polygon #{$transform}');
$flipped-url: url-encode($flipped-url);
@include ltr() {
background-image: url('data:image/svg+xml;charset=utf-8,#{$url}');
}
@include rtl() {
background-image: url('data:image/svg+xml;charset=utf-8,#{$flipped-url}');
}
}
}
// Add property horizontal
// @param {string} $start
// @param {string} $end
// ----------------------------------------------------------
@mixin property-horizontal($prop, $start, $end: $start) {
@if $start == 0 and $end == 0 {
#{$prop}-left: $start;
#{$prop}-right: $end;
} @else {
#{$prop}-left: $start;
#{$prop}-right: $end;
@at-root {
@supports ((margin-inline-start: 0) or (-webkit-margin-start: 0)) {
& {
@if $start != null {
#{$prop}-left: unset;
}
@if $end != null {
#{$prop}-right: unset;
}
-webkit-#{$prop}-start: $start;
#{$prop}-inline-start: $start;
-webkit-#{$prop}-end: $end;
#{$prop}-inline-end: $end;
}
}
}
}
}
// Add property for all directions
// @param {string} $prop
// @param {string} $top
// @param {string} $end
// @param {string} $bottom
// @param {string} $start
// @param {boolean} $content include content or use default
// ----------------------------------------------------------
@mixin property($prop, $top, $end: $top, $bottom: $top, $start: $end) {
@include property-horizontal($prop, $start, $end);
#{$prop}-top: $top;
#{$prop}-bottom: $bottom;
}
// Add padding horizontal
// @param {string} $start
// @param {string} $end
// ----------------------------------------------------------
@mixin padding-horizontal($start, $end: $start) {
@include property-horizontal(padding, $start, $end);
}
// Add padding for all directions
// @param {string} $top
// @param {string} $end
// @param {string} $bottom
// @param {string} $start
// ----------------------------------------------------------
@mixin padding($top, $end: $top, $bottom: $top, $start: $end) {
@include property(padding, $top, $end, $bottom, $start);
}
// Add margin horizontal
// @param {string} $start
// @param {string} $end
// ----------------------------------------------------------
@mixin margin-horizontal($start, $end: $start) {
@include property-horizontal(margin, $start, $end);
}
// Add margin for all directions
// @param {string} $top
// @param {string} $end
// @param {string} $bottom
// @param {string} $start
// ----------------------------------------------------------
@mixin margin($top, $end: $top, $bottom: $top, $start: $end) {
@include property(margin, $top, $end, $bottom, $start);
}
// Add position horizontal
// @param {string} $start - amount to position start
// @param {string} $end - amount to left: 0; end
// ----------------------------------------------------------
@mixin position-horizontal($start: null, $end: null) {
@if $start == $end {
@include multi-dir() {
left: $start;
right: $end;
}
} @else {
@include ltr() {
left: $start;
right: $end;
}
@include rtl() {
left: $end;
right: $start;
}
}
}
// Add position for all directions
// @param {string} $top
// @param {string} $end
// @param {string} $bottom
// @param {string} $start
// ----------------------------------------------------------
@mixin position($top: null, $end: null, $bottom: null, $start: null) {
@include position-horizontal($start, $end);
top: $top;
bottom: $bottom;
}
// Add border radius for all directions
// @param {string} $top-start
// @param {string} $top-end
// @param {string} $bottom-end
// @param {string} $bottom-start
// ----------------------------------------------------------
@mixin border-radius($top-start, $top-end: $top-start, $bottom-end: $top-start, $bottom-start: $top-end) {
@if $top-start == $top-end and $top-start == $bottom-end and $top-start == $bottom-start {
@include multi-dir() {
border-radius: $top-start;
}
} @else {
@include ltr() {
border-top-left-radius: $top-start;
border-top-right-radius: $top-end;
border-bottom-right-radius: $bottom-end;
border-bottom-left-radius: $bottom-start;
}
@include rtl() {
border-top-left-radius: $top-end;
border-top-right-radius: $top-start;
border-bottom-right-radius: $bottom-start;
border-bottom-left-radius: $bottom-end;
}
}
}
// Add direction for all directions
// @param {string} $dir - Direction on LTR
@mixin direction($dir) {
$other-dir: null;
@if $dir == ltr {
$other-dir: rtl;
} @else {
$other-dir: ltr;
}
@include ltr() {
direction: $dir;
}
@include rtl() {
direction: $other-dir;
}
}
// Add float for all directions
// @param {string} $side
// @param {string} $decorator - !important
@mixin float($side, $decorator: null) {
@if $side == start {
@include ltr() {
float: left $decorator;
}
@include rtl() {
float: right $decorator;
}
} @else if $side == end {
@include ltr() {
float: right $decorator;
}
@include rtl() {
float: left $decorator;
}
} @else {
@include multi-dir() {
float: $side $decorator;
}
}
}
@mixin background-position($horizontal, $horizontal-amount: null, $vertical: null, $vertical-amount: null) {
@if $horizontal == start or $horizontal == end {
$horizontal-ltr: null;
$horizontal-rtl: null;
@if $horizontal == start {
$horizontal-ltr: left;
$horizontal-rtl: right;
} @else {
$horizontal-ltr: right;
$horizontal-rtl: left;
}
@include ltr() {
background-position: $horizontal-ltr $horizontal-amount $vertical $vertical-amount;
}
@include rtl() {
background-position: $horizontal-rtl $horizontal-amount $vertical $vertical-amount;
}
} @else {
@include multi-dir() {
background-position: $horizontal $horizontal-amount $vertical $vertical-amount;
}
}
}
@mixin transform-origin($x-axis, $y-axis: null) {
@if $x-axis == start {
@include ltr() {
transform-origin: left $y-axis;
}
@include rtl() {
transform-origin: right $y-axis;
}
} @else if $x-axis == end {
@include ltr() {
transform-origin: right $y-axis;
}
@include rtl() {
transform-origin: left $y-axis;
}
} @else if $x-axis == left or $x-axis == right {
@include multi-dir() {
transform-origin: $x-axis $y-axis;
}
} @else {
@include ltr() {
transform-origin: $x-axis $y-axis;
}
@include rtl() {
transform-origin: calc(100% - #{$x-axis}) $y-axis;
}
}
}
// Add transform for all directions
// @param {string} $transforms - comma separated list of transforms
@mixin transform($transforms...) {
$extra: null;
$x: null;
$ltr-translate: null;
$rtl-translate: null;
@each $transform in $transforms {
@if (str-index($transform, translate3d)) {
$transform: str-replace($transform, 'translate3d(');
$transform: str-replace($transform, ')');
$coordinates: str-split($transform, ',');
$x: nth($coordinates, 1);
$y: nth($coordinates, 2);
$z: nth($coordinates, 3);
$ltr-translate: translate3d($x, $y, $z);
$rtl-translate: translate3d(calc(-1 * #{$x}), $y, $z);
} @else {
@if $extra == null {
$extra: $transform;
} @else {
$extra: $extra $transform;
}
}
}
@if $x == '0' or $x == null {
@include multi-dir() {
transform: $ltr-translate $extra;
}
} @else {
@include ltr() {
transform: $ltr-translate $extra;
}
@include rtl() {
transform: $rtl-translate $extra;
}
}
}