1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192 |
- @mixin icon($url, $width, $height: $width) {
- width: $width;
- height: $height;
- background: url(#{$url}) no-repeat;
- background-size: 100% 100%;
- }
- @mixin thin-border($position, $color: #d9d9d9, $size: 100%) {
- position: relative;
- @if $position == top or $position == bottom {
- &::before {
- content: '';
- position: absolute;
- left: 0;
- right: 0;
- #{$position}: 0;
- height: 0;
- border-bottom: 1PX solid $color;
- transform: scaleY(0.5);
- z-index: 1;
- }
- } @else {
- &::before {
- content: '';
- position: absolute;
- top: 50%;
- #{$position}: 0;
- width: 0;
- height: $size;
- border-left: 1PX solid $color;
- transform: translateY(-50%) scaleX(0.5);
- z-index: 1;
- }
- }
- }
- @mixin ellipsis($line: 1) {
- @if $line == 1 {
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
- } @else {
- overflow: hidden;
- text-overflow: ellipsis;
- display: -webkit-box;
- -webkit-line-clamp: $line;
- -webkit-box-orient: vertical;
- }
- }
- $media-breakpoint-map: (
- sm: $breakpoint-sm,
- md: $breakpoint-md,
- lg: $breakpoint-lg,
- xl: $breakpoint-xl
- );
- @mixin media-breakpoint-up($size) {
- @media (min-width: map-get($media-breakpoint-map, $size)) {
- @content;
- }
- }
- @mixin media-breakpoint-down($size) {
- @media (max-width: map-get($media-breakpoint-map, $size) - 0.02) {
- @content;
- }
- }
- @mixin media-breakpoint-only($size) {
- @if $size == xs {
- @media (max-width: $breakpint-sm - 0.02) {
- @content;
- }
- } @else if $size == sm {
- @media (min-width: $breakpoint-sm) and (max-width: $breakpoint-md - 0.02) {
- @content;
- }
- } @else if $size == md {
- @media (min-width: $breakpoint-md) and (max-width: $breakpoint-lg - 0.02) {
- @content;
- }
- } @else if $size == lg {
- @media (min-width: $breakpoint-lg) and (max-width: $breakpoint-xl - 0.02) {
- @content;
- }
- } @else if $size == xl {
- @media (min-width: $breakpoint-xl) {
- @content;
- }
- }
- }
|