feat: improve global responsivity
This commit is contained in:
parent
c332052930
commit
b2286abd85
7 changed files with 101 additions and 21 deletions
|
|
@ -1,13 +1,26 @@
|
|||
@use '../constants' as *;
|
||||
|
||||
@mixin callout-customization($type, $color, $text-icon) {
|
||||
&[type="#{$type}"] {
|
||||
&>.callout-content {
|
||||
border-color: var(#{$color});
|
||||
background-color: color-mix(in srgb, var(#{$color}), transparent 90%);
|
||||
|
||||
@media only screen and (max-width: $smartphone) {
|
||||
&::before {
|
||||
content: $text-icon;
|
||||
color: var(#{$color});
|
||||
float: left;
|
||||
margin-right: .5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: $text-icon;
|
||||
color: var(#{$color});
|
||||
@media only screen and (min-width: $smartphone) {
|
||||
&::before {
|
||||
content: $text-icon;
|
||||
color: var(#{$color});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -33,9 +46,12 @@
|
|||
text-align: initial;
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
width: 85%;
|
||||
padding: 1.25rem;
|
||||
|
||||
@media only screen and (min-width: $smartphone) {
|
||||
width: 85%;
|
||||
}
|
||||
|
||||
&>p {
|
||||
margin: 0;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue