cacao-css 5.0.0 → 5.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +5 -0
- package/Migrating-from-version3.md +167 -0
- package/imports.css +28 -16
- package/package.json +1 -1
- package/src/display/lg/display.css +4 -0
- package/src/display/md/display.css +4 -0
- package/src/display/sm/display.css +4 -0
- package/src/display/xl/display.css +4 -0
- package/src/display/xs/display.css +4 -0
- package/src/display/xxl/display.css +4 -0
- package/src/position/core/position.css +23 -0
- package/src/position/lg/position.css +25 -0
- package/src/position/md/position.css +25 -0
- package/src/position/sm/position.css +25 -0
- package/src/position/xl/position.css +25 -0
- package/src/position/xs/position.css +25 -0
- package/src/position/xxl/position.css +25 -0
package/CHANGELOG.md
CHANGED
|
@@ -0,0 +1,167 @@
|
|
|
1
|
+
# Migrating from version 3
|
|
2
|
+
|
|
3
|
+
Migrating from version 3 to version 4 or 5 is a big change. We recommend that you stage the website somewhere becasue the update is disruptive until it's done.
|
|
4
|
+
|
|
5
|
+
**Note:** \*\* **= option.** **Ex:** **\`**mt-\*\*\*`→`mt-2\`.
|
|
6
|
+
|
|
7
|
+
## Number System
|
|
8
|
+
|
|
9
|
+
The number system used throughout most of v3 is copied over to v4. For example: `mt-1` is equivalent to `margin-top: 10px;`.
|
|
10
|
+
|
|
11
|
+
## Breakpoints
|
|
12
|
+
|
|
13
|
+
Breakpoints have been updated to be mobile-first. Additionally, the actual breakpoint values have been changed to be more in line with other frameworks.
|
|
14
|
+
|
|
15
|
+
These breakpoints are [inspired by Pure](https://purecss.io/grids/#:~:text=%3C/div%3E-,Default%20Media%20Queries,-When%20using%20Responsive) . We are moving to a mobile-first system. Because of the use of `em` , these will scale with browser zoom and settings.
|
|
16
|
+
|
|
17
|
+
1em = 16px
|
|
18
|
+
|
|
19
|
+
| Key | Breakpoint | Screen |
|
|
20
|
+
| ---- | ---------- | -------- |
|
|
21
|
+
| `sm` | > `36em` | `576px` |
|
|
22
|
+
| `md` | > `48em` | `768px` |
|
|
23
|
+
| `lg` | > `64em` | `1024px` |
|
|
24
|
+
| `xl` | > `80em` | `1280px` |
|
|
25
|
+
|
|
26
|
+
## Updated Classes
|
|
27
|
+
|
|
28
|
+
| v3 | v4 |
|
|
29
|
+
| ------------------------- | ------------------- |
|
|
30
|
+
| `.u-cf` | `.clearfix` |
|
|
31
|
+
| `.u-cleanContent` | `.last-child-sb-0` |
|
|
32
|
+
| `.u-hiddenVisually` | `.visually-hidden` |
|
|
33
|
+
| `.u-hidden` | `.hidden` |
|
|
34
|
+
| `.u-block` | `.block` |
|
|
35
|
+
| `.u-inline` | `.inline` |
|
|
36
|
+
| `.u-flex` | `.flex` |
|
|
37
|
+
| `.u-flexInline` | `.inline-flex` |
|
|
38
|
+
| `.u-flexRowReverse` | `.flex-reverse` |
|
|
39
|
+
| `.u-flexCol` | `.flex-col` |
|
|
40
|
+
| `.u-flexColReverse` | `.flex-col-reverse` |
|
|
41
|
+
| `.u-flexJustifyStart` | `.justify-start` |
|
|
42
|
+
| `.u-flexJustifyEnd` | `.justify-end` |
|
|
43
|
+
| `.u-flexJustifyCenter` | `.justify-center` |
|
|
44
|
+
| `.u-flexJustifyBetween` | `.justify-between` |
|
|
45
|
+
| `.u-flexJustifyAround` | `.justify-around` |
|
|
46
|
+
| `.u-flexAlignItemsStart` | `.align-start` |
|
|
47
|
+
| `.u-flexAlignItemsEnd` | `.align-end` |
|
|
48
|
+
| `.u-flexAlignItemsCenter` | `.align-center` |
|
|
49
|
+
| `.u-linkSubtle` | `.link-subtle` |
|
|
50
|
+
| `.u-margTop*` | `.mt-*` |
|
|
51
|
+
| `.u-margRight*` | `.me-*` |
|
|
52
|
+
| `.u-margBottom*` | `.mb-*` |
|
|
53
|
+
| `.u-margLeft*` | `.ms-*` |
|
|
54
|
+
| `.u-padTop*` | `.pt-*` |
|
|
55
|
+
| `.u-padRight*` | `.pe-*` |
|
|
56
|
+
| `.u-padBottom*` | `.pb-*` |
|
|
57
|
+
| `.u-padLeft*` | `.ps-*` |
|
|
58
|
+
| `.u-posAbsolute` | `.absolute` |
|
|
59
|
+
| `.u-posRelative` | `.relative` |
|
|
60
|
+
| `.u-posStatic` | `.static` |
|
|
61
|
+
| `.u-printHide` | `.print-hide` |
|
|
62
|
+
| `.u-printShow` | `.print-show` |
|
|
63
|
+
| `.u-heightFull` | `.h-100` |
|
|
64
|
+
| `.u-widthFull` | `.w-100` |
|
|
65
|
+
| `.u-size*of*` | `.col-*-*` |
|
|
66
|
+
| `.u-textBreak` | `.break-word` |
|
|
67
|
+
| `.u-textBreakAll` | `.break-all` |
|
|
68
|
+
| `.u-textNoWrap` | `.no-wrap` |
|
|
69
|
+
| `.u-textUpper` | `.text-upper` |
|
|
70
|
+
| `.u-textCenter` | `.text-center` |
|
|
71
|
+
| `.u-weightNormal` | `.weight-normal` |
|
|
72
|
+
| `.u-weightBold` | `.weight-bold` |
|
|
73
|
+
|
|
74
|
+
## Removed Classes
|
|
75
|
+
|
|
76
|
+
- [`.u-align*`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/utils/align/align.css)
|
|
77
|
+
- [`.u-inlineBlock`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/utils/display/display.css#L52)
|
|
78
|
+
- [`.u-table*`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/utils/display/display.css#L58)
|
|
79
|
+
- [`.u-flexRow`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/utils/flex/flex.css#L26)
|
|
80
|
+
- [`.u-flexWrap`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/utils/flex/flex.css#L47)
|
|
81
|
+
- [`.u-flexAlignItemsStretch`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/utils/flex/flex.css#L103)
|
|
82
|
+
- [`.u-flexAlignItemsBaseline`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/utils/flex/flex.css#L107C1-L107C26)
|
|
83
|
+
- [`.u-flexAlignContent*`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/utils/flex/flex.css#L112)
|
|
84
|
+
- [`.u-flexAlignSelf*`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/utils/flex/flex.css#L157)
|
|
85
|
+
- [`.u-flexOrder*`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/utils/flex/flex.css#L185)
|
|
86
|
+
- [`.u-flexGrow`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/utils/flex/flex.css#L201)
|
|
87
|
+
- [`.u-flexExpand`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/utils/flex/flex.css#L231)
|
|
88
|
+
- [`.u-img*`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/utils/image/image.css) [](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/utils/layout/layout.css#L8)
|
|
89
|
+
- [`.u-float*`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/utils/layout/layout.css#L32)
|
|
90
|
+
- [`.u-nbfc`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/utils/layout/layout.css#L44)
|
|
91
|
+
- [`.u-nbfcAlt`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/utils/layout/layout.css#L57)
|
|
92
|
+
- [`.u-linkClean`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/utils/link/link.css)
|
|
93
|
+
- [`.u-linkObvious`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/utils/link/link.css)
|
|
94
|
+
- [`.u-linkNatural`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/utils/link/link.css)
|
|
95
|
+
- [`.u-linkComplex`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/utils/link/link.css)
|
|
96
|
+
- [`.u-guttersMarg*`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/utils/margin/gutters.css)
|
|
97
|
+
- [`.u-spacedMarg*`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/utils/margin/spaced.css)
|
|
98
|
+
- [`.u-gutters*`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/utils/padding/gutters.css)
|
|
99
|
+
- [`.u-spaced*`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/utils/padding/spaced.css) replaced with vertical padding `.py-*`
|
|
100
|
+
- [`.u-pull*`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/utils/pull/pull.css) , spiritually succeeded by `.order-*`. But, there are also `.pull-` classes if you just need to move something to the left.
|
|
101
|
+
- [`.u-push*`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/utils/push/push.css) , spiritually succeeded by `.order-*`. But, there are also `.push-` classes if you just need to move something to the right.
|
|
102
|
+
- [`.u-radius*`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/utils/radius/radius.css)
|
|
103
|
+
- [`.u-text*`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/utils/typography/typography.css#L30) , exceptions for `.u-textUpper` and `.u-textCenter`.
|
|
104
|
+
- [`.u-style*`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/utils/typography/typography.css#L41)
|
|
105
|
+
- [`.u-weight*`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/utils/typography/typography.css#L67) , exceptions for `.u-weightNormal` and `.u-weightBold`.
|
|
106
|
+
- [`.u-fontSize*`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/utils/typography/typography.css#L98)
|
|
107
|
+
|
|
108
|
+
## Components
|
|
109
|
+
|
|
110
|
+
All components have been removed from Cacao. The purpose of Cacao has pivoted to being only a reset/base and core utilities.
|
|
111
|
+
|
|
112
|
+
### Changed to a Utility
|
|
113
|
+
|
|
114
|
+
- [`.Constrain`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/components/constrain/constrain.css) → `.aspect`. Many options removed.
|
|
115
|
+
- [`.FlexEmbed`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/components/flexembed/flexembed.css) → `.embed`. Use `.aspect` for an aspect ratio.
|
|
116
|
+
- [`.Grid`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/components/grid/grid.css) → `.grid`. Alignment and gutters can be handled using the new Flex utilities.
|
|
117
|
+
- [`.Image--*`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/components/image/image.css) → `.image-*`. Only ported options for `left` and `right`.
|
|
118
|
+
|
|
119
|
+
### Removed
|
|
120
|
+
|
|
121
|
+
- [`.Arrange`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/components/arrange/arrange.css)
|
|
122
|
+
- [`.Breadcrumb`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/components/breadcrumb/breadcrumb.css)
|
|
123
|
+
- [`.Button`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/components/button/button.css)
|
|
124
|
+
- [`.Container`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/components/container/container.css)
|
|
125
|
+
- [`.Content`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/components/content/content.css)
|
|
126
|
+
- [`.FormError`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/components/form/error.css)
|
|
127
|
+
- [`.FormLabel`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/components/form/label.css)
|
|
128
|
+
- [`.FormRequired`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/components/form/required.css)
|
|
129
|
+
- [`.SelectInput`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/components/form/selectmenu.css)
|
|
130
|
+
- [`.FormSuccess`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/components/form/success.css)
|
|
131
|
+
- [`.TextInput`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/components/form/textinput.css)
|
|
132
|
+
- [`.ImageCaption`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/components/image/caption.css)
|
|
133
|
+
- [`.ImageWrapper`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/components/image/wrapper.css)
|
|
134
|
+
- [`.ColumnList`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/components/list/columns.css)
|
|
135
|
+
- [`.List`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/components/list/list.css)
|
|
136
|
+
- [`.Media`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/components/media/media.css)
|
|
137
|
+
- [`.Message`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/components/message/message.css)
|
|
138
|
+
- [`.NavBar`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/components/navigation/bar.css)
|
|
139
|
+
- [`.Dropdown`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/components/navigation/dropdown.css)
|
|
140
|
+
- [`.FooterNav`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/components/navigation/footer.css)
|
|
141
|
+
- [`.MainNav`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/components/navigation/mainnav.css)
|
|
142
|
+
- [`.SidebarNav`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/components/navigation/sidebar.css)
|
|
143
|
+
- [`.SmScBtn`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/components/navigation/small-screen-button.css)
|
|
144
|
+
- [`.Pagination`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/components/pagination/pagination.css)
|
|
145
|
+
- [`.Triangle`](https://github.com/aptuitiv/cacao/blob/v3.21.0/src/css/components/triangle/triangle.css)
|
|
146
|
+
|
|
147
|
+
## Grid styles
|
|
148
|
+
|
|
149
|
+
### Equal height grids
|
|
150
|
+
|
|
151
|
+
Remove `Grid--equalHeight` from the grid div.
|
|
152
|
+
|
|
153
|
+
Add `flex` class to the grid column divs.
|
|
154
|
+
|
|
155
|
+
### Aligning cells
|
|
156
|
+
|
|
157
|
+
Change these classes on the grid div.
|
|
158
|
+
|
|
159
|
+
- `Grid--alignBottom` → `align-end`
|
|
160
|
+
- `Grid--alignMiddle` → `align-center`
|
|
161
|
+
- `Grid-alignCenter` → `justify-center`
|
|
162
|
+
- `Grid--alignRight` → `justify-right`
|
|
163
|
+
|
|
164
|
+
### Grid gutters
|
|
165
|
+
|
|
166
|
+
- `Grid--withGutter` → `g-2`
|
|
167
|
+
- `Grid--withGutterXlg` → `g-5` (although a `g-6` would be nice since the margin is about 60px)
|
package/imports.css
CHANGED
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
modules that your project needs. This keeps the CSS lean and mean.
|
|
14
14
|
\* =========================================================================== */
|
|
15
15
|
|
|
16
|
-
/* stylelint-disable comment-empty-line-before */
|
|
16
|
+
/* stylelint-disable comment-empty-line-before -- Disabled so that an extra line isn't added between each commented out code line. */
|
|
17
17
|
|
|
18
18
|
/* ------------------------------------ *\
|
|
19
19
|
Core files that should always be included
|
|
@@ -32,8 +32,8 @@
|
|
|
32
32
|
Aspect Ratios
|
|
33
33
|
\* ------------------------------------ */
|
|
34
34
|
|
|
35
|
-
@import '../../node_modules/cacao-css/src/aspect/horizontal.css';
|
|
36
|
-
/* @import '../../node_modules/cacao-css/src/aspect/vertical.css'; */
|
|
35
|
+
@import '../../node_modules/cacao-css/src/aspect/core/horizontal.css';
|
|
36
|
+
/* @import '../../node_modules/cacao-css/src/aspect/core/vertical.css'; */
|
|
37
37
|
|
|
38
38
|
/* Aspect Ratios (xs) */
|
|
39
39
|
|
|
@@ -134,30 +134,24 @@
|
|
|
134
134
|
Fit
|
|
135
135
|
\* ------------------------------------ */
|
|
136
136
|
|
|
137
|
-
/* @import '../../node_modules/cacao-css/src/fit/fit.css'; */
|
|
137
|
+
/* @import '../../node_modules/cacao-css/src/fit/core/fit.css'; */
|
|
138
138
|
|
|
139
139
|
/* Fit (xs) */
|
|
140
|
-
|
|
141
140
|
/* @import '../../node_modules/cacao-css/src/fit/xs/fit.css'; */
|
|
142
141
|
|
|
143
142
|
/* Fit (sm) */
|
|
144
|
-
|
|
145
143
|
/* @import '../../node_modules/cacao-css/src/fit/sm/fit.css'; */
|
|
146
144
|
|
|
147
145
|
/* Fit (md) */
|
|
148
|
-
|
|
149
146
|
/* @import '../../node_modules/cacao-css/src/fit/md/fit.css'; */
|
|
150
147
|
|
|
151
148
|
/* Fit (lg) */
|
|
152
|
-
|
|
153
149
|
/* @import '../../node_modules/cacao-css/src/fit/lg/fit.css'; */
|
|
154
150
|
|
|
155
151
|
/* Fit (xl) */
|
|
156
|
-
|
|
157
152
|
/* @import '../../node_modules/cacao-css/src/fit/xl/fit.css'; */
|
|
158
153
|
|
|
159
154
|
/* Fit (xxl) */
|
|
160
|
-
|
|
161
155
|
/* @import '../../node_modules/cacao-css/src/fit/xxl/fit.css'; */
|
|
162
156
|
|
|
163
157
|
/* ------------------------------------ *\
|
|
@@ -711,6 +705,30 @@
|
|
|
711
705
|
/* @import '../../node_modules/cacao-css/src/push/xxl/push-11.css'; */
|
|
712
706
|
/* @import '../../node_modules/cacao-css/src/push/xxl/push-12.css'; */
|
|
713
707
|
|
|
708
|
+
/* ------------------------------------ *\
|
|
709
|
+
Position
|
|
710
|
+
\* ------------------------------------ */
|
|
711
|
+
|
|
712
|
+
/* @import '../../node_modules/cacao-css/src/position/core/position.css'; */
|
|
713
|
+
|
|
714
|
+
/* Position (xs) */
|
|
715
|
+
/* @import '../../node_modules/cacao-css/src/position/xs/position.css'; */
|
|
716
|
+
|
|
717
|
+
/* Position (sm) */
|
|
718
|
+
/* @import '../../node_modules/cacao-css/src/position/sm/position.css'; */
|
|
719
|
+
|
|
720
|
+
/* Position (md) */
|
|
721
|
+
/* @import '../../node_modules/cacao-css/src/position/md/position.css'; */
|
|
722
|
+
|
|
723
|
+
/* Position (lg) */
|
|
724
|
+
/* @import '../../node_modules/cacao-css/src/position/lg/position.css'; */
|
|
725
|
+
|
|
726
|
+
/* Position (xl) */
|
|
727
|
+
/* @import '../../node_modules/cacao-css/src/position/xl/position.css'; */
|
|
728
|
+
|
|
729
|
+
/* Position (xxl) */
|
|
730
|
+
/* @import '../../node_modules/cacao-css/src/position/xxl/position.css'; */
|
|
731
|
+
|
|
714
732
|
/* ------------------------------------ *\
|
|
715
733
|
Size
|
|
716
734
|
\* ------------------------------------ */
|
|
@@ -718,27 +736,21 @@
|
|
|
718
736
|
/* @import '../../node_modules/cacao-css/src/size/core/size.css'; */
|
|
719
737
|
|
|
720
738
|
/* Size (xs) */
|
|
721
|
-
|
|
722
739
|
/* @import '../../node_modules/cacao-css/src/size/xs/size.css'; */
|
|
723
740
|
|
|
724
741
|
/* Size (sm) */
|
|
725
|
-
|
|
726
742
|
/* @import '../../node_modules/cacao-css/src/size/sm/size.css'; */
|
|
727
743
|
|
|
728
744
|
/* Size (md) */
|
|
729
|
-
|
|
730
745
|
/* @import '../../node_modules/cacao-css/src/size/md/size.css'; */
|
|
731
746
|
|
|
732
747
|
/* Size (lg) */
|
|
733
|
-
|
|
734
748
|
/* @import '../../node_modules/cacao-css/src/size/lg/size.css'; */
|
|
735
749
|
|
|
736
750
|
/* Size (xl) */
|
|
737
|
-
|
|
738
751
|
/* @import '../../node_modules/cacao-css/src/size/xl/size.css'; */
|
|
739
752
|
|
|
740
753
|
/* Size (xxl) */
|
|
741
|
-
|
|
742
754
|
/* @import '../../node_modules/cacao-css/src/size/xxl/size.css'; */
|
|
743
755
|
|
|
744
756
|
/* ------------------------------------ *\
|
package/package.json
CHANGED
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
/* =========================================================================== *\
|
|
2
|
+
Positioning utilities
|
|
3
|
+
\* =========================================================================== */
|
|
4
|
+
|
|
5
|
+
.absolute {
|
|
6
|
+
position: absolute;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.fixed {
|
|
10
|
+
position: fixed;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.relative {
|
|
14
|
+
position: relative;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.static {
|
|
18
|
+
position: static;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.sticky {
|
|
22
|
+
position: sticky;
|
|
23
|
+
}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
/* =========================================================================== *\
|
|
2
|
+
Positioning utilities
|
|
3
|
+
\* =========================================================================== */
|
|
4
|
+
|
|
5
|
+
@media (--c-bp-lg) {
|
|
6
|
+
.absolute-lg {
|
|
7
|
+
position: absolute;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.fixed-lg {
|
|
11
|
+
position: fixed;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.relative-lg {
|
|
15
|
+
position: relative;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.static-lg {
|
|
19
|
+
position: static;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.sticky-lg {
|
|
23
|
+
position: sticky;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
/* =========================================================================== *\
|
|
2
|
+
Positioning utilities
|
|
3
|
+
\* =========================================================================== */
|
|
4
|
+
|
|
5
|
+
@media (--c-bp-md) {
|
|
6
|
+
.absolute-md {
|
|
7
|
+
position: absolute;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.fixed-md {
|
|
11
|
+
position: fixed;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.relative-md {
|
|
15
|
+
position: relative;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.static-md {
|
|
19
|
+
position: static;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.sticky-md {
|
|
23
|
+
position: sticky;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
/* =========================================================================== *\
|
|
2
|
+
Positioning utilities
|
|
3
|
+
\* =========================================================================== */
|
|
4
|
+
|
|
5
|
+
@media (--c-bp-sm) {
|
|
6
|
+
.absolute-sm {
|
|
7
|
+
position: absolute;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.fixed-sm {
|
|
11
|
+
position: fixed;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.relative-sm {
|
|
15
|
+
position: relative;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.static-sm {
|
|
19
|
+
position: static;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.sticky-sm {
|
|
23
|
+
position: sticky;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
/* =========================================================================== *\
|
|
2
|
+
Positioning utilities
|
|
3
|
+
\* =========================================================================== */
|
|
4
|
+
|
|
5
|
+
@media (--c-bp-xl) {
|
|
6
|
+
.absolute-xl {
|
|
7
|
+
position: absolute;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.fixed-xl {
|
|
11
|
+
position: fixed;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.relative-xl {
|
|
15
|
+
position: relative;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.static-xl {
|
|
19
|
+
position: static;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.sticky-xl {
|
|
23
|
+
position: sticky;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
/* =========================================================================== *\
|
|
2
|
+
Positioning utilities
|
|
3
|
+
\* =========================================================================== */
|
|
4
|
+
|
|
5
|
+
@media (--c-bp-xs) {
|
|
6
|
+
.absolute-xs {
|
|
7
|
+
position: absolute;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.fixed-xs {
|
|
11
|
+
position: fixed;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.relative-xs {
|
|
15
|
+
position: relative;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.static-xs {
|
|
19
|
+
position: static;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.sticky-xs {
|
|
23
|
+
position: sticky;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
/* =========================================================================== *\
|
|
2
|
+
Positioning utilities
|
|
3
|
+
\* =========================================================================== */
|
|
4
|
+
|
|
5
|
+
@media (--c-bp-xxl) {
|
|
6
|
+
.absolute-xxl {
|
|
7
|
+
position: absolute;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.fixed-xxl {
|
|
11
|
+
position: fixed;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.relative-xxl {
|
|
15
|
+
position: relative;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.static-xxl {
|
|
19
|
+
position: static;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.sticky-xxl {
|
|
23
|
+
position: sticky;
|
|
24
|
+
}
|
|
25
|
+
}
|