Add utility CSS classes for header and page polygons
This commit is contained in:
Tetrakern
parent
5623baa58e
commit
53b3112dc7
@ -1154,13 +1154,17 @@ If you have the Elementor plugin installed, consider using the [Fictioneer 002 E
|
||||
**Notes:**
|
||||
|
||||
* The `nav_bar` location also overwrites the `nav_menu` location.
|
||||
* Trying to overwrite the default navigation is generally a poor life choice.
|
||||
* Trying to overwrite the default navigation is generally a poor life choice, but you do you.
|
||||
* Use the `padding-[top|right|bottom|left]` CSS classes to apply theme page padding.
|
||||
* Use the `bg-[50|100|200|...|800|900|950]` CSS classes to force theme background colors.
|
||||
* Use the `fg-[100|200|...|800|900|950]` CSS classes to force theme text colors.
|
||||
* Use the `max-site-width` CSS classes to apply the theme’s max site width.
|
||||
* Use the `page-polygon` CSS class to apply the page clip-path chosen in the Customizer.
|
||||
* Use the `header-polygon` CSS class to apply the header clip-path chosen in the Customizer.
|
||||
* Both `page-polygon` and `header-polygon` do not work for mask styles (grunge, ringbook, etc.).
|
||||
* Some of the [content utility CSS classes](#additional-css-classes) will also work for Elementor.
|
||||
* You can toggle the mobile menu with a label targeting the `mobile-menu-toggle` ID.
|
||||
* You can select the theme fonts in Elementor, grouped under "Fictioneer".
|
||||
* The position and expected content of the header depend on your Customizer choices.
|
||||
* The global Elementor text colors have been overwritten with theme colors.
|
||||
* Elementor does not understand the theme’s display modes, colors, or HSL settings.
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1 +1 @@
|
||||
:root.header-image-style-polygon-battered .header-background{border-radius:0 !important}:root.header-image-style-polygon-battered .header-background__wrapper{border-radius:0 !important;clip-path:var(--polygon-battered-half)}@media only screen and (min-width: 768px){:root.header-image-style-polygon-battered .header-background__wrapper{margin-left:4px;margin-right:4px;clip-path:var(--polygon-battered)}}:root.header-image-style-polygon-battered:not(.inset-header-image) .header-background__wrapper{--polygon-battered: var(--polygon-battered-half);margin-left:0;margin-right:0}
|
||||
:root.header-image-style-polygon-battered{--header-polygon: var(--polygon-battered-half)}@media only screen and (min-width: 768px){:root.header-image-style-polygon-battered{--header-polygon: var(--polygon-battered)}}:root.header-image-style-polygon-battered .header-background{border-radius:0 !important}:root.header-image-style-polygon-battered .header-background__wrapper{border-radius:0 !important;clip-path:var(--header-polygon)}@media only screen and (min-width: 768px){:root.header-image-style-polygon-battered .header-background__wrapper{margin-left:4px;margin-right:4px}}:root.header-image-style-polygon-battered:not(.inset-header-image){--header-polygon: var(--polygon-battered-half)}:root.header-image-style-polygon-battered:not(.inset-header-image) .header-background__wrapper{margin-left:0;margin-right:0}
|
||||
|
||||
@ -1 +1 @@
|
||||
:root.header-image-style-polygon-chamfered .header-background{border-radius:0 !important}:root.header-image-style-polygon-chamfered .header-background__wrapper{--m: clamp(6px, 1.3392857143vw + 1.7142857143px, 12px);border-radius:0 !important;clip-path:polygon(0% var(--m), var(--m) 0%, calc(100% - var(--m)) 0%, 100% var(--m), 100% calc(100% - var(--m)), calc(100% - var(--m)) 100%, var(--m) 100%, 0% calc(100% - var(--m)))}@media only screen and (min-width: 768px){:root.header-image-style-polygon-chamfered .header-background__wrapper{margin-left:4px;margin-right:4px}}:root.header-image-style-polygon-chamfered:not(.inset-header-image) .header-background__wrapper{margin-left:0;margin-right:0}
|
||||
:root.header-image-style-polygon-chamfered{--m: clamp(6px, 1.3392857143vw + 1.7142857143px, 12px);--header-polygon: polygon( 0% var(--m), var(--m) 0%, calc(100% - var(--m)) 0%, 100% var(--m), 100% calc(100% - var(--m)), calc(100% - var(--m)) 100%, var(--m) 100%, 0% calc(100% - var(--m)) )}:root.header-image-style-polygon-chamfered .header-background{border-radius:0 !important}:root.header-image-style-polygon-chamfered .header-background__wrapper{border-radius:0 !important;clip-path:var(--header-polygon)}@media only screen and (min-width: 768px){:root.header-image-style-polygon-chamfered .header-background__wrapper{margin-left:4px;margin-right:4px}}:root.header-image-style-polygon-chamfered:not(.inset-header-image) .header-background__wrapper{margin-left:0;margin-right:0}
|
||||
|
||||
@ -1 +1 @@
|
||||
:root.page-style-polygon-battered:not(.minimal) .main__background{filter:var(--page-drop-shadow)}:root.page-style-polygon-battered:not(.minimal) .main__background::before{clip-path:var(--polygon-battered-half)}@media only screen and (min-width: 768px){:root.page-style-polygon-battered:not(.minimal) .main__background::before{left:4px;right:4px;clip-path:var(--polygon-battered)}}@media only screen and (min-width: 1024px){:root.page-style-polygon-battered:not(.minimal) .main__background::before{left:0;right:0}}
|
||||
:root.page-style-polygon-battered:not(.minimal){--page-polygon: var(--polygon-battered-half)}@media only screen and (min-width: 768px){:root.page-style-polygon-battered:not(.minimal){--page-polygon: var(--polygon-battered)}}:root.page-style-polygon-battered:not(.minimal) .main__background{filter:var(--page-drop-shadow)}:root.page-style-polygon-battered:not(.minimal) .main__background::before{clip-path:var(--page-polygon)}@media only screen and (min-width: 768px){:root.page-style-polygon-battered:not(.minimal) .main__background::before{left:4px;right:4px}}@media only screen and (min-width: 1024px){:root.page-style-polygon-battered:not(.minimal) .main__background::before{left:0;right:0}}
|
||||
|
||||
@ -1 +1 @@
|
||||
:root.page-style-polygon-chamfered:not(.minimal) .main__background{filter:var(--page-drop-shadow)}:root.page-style-polygon-chamfered:not(.minimal) .main__background::before{--m: clamp(6px, 1.3392857143vw + 1.7142857143px, 12px);clip-path:polygon(0% var(--m), var(--m) 0%, calc(100% - var(--m)) 0%, 100% var(--m), 100% calc(100% - var(--m)), calc(100% - var(--m)) 100%, var(--m) 100%, 0% calc(100% - var(--m)))}
|
||||
:root.page-style-polygon-chamfered:not(.minimal){--m: clamp(6px, 1.3392857143vw + 1.7142857143px, 12px);--page-polygon: polygon( 0% var(--m), var(--m) 0%, calc(100% - var(--m)) 0%, 100% var(--m), 100% calc(100% - var(--m)), calc(100% - var(--m)) 100%, var(--m) 100%, 0% calc(100% - var(--m)) )}:root.page-style-polygon-chamfered:not(.minimal) .main__background{filter:var(--page-drop-shadow)}:root.page-style-polygon-chamfered:not(.minimal) .main__background::before{clip-path:var(--page-polygon)}
|
||||
|
||||
@ -1 +1 @@
|
||||
:root.page-style-polygon-interface-a:not(.minimal) .main__background{filter:var(--page-drop-shadow)}:root.page-style-polygon-interface-a:not(.minimal) .main__background::before{--o: clamp(0px, 1.2326656394vw - 4.6224961479px, 8px);--m: clamp(6px, 0.4464285714vw + 4.5714285714px, 8px);--g: calc(100% - clamp(140px, 40.1785714286vw + 11.4285714286px, 320px));--s: clamp(0px, 7.1428571429vw - 22.8571428571px, 32px);--p: clamp(92px, 30.8035714286vw - 6.5714285714px, 230px);--i: 0px;clip-path:polygon(0% calc(var(--o) + var(--m)), var(--o) var(--m), calc(var(--s)) var(--m), calc(var(--m) + var(--s)) 0%, calc(var(--m) + var(--s) + var(--p)) 0%, calc(2 * var(--m) + var(--s) + var(--p)) var(--m), calc(50% - 48px) var(--m), calc(50% - 44px) calc(var(--m) + var(--i)), calc(50% - 36px) calc(var(--m) + var(--i)), calc(50% - 32px) var(--m), calc(50% - 16px) var(--m), calc(50% - 12px) calc(var(--m) + var(--i)), calc(50% - 4px) calc(var(--m) + var(--i)), 50% var(--m), calc(50% + 16px) var(--m), calc(50% + 20px) calc(var(--m) + var(--i)), calc(50% + 28px) calc(var(--m) + var(--i)), calc(50% + 32px) var(--m), var(--g) var(--m), calc(var(--g) + 1 * var(--m)) 0%, calc(var(--g) + 3 * var(--m)) 0%, calc(var(--g) + 2 * var(--m)) var(--m), calc(var(--g) + 2.5 * var(--m)) var(--m), calc(var(--g) + 3.5 * var(--m)) 0%, calc(var(--g) + 5.5 * var(--m)) 0%, calc(var(--g) + 4.5 * var(--m)) var(--m), calc(var(--g) + 5 * var(--m)) var(--m), calc(var(--g) + 6 * var(--m)) 0%, calc(var(--g) + 8 * var(--m)) 0%, calc(var(--g) + 7 * var(--m)) var(--m), calc(var(--g) + 7.5 * var(--m)) var(--m), calc(var(--g) + 8.5 * var(--m)) 0%, calc(var(--g) + 11 * var(--m)) 0%, calc(var(--g) + 11.5 * var(--m)) calc(0.5 * var(--m)), calc(100% - 5.5 * var(--m)) calc(0.5 * var(--m)), calc(100% - 5 * var(--m)) 0%, calc(100% - 1 * var(--m)) 0%, 100% var(--m), 100% calc(100% - 1 * var(--m)), calc(100% - 1 * var(--m)) 100%, var(--m) 100%, 0% calc(100% - 1 * var(--m)))}@media only screen and (min-width: 1024px){:root.page-style-polygon-interface-a:not(.minimal) .main__background::before{--i: 4px}}
|
||||
:root.page-style-polygon-interface-a:not(.minimal){--o: clamp(0px, 1.2326656394vw - 4.6224961479px, 8px);--m: clamp(6px, 0.4464285714vw + 4.5714285714px, 8px);--g: calc(100% - clamp(140px, 40.1785714286vw + 11.4285714286px, 320px));--s: clamp(0px, 7.1428571429vw - 22.8571428571px, 32px);--p: clamp(92px, 30.8035714286vw - 6.5714285714px, 230px);--i: 0px;--page-polygon: polygon( 0% calc(var(--o) + var(--m)), var(--o) var(--m), calc(var(--s)) var(--m), calc(var(--m) + var(--s)) 0%, calc(var(--m) + var(--s) + var(--p)) 0%, calc(2 * var(--m) + var(--s) + var(--p)) var(--m), calc(50% - 48px) var(--m), calc(50% - 44px) calc(var(--m) + var(--i)), calc(50% - 36px) calc(var(--m) + var(--i)), calc(50% - 32px) var(--m), calc(50% - 16px) var(--m), calc(50% - 12px) calc(var(--m) + var(--i)), calc(50% - 4px) calc(var(--m) + var(--i)), calc(50%) var(--m), calc(50% + 16px) var(--m), calc(50% + 20px) calc(var(--m) + var(--i)), calc(50% + 28px) calc(var(--m) + var(--i)), calc(50% + 32px) var(--m), var(--g) var(--m), calc(var(--g) + 1 * var(--m)) 0%, calc(var(--g) + 3 * var(--m)) 0%, calc(var(--g) + 2 * var(--m)) var(--m), calc(var(--g) + 2.5 * var(--m)) var(--m), calc(var(--g) + 3.5 * var(--m)) 0%, calc(var(--g) + 5.5 * var(--m)) 0%, calc(var(--g) + 4.5 * var(--m)) var(--m), calc(var(--g) + 5 * var(--m)) var(--m), calc(var(--g) + 6 * var(--m)) 0%, calc(var(--g) + 8 * var(--m)) 0%, calc(var(--g) + 7 * var(--m)) var(--m), calc(var(--g) + 7.5 * var(--m)) var(--m), calc(var(--g) + 8.5 * var(--m)) 0%, calc(var(--g) + 11 * var(--m)) 0%, calc(var(--g) + 11.5 * var(--m)) calc(0.5 * var(--m)), calc(100% - 5.5 * var(--m)) calc(0.5 * var(--m)), calc(100% - 5 * var(--m)) 0%, calc(100% - 1 * var(--m)) 0%, 100% var(--m), 100% calc(100% - 1 * var(--m)), calc(100% - 1 * var(--m)) 100%, var(--m) 100%, 0% calc(100% - 1 * var(--m)) )}@media only screen and (min-width: 1024px){:root.page-style-polygon-interface-a:not(.minimal){--i: 4px}}:root.page-style-polygon-interface-a:not(.minimal) .main__background{filter:var(--page-drop-shadow)}:root.page-style-polygon-interface-a:not(.minimal) .main__background::before{clip-path:var(--page-polygon)}
|
||||
|
||||
@ -392,3 +392,11 @@ html:not(.logged-in) body:not(.logged-in) .hide-if-logged-out,
|
||||
.max-site-width {
|
||||
max-width: var(--site-width) !important;
|
||||
}
|
||||
|
||||
.page-polygon {
|
||||
clip-path: var(--page-polygon);
|
||||
}
|
||||
|
||||
.header-polygon {
|
||||
clip-path: var(--header-polygon);
|
||||
}
|
||||
|
||||
@ -2,25 +2,31 @@
|
||||
@import '../common/_mixins';
|
||||
|
||||
:root.header-image-style-polygon-battered {
|
||||
--header-polygon: var(--polygon-battered-half);
|
||||
|
||||
@include bp(tablet) {
|
||||
--header-polygon: var(--polygon-battered);
|
||||
}
|
||||
|
||||
.header-background {
|
||||
border-radius: 0 !important;
|
||||
|
||||
&__wrapper {
|
||||
border-radius: 0 !important;
|
||||
clip-path: var(--polygon-battered-half);
|
||||
clip-path: var(--header-polygon);
|
||||
|
||||
@include bp(tablet) {
|
||||
margin-left: 4px;
|
||||
margin-right: 4px;
|
||||
clip-path: var(--polygon-battered);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:root.header-image-style-polygon-battered:not(.inset-header-image) {
|
||||
--header-polygon: var(--polygon-battered-half);
|
||||
|
||||
.header-background__wrapper {
|
||||
--polygon-battered: var(--polygon-battered-half);
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
@ -2,22 +2,24 @@
|
||||
@import '../common/_mixins';
|
||||
|
||||
:root.header-image-style-polygon-chamfered {
|
||||
--m: #{get_clamp(6, 12, 320, 768)};
|
||||
--header-polygon: polygon(
|
||||
0% var(--m),
|
||||
var(--m) 0%,
|
||||
calc(100% - var(--m)) 0%,
|
||||
100% var(--m),
|
||||
100% calc(100% - var(--m)),
|
||||
calc(100% - var(--m)) 100%,
|
||||
var(--m) 100%,
|
||||
0% calc(100% - var(--m))
|
||||
);
|
||||
|
||||
.header-background {
|
||||
border-radius: 0 !important;
|
||||
|
||||
&__wrapper {
|
||||
--m: #{get_clamp(6, 12, 320, 768)};
|
||||
border-radius: 0 !important;
|
||||
clip-path: polygon(
|
||||
0% var(--m),
|
||||
var(--m) 0%,
|
||||
calc(100% - var(--m)) 0%,
|
||||
100% var(--m),
|
||||
100% calc(100% - var(--m)),
|
||||
calc(100% - var(--m)) 100%,
|
||||
var(--m) 100%,
|
||||
0% calc(100% - var(--m))
|
||||
);
|
||||
clip-path: var(--header-polygon);
|
||||
|
||||
@include bp(tablet) {
|
||||
margin-left: 4px;
|
||||
|
||||
@ -1,21 +1,28 @@
|
||||
@import '../common/_functions';
|
||||
@import '../common/_mixins';
|
||||
|
||||
:root.page-style-polygon-battered:not(.minimal) .main__background {
|
||||
filter: var(--page-drop-shadow);
|
||||
:root.page-style-polygon-battered:not(.minimal) {
|
||||
--page-polygon: var(--polygon-battered-half);
|
||||
|
||||
&::before {
|
||||
clip-path: var(--polygon-battered-half);
|
||||
@include bp(tablet) {
|
||||
--page-polygon: var(--polygon-battered);
|
||||
}
|
||||
|
||||
@include bp(tablet) {
|
||||
left: 4px;
|
||||
right: 4px;
|
||||
clip-path: var(--polygon-battered);
|
||||
}
|
||||
.main__background {
|
||||
filter: var(--page-drop-shadow);
|
||||
|
||||
@include bp(desktop) {
|
||||
left: 0;
|
||||
right: 0;
|
||||
&::before {
|
||||
clip-path: var(--page-polygon);
|
||||
|
||||
@include bp(tablet) {
|
||||
left: 4px;
|
||||
right: 4px;
|
||||
}
|
||||
|
||||
@include bp(desktop) {
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,21 +1,25 @@
|
||||
@import '../common/_functions';
|
||||
@import '../common/_mixins';
|
||||
|
||||
:root.page-style-polygon-chamfered:not(.minimal) .main__background {
|
||||
filter: var(--page-drop-shadow);
|
||||
:root.page-style-polygon-chamfered:not(.minimal) {
|
||||
--m: #{get_clamp(6, 12, 320, 768)};
|
||||
--page-polygon: polygon(
|
||||
0% var(--m),
|
||||
var(--m) 0%,
|
||||
calc(100% - var(--m)) 0%,
|
||||
100% var(--m),
|
||||
100% calc(100% - var(--m)),
|
||||
calc(100% - var(--m)) 100%,
|
||||
var(--m) 100%,
|
||||
0% calc(100% - var(--m))
|
||||
);
|
||||
|
||||
&::before {
|
||||
--m: #{get_clamp(6, 12, 320, 768)};
|
||||
.main__background {
|
||||
filter: var(--page-drop-shadow);
|
||||
|
||||
clip-path: polygon(
|
||||
0% var(--m),
|
||||
var(--m) 0%,
|
||||
calc(100% - var(--m)) 0%,
|
||||
100% var(--m),
|
||||
100% calc(100% - var(--m)),
|
||||
calc(100% - var(--m)) 100%,
|
||||
var(--m) 100%,
|
||||
0% calc(100% - var(--m))
|
||||
);
|
||||
&::before {
|
||||
clip-path: var(--page-polygon);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -1,76 +1,80 @@
|
||||
@import '../common/_functions';
|
||||
@import '../common/_mixins';
|
||||
|
||||
:root.page-style-polygon-interface-a:not(.minimal) .main__background {
|
||||
filter: var(--page-drop-shadow);
|
||||
:root.page-style-polygon-interface-a:not(.minimal) {
|
||||
--o: #{get_clamp(0, 8, 375, 1024)};
|
||||
--m: #{get_clamp(6, 8, 320, 768)};
|
||||
--g: calc(100% - #{get_clamp(140, 320, 320, 768)});
|
||||
--s: #{get_clamp(0, 32, 320, 768)};
|
||||
--p: #{get_clamp(92, 230, 320, 768)};
|
||||
--i: 0px;
|
||||
|
||||
&::before {
|
||||
--o: #{get_clamp(0, 8, 375, 1024)};
|
||||
--m: #{get_clamp(6, 8, 320, 768)};
|
||||
--g: calc(100% - #{get_clamp(140, 320, 320, 768)});
|
||||
--s: #{get_clamp(0, 32, 320, 768)};
|
||||
--p: #{get_clamp(92, 230, 320, 768)};
|
||||
--i: 0px;
|
||||
@include bp(desktop) {
|
||||
--i: 4px;
|
||||
}
|
||||
|
||||
@include bp(desktop) {
|
||||
--i: 4px;
|
||||
--page-polygon: polygon(
|
||||
0% calc(var(--o) + var(--m)),
|
||||
var(--o) var(--m),
|
||||
|
||||
calc(var(--s)) var(--m),
|
||||
calc(var(--m) + var(--s)) 0%,
|
||||
calc(var(--m) + var(--s) + var(--p)) 0%,
|
||||
calc(2 * var(--m) + var(--s) + var(--p)) var(--m),
|
||||
|
||||
calc(50% - 48px) var(--m),
|
||||
calc(50% - 44px) calc(var(--m) + var(--i)),
|
||||
calc(50% - 36px) calc(var(--m) + var(--i)),
|
||||
calc(50% - 32px) var(--m),
|
||||
|
||||
calc(50% - 16px) var(--m),
|
||||
calc(50% - 12px) calc(var(--m) + var(--i)),
|
||||
calc(50% - 4px) calc(var(--m) + var(--i)),
|
||||
calc(50%) var(--m),
|
||||
|
||||
calc(50% + 16px) var(--m),
|
||||
calc(50% + 20px) calc(var(--m) + var(--i)),
|
||||
calc(50% + 28px) calc(var(--m) + var(--i)),
|
||||
calc(50% + 32px) var(--m),
|
||||
|
||||
var(--g) var(--m),
|
||||
calc(var(--g) + 1 * var(--m)) 0%,
|
||||
|
||||
calc(var(--g) + 3 * var(--m)) 0%,
|
||||
calc(var(--g) + 2 * var(--m)) var(--m),
|
||||
calc(var(--g) + 2.5 * var(--m)) var(--m),
|
||||
calc(var(--g) + 3.5 * var(--m)) 0%,
|
||||
|
||||
calc(var(--g) + 5.5 * var(--m)) 0%,
|
||||
calc(var(--g) + 4.5 * var(--m)) var(--m),
|
||||
calc(var(--g) + 5 * var(--m)) var(--m),
|
||||
calc(var(--g) + 6 * var(--m)) 0%,
|
||||
|
||||
calc(var(--g) + 8 * var(--m)) 0%,
|
||||
calc(var(--g) + 7 * var(--m)) var(--m),
|
||||
calc(var(--g) + 7.5 * var(--m)) var(--m),
|
||||
calc(var(--g) + 8.5 * var(--m)) 0%,
|
||||
|
||||
calc(var(--g) + 11 * var(--m)) 0%,
|
||||
calc(var(--g) + 11.5 * var(--m)) calc(0.5 * var(--m)),
|
||||
calc(100% - 5.5 * var(--m)) calc(0.5 * var(--m)),
|
||||
calc(100% - 5 * var(--m)) 0%,
|
||||
|
||||
calc(100% - 1 * var(--m)) 0%,
|
||||
100% var(--m),
|
||||
|
||||
100% calc(100% - 1 * var(--m)),
|
||||
calc(100% - 1 * var(--m)) 100%,
|
||||
|
||||
var(--m) 100%,
|
||||
0% calc(100% - 1 * var(--m))
|
||||
);
|
||||
|
||||
.main__background {
|
||||
filter: var(--page-drop-shadow);
|
||||
|
||||
&::before {
|
||||
clip-path: var(--page-polygon);
|
||||
}
|
||||
|
||||
clip-path: polygon(
|
||||
0% calc(var(--o) + var(--m)),
|
||||
var(--o) var(--m),
|
||||
|
||||
calc(var(--s)) var(--m),
|
||||
calc(var(--m) + var(--s)) 0%,
|
||||
calc(var(--m) + var(--s) + var(--p)) 0%,
|
||||
calc(2 * var(--m) + var(--s) + var(--p)) var(--m),
|
||||
|
||||
calc(50% - 48px) var(--m),
|
||||
calc(50% - 44px) calc(var(--m) + var(--i)),
|
||||
calc(50% - 36px) calc(var(--m) + var(--i)),
|
||||
calc(50% - 32px) var(--m),
|
||||
|
||||
calc(50% - 16px) var(--m),
|
||||
calc(50% - 12px) calc(var(--m) + var(--i)),
|
||||
calc(50% - 4px) calc(var(--m) + var(--i)),
|
||||
calc(50%) var(--m),
|
||||
|
||||
calc(50% + 16px) var(--m),
|
||||
calc(50% + 20px) calc(var(--m) + var(--i)),
|
||||
calc(50% + 28px) calc(var(--m) + var(--i)),
|
||||
calc(50% + 32px) var(--m),
|
||||
|
||||
var(--g) var(--m),
|
||||
calc(var(--g) + 1 * var(--m)) 0%,
|
||||
|
||||
calc(var(--g) + 3 * var(--m)) 0%,
|
||||
calc(var(--g) + 2 * var(--m)) var(--m),
|
||||
calc(var(--g) + 2.5 * var(--m)) var(--m),
|
||||
calc(var(--g) + 3.5 * var(--m)) 0%,
|
||||
|
||||
calc(var(--g) + 5.5 * var(--m)) 0%,
|
||||
calc(var(--g) + 4.5 * var(--m)) var(--m),
|
||||
calc(var(--g) + 5 * var(--m)) var(--m),
|
||||
calc(var(--g) + 6 * var(--m)) 0%,
|
||||
|
||||
calc(var(--g) + 8 * var(--m)) 0%,
|
||||
calc(var(--g) + 7 * var(--m)) var(--m),
|
||||
calc(var(--g) + 7.5 * var(--m)) var(--m),
|
||||
calc(var(--g) + 8.5 * var(--m)) 0%,
|
||||
|
||||
calc(var(--g) + 11 * var(--m)) 0%,
|
||||
calc(var(--g) + 11.5 * var(--m)) calc(0.5 * var(--m)),
|
||||
calc(100% - 5.5 * var(--m)) calc(0.5 * var(--m)),
|
||||
calc(100% - 5 * var(--m)) 0%,
|
||||
|
||||
calc(100% - 1 * var(--m)) 0%,
|
||||
100% var(--m),
|
||||
|
||||
100% calc(100% - 1 * var(--m)),
|
||||
calc(100% - 1 * var(--m)) 100%,
|
||||
|
||||
var(--m) 100%,
|
||||
0% calc(100% - 1 * var(--m))
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user