Eduard Kuzmenko
3 years ago
15 changed files with 116 additions and 93 deletions
@ -0,0 +1,36 @@
@@ -0,0 +1,36 @@
|
||||
@mixin hover($color: null, $property: null, $use-transition: false) { |
||||
@if $color { |
||||
@if $color == gray { |
||||
$color: var(--color-gray-hover); |
||||
} @else if $color == blue { |
||||
$color: var(--color-blue-hover); |
||||
} @else if $color == red { |
||||
$color: var(--color-red-hover); |
||||
} |
||||
} |
||||
|
||||
html.no-touch &:hover { |
||||
@if $property != null { |
||||
@if $use-transition { |
||||
transition: .2s #{$property}; |
||||
} |
||||
|
||||
#{$property}: $color; |
||||
} |
||||
|
||||
|
||||
@content; |
||||
} |
||||
} |
||||
|
||||
@mixin hover-effect($color: gray, $use-transition: false) { |
||||
@include hover($color, color, $use-transition) { |
||||
@content; |
||||
} |
||||
} |
||||
|
||||
@mixin hover-background-effect($color: gray, $use-transition: false) { |
||||
@include hover($color, background-color, $use-transition) { |
||||
@content; |
||||
} |
||||
} |
@ -0,0 +1,36 @@
@@ -0,0 +1,36 @@
|
||||
@mixin respond-to($media) { |
||||
@if $media == handhelds { |
||||
@media only screen and (max-width: $small-screen) { @content; } |
||||
//@media only screen and (orientation: landscape) and (max-device-width: 896px) { @content; } // iPhone 11 Pro Max |
||||
} @else if $media == small-screens { |
||||
@media only screen and (min-width: $small-screen + 1) { @content; } |
||||
} @else if $media == only-small-screens { |
||||
@media only screen and (min-width: $small-screen + 1) and (max-width: $medium-screen) { @content; } |
||||
} @else if $media == medium-screens { |
||||
@media only screen and (min-width: $medium-screen + 1) { @content; } |
||||
} @else if $media == only-medium-screens { |
||||
@media only screen and (min-width: $medium-screen + 1) and (max-width: $large-screen) { @content; } |
||||
} @else if $media == before-medium-screens { |
||||
@media only screen and (max-width: $medium-screen) { @content; } |
||||
} @else if $media == large-screens { |
||||
@media only screen and (min-width: $large-screen + 1) { @content; } |
||||
} @else if $media == not-handhelds { |
||||
@media only screen and (min-width: $small-screen + 1) { @content; } |
||||
} |
||||
|
||||
@else if $media == floating-left-sidebar { |
||||
@media only screen and (min-width: $small-screen + 1) and (max-width: $floating-left-sidebar) { @content; } |
||||
} @else if $media == until-floating-left-sidebar { |
||||
@media only screen and (max-width: $floating-left-sidebar) { @content; } |
||||
} @else if $media == no-floating-left-sidebar { |
||||
@media only screen and (min-width: $floating-left-sidebar + 1) { @content; } |
||||
} |
||||
|
||||
@else if $media == esg-top { // topbar + chat input + margin bottom + height of ESG |
||||
@media only screen and (min-height: 570px) and (min-width: $small-screen + 1) { @content; } |
||||
} |
||||
|
||||
@else if $media == esg-bottom { |
||||
@media only screen and (max-height: 569px) { @content; } |
||||
} |
||||
} |
Loading…
Reference in new issue