Add Some Responsive Features
This commit is contained in:
1 parent
83ba362c59
commit
33e8b61065
1 file changed
+19
@@ -1,3 +1,19 @@
|
|||||||
|
@use "sass:map";
|
||||||
|
|
||||||
|
$breakpoints: (
|
||||||
|
'narrow': 1400px
|
||||||
|
);
|
||||||
|
|
||||||
|
@mixin respond-to($breakpoint) {
|
||||||
|
@if map.has-key($breakpoints, $breakpoint) {
|
||||||
|
@media (max-width: map.get($breakpoints, $breakpoint)) {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
} @else {
|
||||||
|
@warn "해당 브레이크포인트가 없습니다: #{$breakpoint}";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
:host {
|
:host {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
@@ -110,6 +126,9 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
span {
|
span {
|
||||||
|
@include respond-to(narrow) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
/*text-box-trim: trim-both;
|
/*text-box-trim: trim-both;
|
||||||
text-box-edge: cap alphabetic;*/
|
text-box-edge: cap alphabetic;*/
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in new issue
Block a user