gnezim
4c2b5c4bd1
Ports variables, colors, fonts, layout, mixins, shadows, screen breakpoints, reset, icons, buttons, common, and overrides. Replaces Angular-specific constructs (::ng-deep, :host, element selectors) with React-compatible equivalents. Uses Google Fonts CDN for Roboto.
50 lines
1.0 KiB
SCSS
50 lines
1.0 KiB
SCSS
@use './variables' as variables;
|
|
|
|
@mixin mobile() {
|
|
@media (max-width: variables.$media-breakpoint-mobile) {
|
|
@content();
|
|
}
|
|
}
|
|
|
|
@mixin desktop() {
|
|
@media (min-width: variables.$media-breakpoint-desktop-min) {
|
|
@content();
|
|
}
|
|
}
|
|
|
|
@mixin gt-mobile() {
|
|
@media (min-width: variables.$media-breakpoint-small-tablet-min) {
|
|
@content();
|
|
}
|
|
}
|
|
|
|
@mixin smTablet() {
|
|
@media (max-width: variables.$media-breakpoint-tablet) {
|
|
@content();
|
|
}
|
|
}
|
|
|
|
@mixin tablet() {
|
|
@media (min-width: variables.$media-breakpoint-tablet-min) and (max-width: variables.$media-breakpoint-tablet) {
|
|
@content();
|
|
}
|
|
}
|
|
|
|
@mixin tablet-small() {
|
|
@media (min-width: variables.$media-breakpoint-small-tablet-min) and (max-width: variables.$media-breakpoint-small-tablet) {
|
|
@content();
|
|
}
|
|
}
|
|
|
|
@mixin tablets() {
|
|
@media (min-width: variables.$media-breakpoint-small-tablet-min) and (max-width: variables.$media-breakpoint-tablet) {
|
|
@content();
|
|
}
|
|
}
|
|
|
|
@mixin print() {
|
|
@media print {
|
|
@content();
|
|
}
|
|
}
|