├── .gitignore
├── LICENSE
├── README.md
├── base
└── _resets.scss
├── design-ingredients
├── _background.scss
├── _border-radius.scss
├── _borders.scss
├── _color.scss
├── _flexbox.scss
├── _grid.scss
├── _layout.scss
├── _size.scss
├── _tips.scss
├── _typography.scss
└── _whitespace.scss
├── main.css
├── main.css.map
├── main.scss
└── package.json
/.gitignore:
--------------------------------------------------------------------------------
1 | .idea/
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | Copyright 2022 Ami Amigo
2 |
3 | Licensed under the Apache License, Version 2.0 (the "License");
4 | you may not use this file except in compliance with the License.
5 | You may obtain a copy of the License at
6 |
7 | http://www.apache.org/licenses/LICENSE-2.0
8 |
9 | Unless required by applicable law or agreed to in writing, software
10 | distributed under the License is distributed on an "AS IS" BASIS,
11 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 | See the License for the specific language governing permissions and
13 | limitations under the License.
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Amigo CSS
2 |
3 | Amigo CSS is a simple, custom-first and intuitive CSS framework for CSS lovers. The inspiration to create Amigo CSS came
4 | from my desire to have a specific set of procedures or a system that would
5 | help me to easily create websites. After building so many websites you
6 | start noticing a trend of the same things you normally do. For example, doing CSS resets,
7 | coming up with a typography and spacing system, picking specific colors, etc.
8 |
9 | Amigo CSS was originally created to solve that personal problem but all
10 | of a sudden I realized that I could make this open source.
11 |
12 | So here is my first open source project - Amigo CSS
13 |
14 | ## Documentation
15 |
16 | Amigo CSS Website
17 |
18 | ## FAQ
19 |
20 | #### How do I use Amigo CSS on my project?
21 |
22 | The easiest way I recommend is just grab this URL from the CDN and add
23 | it to your project.
24 | ```bash
25 |
26 | ```
27 |
28 | #### Does Amigo CSS use NPM?
29 |
30 | Yes! We are on NPM. Install Amigo CSS with npm...
31 |
32 | ```bash
33 | npm install amigocss
34 | ```
35 |
36 | ## Feedback
37 |
38 | If you have any feedback, please reach out to me on @amiamigo97 or even here on Github discussions
39 |
40 | ## Roadmap
41 | - Complete the documentation
42 | - Adding more properties per feedback received
43 | - Amigo UI Library Components
44 | - Amigo HTML Templates
45 |
46 | ## License
47 |
48 | Apache 2.0
49 |
50 | ## Authors
51 |
52 | - @amiamigo97
53 |
54 |
55 |
--------------------------------------------------------------------------------
/base/_resets.scss:
--------------------------------------------------------------------------------
1 | /*Global Resets*/
2 |
3 | * {
4 | margin: 0;
5 | padding: 0;
6 | box-sizing: border-box;
7 | }
8 |
9 | html {
10 | font-size: 62.5%;
11 | }
12 |
13 |
14 | body {
15 | font-size: 1.8rem;
16 | //font-size: 1.6rem;
17 |
18 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
19 | Roboto, Oxygen-Sans, Ubuntu, Cantarell,
20 | "Helvetica Neue", sans-serif;
21 | font-weight: 400;
22 |
23 | //line-height: 1.5;
24 |
25 | color: #333333;
26 | text-rendering: optimizeLegibility;
27 | overflow-x: hidden;
28 |
29 | }
30 |
--------------------------------------------------------------------------------
/design-ingredients/_background.scss:
--------------------------------------------------------------------------------
1 | //BACKGROUND COLORS from Open Colors
2 |
3 | /*1. GRAY*/
4 | .background-gray-00 { background-color: #f8f9fa; } //Lightest
5 | .background-gray-02 { background-color: #e9ecef; } //Lighter
6 | .background-gray-04 { background-color: #ced4da; } //Light
7 |
8 | .background-gray-05 { background-color: #adb5bd; } //Dark
9 | .background-gray-07 { background-color: #495057; } //Darker
10 | .background-gray-09 { background-color: #212529; } //Darkest
11 |
12 |
13 | //2. RED
14 | .background-red-00 { background-color: #fff5f5; } //Lightest
15 | .background-red-02 { background-color: #ffc9c9; } //Lighter
16 | .background-red-04 { background-color: #ff8787; } //Light
17 |
18 | .background-red-05 { background-color: #ff6b6b; } //Dark
19 | .background-red-07 { background-color: #f03e3e; } //Darker
20 | .background-red-09 { background-color: #c92a2a; } //Darkest
21 |
22 | //3. PINK
23 | .background-pink-00 { background-color: #fff0f6; } //Lightest
24 | .background-pink-02 { background-color: #fcc2d7; } //Lighter
25 | .background-pink-04 { background-color: #f783ac; } //Light
26 |
27 |
28 | .background-pink-05 { background-color: #f06595; } //Primary
29 | .background-pink-07 { background-color: #d6336c; } //Dark
30 | .background-pink-09 { background-color: #a61e4d; } //Darker
31 |
32 |
33 | // 4. GRAPE / ( MAGENTA / FUCHSIA ) Grape-Zabibu,
34 | .background-grape-00 { background-color: #f8f0fc; } //Lightest
35 | .background-grape-02 { background-color: #eebefa; } //Lighter
36 | .background-grape-04 { background-color: #da77f2; } //Light
37 |
38 | .background-grape-05 { background-color: #cc5de8; } //Dark
39 | .background-grape-07 { background-color: #ae3ec9; } //Darker
40 | .background-grape-09 { background-color: #862e9c; } //Darkest
41 |
42 | .background-magenta-00 { background-color: #f8f0fc; } //Lightest
43 | .background-magenta-02 { background-color: #eebefa; } //Lighter
44 | .background-magenta-04 { background-color: #da77f2; } //Light
45 |
46 | .background-magenta-05 { background-color: #cc5de8; } //Dark
47 | .background-magenta-07 { background-color: #ae3ec9; } //Darker
48 | .background-magenta-09 { background-color: #862e9c; } //Darkest
49 |
50 | .background-fuchsia-00 { background-color: #f8f0fc; } //Lighter
51 | .background-fuchsia-02 { background-color: #eebefa; } //Light
52 | .background-fuchsia-04 { background-color: #da77f2; } //Light
53 |
54 | .background-fuchsia-05 { background-color: #cc5de8; } //Dark
55 | .background-fuchsia-07 { background-color: #ae3ec9; } //Darker
56 | .background-fuchsia-09 { background-color: #862e9c; } //Darkest
57 |
58 | //5. VIOLET /( PURPLE )(violet-Urujuani) (Purple-Zambarau)
59 | .background-violet-00 { background-color: #f3f0ff; } //Lightest
60 | .background-violet-02 { background-color: #d0bfff; } //Lighter
61 | .background-violet-04 { background-color: #9775fa; } //Light
62 |
63 | .background-violet-05 { background-color: #845ef7; } //Dark
64 | .background-violet-07 { background-color: #7048e8; } //Darker
65 | .background-violet-09 { background-color: #5f3dc4; } //Darkest
66 |
67 | //Open Colors doesn't have purple...but violet is pretty close to purple. So purple is violet in this instance.
68 | .background-purple-00 { background-color: #f3f0ff; } //Lighter
69 | .background-purple-02 { background-color: #d0bfff; } //Light
70 | .background-purple-04 { background-color: #9775fa; } //Light
71 |
72 | .background-purple-05 { background-color: #845ef7; } //Dark
73 | .background-purple-07 { background-color: #7048e8; } //Darker
74 | .background-purple-09 { background-color: #5f3dc4; } //Darkest
75 |
76 |
77 | //6. INDIGO (Indigo - Nili, Bluu Iliyoiva)
78 | .background-indigo-00 { background-color: #edf2ff; } //Lightest
79 | .background-indigo-02 { background-color: #bac8ff; } //Lighter
80 | .background-indigo-04 { background-color: #748ffc; } //Light
81 |
82 | .background-indigo-05 { background-color: #5c7cfa; } //Dark
83 | .background-indigo-07 { background-color: #4263eb; } //Darker
84 | .background-indigo-09 { background-color: #364fc7; } //Darkest
85 |
86 | //7. BLUE
87 | .background-blue-00 { background-color: #e7f5ff; } //Lightest
88 | .background-blue-02 { background-color: #a5d8ff; } //Lighter
89 | .background-blue-04 { background-color: #4dabf7; } //Light
90 |
91 | .background-blue-05 { background-color: #339af0; } //Dark
92 | .background-blue-07 { background-color: #1c7ed6; } //Darker
93 | .background-blue-09 { background-color: #1864ab; } //Darkest
94 |
95 | //8. CYAN
96 | .background-cyan-00 { background-color: #e3fafc; } //Lightest
97 | .background-cyan-02 { background-color: #99e9f2; } //Lighter
98 | .background-cyan-04 { background-color: #3bc9db; } //Light
99 |
100 | .background-cyan-05 { background-color: #22b8cf; } //Dark
101 | .background-cyan-07 { background-color: #1098ad; } //Darker
102 | .background-cyan-09 { background-color: #0b7285; } //Darkest
103 |
104 | //9. TEAL
105 | .background-teal-00 { background-color: #e6fcf5; } //Lightest
106 | .background-teal-02 { background-color: #96f2d7; } //Lighter
107 | .background-teal-04 { background-color: #38d9a9; } //Light
108 |
109 | .background-teal-05 { background-color: #20c997; } //Dark
110 | .background-teal-07 { background-color: #0ca678; } //Darker
111 | .background-teal-09 { background-color: #087f5b; } //Darkest
112 |
113 | //10. GREEN
114 | .background-green-00 { background-color: #ebfbee; } //Lighter
115 | .background-green-02 { background-color: #b2f2bb; } //Light
116 | .background-green-04 { background-color: #69db7c; } //Light
117 |
118 |
119 | .background-green-05 { background-color: #51cf66; } //Dark
120 | .background-green-07 { background-color: #37b24d; } //Darker
121 | .background-green-09 { background-color: #2b8a3e; } //Darkest
122 |
123 |
124 | //11. LIME
125 | .background-lime-00 { background-color: #f4fce3; } //Lighter
126 | .background-lime-02 { background-color: #d8f5a2; } //Light
127 | .background-lime-04 { background-color: #a9e34b; } //Light
128 |
129 | .background-lime-05 { background-color: #94d82d; } //Dark
130 | .background-lime-07 { background-color: #74b816; } //Darker
131 | .background-lime-09 { background-color: #5c940d; } //Darkest
132 |
133 |
134 | //12. YELLOW
135 | .background-yellow-00 { background-color: #fff9db; } //Lightest
136 | .background-yellow-02 { background-color: #ffec99; } //Lighter
137 | .background-yellow-04 { background-color: #ffd43b; } //Light
138 |
139 | .background-yellow-05 { background-color: #fcc419; } //Dark
140 | .background-yellow-07 { background-color: #f59f00; } //Darker
141 | .background-yellow-09 { background-color: #e67700; } //Darkest
142 |
143 | //13. ORANGE
144 | .background-orange-00 { background-color: #fff4e6; } //Lightest
145 | .background-orange-02 { background-color: #ffd8a8; } //Lighter
146 | .background-orange-04 { background-color: #ffa94d; } //Light
147 |
148 | .background-orange-05 { background-color: #ff922b; } //Dark
149 | .background-orange-07 { background-color: #f76707; } //Darker
150 | .background-orange-09 { background-color: #d9480f; } //Darkest
151 |
152 | // 14. (I will add the fourteenth backgroundcolor
153 |
154 | //Extra colors
155 | .background-white {background-color: #fff}
156 | .background-black {background-color: #000}
157 | .background-gray {background-color: #333}
--------------------------------------------------------------------------------
/design-ingredients/_border-radius.scss:
--------------------------------------------------------------------------------
1 | //6.Border Radius - The general roundness of the elements
2 |
3 | // Main spacing system
4 | .border-radius-0 {
5 | border-radius: 0;
6 | }
7 |
8 | .border-radius-2 {
9 | border-radius: .2rem;
10 | }
11 |
12 | .border-radius-4 {
13 | border-radius: .4rem;
14 | }
15 |
16 | .border-radius-8 {
17 | border-radius: .8rem;
18 | }
19 |
20 | .border-radius-12 {
21 | border-radius: 1.2rem;
22 | }
23 |
24 | .border-radius-16 {
25 | border-radius: 1.6rem;
26 | }
27 |
28 | .border-radius-24 {
29 | border-radius: 2.4rem;
30 | }
31 |
32 | .border-radius-32 {
33 | border-radius: 3.2rem;
34 | }
35 |
36 | .border-radius-48 {
37 | border-radius: 4.8rem;
38 | }
39 |
40 | .border-radius-64 {
41 | border-radius: 6.4rem;
42 | }
43 |
44 | .border-radius-80 {
45 | border-radius: 8.0rem;
46 | }
47 |
48 | .border-radius-96 {
49 | border-radius: 9.6rem;
50 | }
51 |
52 | .border-radius-128 {
53 | border-radius: 12.8rem;
54 | }
55 |
56 | // Extra values
57 | .border-radius-10 {
58 | border-radius: 1.0rem;
59 | }
60 |
61 | .border-radius-20 {
62 | border-radius: 2.0rem;
63 | }
64 |
65 | .border-radius-40 {
66 | border-radius: 4.0rem;
67 | }
68 |
69 | .border-radius-56 {
70 | border-radius: 5.6rem;
71 | }
72 |
73 | .border-radius-72 {
74 | border-radius: 7.2rem;
75 | }
76 |
77 | .border-radius-104 {
78 | border-radius: 10.4rem;
79 | }
80 |
81 | .border-radius-112 {
82 | border-radius: 11.2rem;
83 | }
84 |
85 | .border-radius-120 {
86 | border-radius: 12.0rem;
87 | }
88 |
89 | //Percentages
90 | .border-radius-10-percent{ border-radius: 10% }
91 | .border-radius-20-percent{ border-radius: 20% }
92 | .border-radius-25-percent{ border-radius: 25% }
93 | .border-radius-30-percent{ border-radius: 30% }
94 | .border-radius-33-percent{ border-radius: 33.33% }
95 | .border-radius-40-percent{ border-radius: 40% }
96 | .border-radius-50-percent{ border-radius: 50% }
97 | .border-radius-60-percent{ border-radius: 60% }
98 | .border-radius-66-percent{ border-radius: 66.67% }
99 | .border-radius-70-percent{ border-radius: 70% }
100 | .border-radius-75-percent{ border-radius: 75% }
101 | .border-radius-80-percent{ border-radius: 80% }
102 | .border-radius-90-percent{ border-radius: 90% }
103 | .border-radius-100-percent{ border-radius: 100% }
104 |
--------------------------------------------------------------------------------
/design-ingredients/_borders.scss:
--------------------------------------------------------------------------------
1 | //Borders
2 | .border-bottom-1-black { border-bottom: 1px solid black;}
--------------------------------------------------------------------------------
/design-ingredients/_color.scss:
--------------------------------------------------------------------------------
1 | //2. Colors
2 | //COLORS from Open Colors
3 |
4 | /*1. GRAY*/
5 | .gray-00 { color: #f8f9fa; } //Lightest
6 | .gray-02 { color: #e9ecef; } //Lighter
7 | .gray-04 { color: #ced4da; } //Light
8 |
9 | .gray-05 { color: #adb5bd; } //Dark
10 | .gray-07 { color: #495057; } //Darker
11 | .gray-09 { color: #212529; } //Darkest
12 |
13 |
14 | //2. RED
15 | .red-00 { color: #fff5f5; } //Lightest
16 | .red-02 { color: #ffc9c9; } //Lighter
17 | .red-04 { color: #ff8787; } //Light
18 |
19 | .red-05 { color: #ff6b6b; } //Dark
20 | .red-07 { color: #f03e3e; } //Darker
21 | .red-09 { color: #c92a2a; } //Darkest
22 |
23 | //3. PINK
24 | .pink-00 { color: #fff0f6; } //Lightest
25 | .pink-02 { color: #fcc2d7; } //Lighter
26 | .pink-04 { color: #f783ac; } //Light
27 |
28 |
29 | .pink-05 { color: #f06595; } //Primary
30 | .pink-07 { color: #d6336c; } //Dark
31 | .pink-09 { color: #a61e4d; } //Darker
32 |
33 |
34 | // 4. GRAPE / ( MAGENTA / FUCHSIA ) Grape-Zabibu,
35 | .grape-00 { color: #f8f0fc; } //Lightest
36 | .grape-02 { color: #eebefa; } //Lighter
37 | .grape-04 { color: #da77f2; } //Light
38 |
39 | .grape-05 { color: #cc5de8; } //Dark
40 | .grape-07 { color: #ae3ec9; } //Darker
41 | .grape-09 { color: #862e9c; } //Darkest
42 |
43 | .magenta-00 { color: #f8f0fc; } //Lightest
44 | .magenta-02 { color: #eebefa; } //Lighter
45 | .magenta-04 { color: #da77f2; } //Light
46 |
47 | .magenta-05 { color: #cc5de8; } //Dark
48 | .magenta-07 { color: #ae3ec9; } //Darker
49 | .magenta-09 { color: #862e9c; } //Darkest
50 |
51 | .fuchsia-00 { color: #f8f0fc; } //Lighter
52 | .fuchsia-02 { color: #eebefa; } //Light
53 | .fuchsia-04 { color: #da77f2; } //Light
54 |
55 | .fuchsia-05 { color: #cc5de8; } //Dark
56 | .fuchsia-07 { color: #ae3ec9; } //Darker
57 | .fuchsia-09 { color: #862e9c; } //Darkest
58 |
59 | //5. VIOLET /( PURPLE )(violet-Urujuani) (Purple-Zambarau)
60 | .violet-00 { color: #f3f0ff; } //Lightest
61 | .violet-02 { color: #d0bfff; } //Lighter
62 | .violet-04 { color: #9775fa; } //Light
63 |
64 | .violet-05 { color: #845ef7; } //Dark
65 | .violet-07 { color: #7048e8; } //Darker
66 | .violet-09 { color: #5f3dc4; } //Darkest
67 |
68 | //Open Colors doesn't have purple...but violet is pretty close to purple. So purple is violet in this instance.
69 | .purple-00 { color: #f3f0ff; } //Lighter
70 | .purple-02 { color: #d0bfff; } //Light
71 | .purple-04 { color: #9775fa; } //Light
72 |
73 | .purple-05 { color: #845ef7; } //Dark
74 | .purple-07 { color: #7048e8; } //Darker
75 | .purple-09 { color: #5f3dc4; } //Darkest
76 |
77 |
78 | //6. INDIGO (Indigo - Nili, Bluu Iliyoiva)
79 | .indigo-00 { color: #edf2ff; } //Lightest
80 | .indigo-02 { color: #bac8ff; } //Lighter
81 | .indigo-04 { color: #748ffc; } //Light
82 |
83 | .indigo-05 { color: #5c7cfa; } //Dark
84 | .indigo-07 { color: #4263eb; } //Darker
85 | .indigo-09 { color: #364fc7; } //Darkest
86 |
87 | //7. BLUE
88 | .blue-00 { color: #e7f5ff; } //Lightest
89 | .blue-02 { color: #a5d8ff; } //Lighter
90 | .blue-04 { color: #4dabf7; } //Light
91 |
92 | .blue-05 { color: #339af0; } //Dark
93 | .blue-07 { color: #1c7ed6; } //Darker
94 | .blue-09 { color: #1864ab; } //Darkest
95 |
96 | //8. CYAN
97 | .cyan-00 { color: #e3fafc; } //Lightest
98 | .cyan-02 { color: #99e9f2; } //Lighter
99 | .cyan-04 { color: #3bc9db; } //Light
100 |
101 | .cyan-05 { color: #22b8cf; } //Dark
102 | .cyan-07 { color: #1098ad; } //Darker
103 | .cyan-09 { color: #0b7285; } //Darkest
104 |
105 | //9. TEAL
106 | .teal-00 { color: #e6fcf5; } //Lightest
107 | .teal-02 { color: #96f2d7; } //Lighter
108 | .teal-04 { color: #38d9a9; } //Light
109 |
110 | .teal-05 { color: #20c997; } //Dark
111 | .teal-07 { color: #0ca678; } //Darker
112 | .teal-09 { color: #087f5b; } //Darkest
113 |
114 | //10. GREEN
115 | .green-00 { color: #ebfbee; } //Lighter
116 | .green-02 { color: #b2f2bb; } //Light
117 | .green-04 { color: #69db7c; } //Light
118 |
119 |
120 | .green-05 { color: #51cf66; } //Dark
121 | .green-07 { color: #37b24d; } //Darker
122 | .green-09 { color: #2b8a3e; } //Darkest
123 |
124 | //11. LIME
125 | .lime-00 { color: #f4fce3; } //Lighter
126 | .lime-02 { color: #d8f5a2; } //Light
127 | .lime-04 { color: #a9e34b; } //Light
128 |
129 |
130 | .lime-05 { color: #94d82d; } //Dark
131 | .lime-07 { color: #74b816; } //Darker
132 | .lime-09 { color: #5c940d; } //Darkest
133 |
134 |
135 | //12. YELLOW
136 | .yellow-00 { color: #fff9db; } //Lightest
137 | .yellow-02 { color: #ffec99; } //Lighter
138 | .yellow-04 { color: #ffd43b; } //Light
139 |
140 | .yellow-05 { color: #fcc419; } //Dark
141 | .yellow-07 { color: #f59f00; } //Darker
142 | .yellow-09 { color: #e67700; } //Darkest
143 |
144 | //13. ORANGE
145 | .orange-00 { color: #fff4e6; } //Lightest
146 | .orange-02 { color: #ffd8a8; } //Lighter
147 | .orange-04 { color: #ffa94d; } //Light
148 |
149 | .orange-05 { color: #ff922b; } //Dark
150 | .orange-07 { color: #f76707; } //Darker
151 | .orange-09 { color: #d9480f; } //Darkest
152 |
153 | // 14. (I will add the fourteenth color)
154 |
155 | //Extra colors
156 | .white {color: #fff}
157 | .black {color: #000}
158 | .gray {color: #333}
--------------------------------------------------------------------------------
/design-ingredients/_flexbox.scss:
--------------------------------------------------------------------------------
1 | //FLEX
2 | .display-flex { display: flex}
3 | .display-inline-flex { display: inline-flex}
4 |
5 |
6 | //Flex Direction
7 | .flex-row { flex-direction: row}
8 | .flex-row-reverse { flex-direction: row-reverse}
9 | .flex-column { flex-direction: column}
10 | .flex-column-reverse { flex-direction: column-reverse}
11 |
12 |
13 | //Flex Align Items (For single row flex items)
14 | .flex-align-stretch { align-items: stretch; }
15 | .flex-align-start { align-items: flex-start; }
16 | .flex-align-end { align-items: flex-end; }
17 | .flex-align-baseline { align-items: baseline; }
18 | .flex-align-center { align-items: center;}
19 |
20 |
21 | //Flex Justify Content - (Flex Container)
22 | .flex-justify-between {justify-content: space-between;}
23 | .flex-justify-around { justify-content: space-around; }
24 | .flex-justify-evenly { justify-content: space-evenly; }
25 | .flex-justify-start { justify-content: flex-start; }
26 | .flex-justify-end { justify-content: flex-end; }
27 | .flex-justify-center { justify-content: center; } //Just to clarify that this centering happens horizontally (By Default)
28 |
29 |
30 | //Flex Wrap
31 | .flex-wrap { flex-wrap: wrap;}
32 | .flex-wrap-reverse { flex-wrap: wrap-reverse;}
33 | .flex-no-wrap { flex-wrap: nowrap;}
34 |
35 | //Align Content on on multi-line flexible containers (Flex items in multiple lines) - Rarely used property in Flexbox
36 | .flex-content-center { align-content: center; }
37 | .flex-content-start { align-content: flex-start; }
38 | .flex-content-end { align-content: flex-end; }
39 | .flex-content-between { align-content: space-between; }
40 | .flex-content-around { align-content: space-around; }
41 | .flex-content-evenly { align-content: space-evenly; }
42 | .flex-content-stretch { align-content: stretch}
43 |
44 |
45 | //Align Self (flex Item)
46 | .flex-self-auto { align-self: auto; }
47 | .flex-self-end { align-self: flex-end; }
48 | .flex-self-start { align-self: flex-start; }
49 | .flex-self-stretch { align-self: stretch; }
50 | .flex-self-center { align-self: center; }
51 | .flex-self-baseline { align-self: baseline; }
52 |
53 | //FLEX ORDER
54 | .flex-order-0 { order: 0} //default
55 | .flex-order-1 { order: 1}
56 | .flex-order-2 { order: 2}
57 | .flex-order-3 { order: 3}
58 | .flex-order-minus-1 { order: -1}
59 |
60 |
61 | // Flex Width ( Basis | Shrink | Grow):
62 | // A flex-item is forced to grow to fill up the remaining width
63 |
64 | .flex-grow-0 { flex-grow: 0 } //default
65 | .flex-grow-1 { flex-grow: 1 }
66 | .flex-grow-2 {flex-grow: 2 } /*will occupy double the space*/
67 | .flex-grow-3 {flex-grow: 3 } /*will occupy three times the space*/
68 |
69 |
70 | // A flex-item is forced not to shrink
71 | .flex-shrink-1 { flex-shrink: 1 } //default
72 | .flex-shrink-0 { flex-shrink: 0 }
73 |
74 | //Flex Grow and Shrink shortcuts
75 | .flex-grow-0-shrink-1 {
76 | flex-grow: 0;
77 | flex-shrink: 1;
78 | }
79 |
80 | .flex-grow-1-shrink-0 {
81 | flex-grow: 1;
82 | flex-shrink: 0;
83 | }
84 |
85 | //values 10%, 20%, 25%, 30%, 33.33%, 40%, 50%, 60%, 66.67%, 70%, 75%, 80%, 90%, 100%
86 | //FLEX WIDTH
87 | //A column (flex item) with 50% width
88 | //Flex-basis property for a flex item is similar to width when flex-direction is row
89 | //and similar to height when flex-direction is column .
90 | // Main size system
91 | .flex-basis-0 {
92 | flex-basis: 0;
93 | }
94 |
95 | .flex-basis-20 {
96 | flex-basis: 2rem;
97 | }
98 |
99 | .flex-basis-40 {
100 | flex-basis: 4rem;
101 | }
102 |
103 | .flex-basis-80 {
104 | flex-basis: 8rem;
105 | }
106 |
107 | .flex-basis-120 {
108 | flex-basis: 12rem;
109 | }
110 |
111 | .flex-basis-160 {
112 | flex-basis: 16rem;
113 | }
114 |
115 | .flex-basis-240 {
116 | flex-basis: 24rem;
117 | }
118 |
119 | .flex-basis-320 {
120 | flex-basis: 32rem;
121 | }
122 |
123 | .flex-basis-480 {
124 | flex-basis: 48rem;
125 | }
126 |
127 | .flex-basis-640 {
128 | flex-basis: 64rem;
129 | }
130 |
131 | .flex-basis-800 {
132 | flex-basis: 80rem;
133 | }
134 |
135 | .flex-basis-960 {
136 | flex-basis: 96rem;
137 | }
138 |
139 | .flex-basis-1280 {
140 | flex-basis: 128rem;
141 | }
142 |
143 | // Extra values
144 | .flex-basis-100 {
145 | flex-basis: 10rem;
146 | }
147 |
148 | .flex-basis-200 {
149 | flex-basis: 20rem;
150 | }
151 |
152 | .flex-basis-400 {
153 | flex-basis: 40rem;
154 | }
155 |
156 | .flex-basis-560 {
157 | flex-basis: 56rem;
158 | }
159 |
160 | .flex-basis-720 {
161 | flex-basis: 72rem;
162 | }
163 |
164 | .flex-basis-1040 {
165 | flex-basis: 104rem;
166 | }
167 |
168 | .flex-basis-1120 {
169 | flex-basis: 112rem;
170 | }
171 |
172 | .flex-basis-1200 {
173 | flex-basis: 120rem;
174 | }
175 |
176 | .flex-basis-10-percent{ flex-basis: 10% }
177 | .flex-basis-20-percent{ flex-basis: 20% }
178 | .flex-basis-25-percent{ flex-basis: 25% }
179 | .flex-basis-30-percent{ flex-basis: 30% }
180 | .flex-basis-33-percent{ flex-basis: 33.33% }
181 | .flex-basis-40-percent{ flex-basis: 40% }
182 | .flex-basis-50-percent{ flex-basis: 50% }
183 | .flex-basis-60-percent{ flex-basis: 60% }
184 | .flex-basis-66-percent{ flex-basis: 66.67% }
185 | .flex-basis-70-percent{ flex-basis: 70% }
186 | .flex-basis-75-percent{ flex-basis: 75% }
187 | .flex-basis-80-percent{ flex-basis: 80% }
188 | .flex-basis-90-percent{ flex-basis: 90% }
189 | .flex-basis-100-percent{ flex-basis: 100% }
--------------------------------------------------------------------------------
/design-ingredients/_grid.scss:
--------------------------------------------------------------------------------
1 |
2 |
3 | //Grid Layout (Needs grid container (parent) + Grid item (child)
4 | /*
5 | .grid {
6 | display: grid;
7 | gap: 9.6rem; //applies both to row and column
8 | }*/
9 |
10 | .display-grid {
11 | display: grid;
12 | }
13 |
14 | .display-inline-grid {
15 | display: inline-grid;
16 | }
17 |
18 | .grid {
19 | display: grid;
20 | column-gap: 6.4rem;
21 | row-gap: 9.6rem;
22 | }
23 |
24 | //Grid Center
25 | .grid-center-vertical { align-items: center}
26 | //Grid Align-Items: Controls Vertical Position within the row
27 | //control the placement of individual elements within each cell.
28 | /*
29 | The property align-items allows us to vertically align the content within the rows, while
30 | the previous property align-content allows us to vertically space out the entire rows.
31 | */
32 | /*
33 | To center align vertically within each row
34 | */
35 | .grid-align-center { align-items: stretch}
36 | .grid-align-start { align-items: start}
37 | .grid-align-end { align-items: end}
38 | .grid-align-center { align-items: center}
39 |
40 |
41 | ////Grid Alignment: Justify-Items (Justify Items applies to the child elements(within its cell), without affecting the shape of the grid
42 | //Grid Justify Items = horizontally align the content within the columns as opposed to justify-content which allows us to horizontally space
43 | //out the entire columns
44 | /*
45 | To center align horizontally within each column
46 | */
47 | // Applied to the grid container
48 | .justify-items-stretch
49 | { justify-items: stretch; } //default
50 | .justify-items-start
51 | { justify-items: start; }
52 | .justify-items-end
53 | { justify-items: end; }
54 | .justify-items-center
55 | { justify-items: center; }
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 | //Grid Align Rows = used to align the rows in the grid, container height has to be specified for it to work, otherwise they're just packed together
66 | // alignment of the grid (grid items) within the grid container , aligns the grid along the block (column) axis
67 | //In Grid, the property align-content is used to control spacing of the grid items along the block axis - which is the vertical direction
68 | // As a shortcut, what justify content does to horizontal direction, align content does to vertical direction
69 | // This property only works when:
70 | /*
71 | 1.The grid container has a height value that is greater than the sum of individual
72 | row heights
73 | 2. And when none of the grid items has a height specified in fr units
74 | */
75 | // Applied to the grid container
76 | .grid-content-start
77 | { align-content: start; }
78 | .grid-content-end
79 | { align-content: end; }
80 | .grid-content-center
81 | { align-content: center; }
82 | .grid-content-stretch
83 | { align-content: stretch; }
84 | .grid-content-around
85 | { align-content: space-around; }
86 | .grid-content-between
87 | { align-content: space-between; }
88 | .grid-content-evenly
89 | { align-content: space-evenly; }
90 |
91 |
92 | //Grid Alignment: Justify-Content (Justify Content applies to the grid structure, changing columns (In Row Axis - Horizontal Direction)
93 | .grid-justify-center { justify-content: center;}
94 | .grid-justify-start { justify-content: start;}
95 | .grid-justify-end { justify-content: end;}
96 |
97 | //Grid alignment distribution - when we have multiple columns (In Row Axis - Horizontal Direction)
98 | .grid-justify-between { justify-content: space-between}
99 | .grid-justify-around { justify-content: space-around}
100 | .grid-justify-evenly { justify-content: space-evenly}
101 | .grid-justify-stretch { justify-content: stretch} //default
102 |
103 |
--------------------------------------------------------------------------------
/design-ingredients/_layout.scss:
--------------------------------------------------------------------------------
1 | //11. Layouts
2 |
3 | //Positions
4 | .position-relative {
5 | position: relative;
6 | }
7 | .position-absolute {
8 | position: absolute;
9 | }
10 | .position-fixed {
11 | position: fixed;
12 | }
13 |
14 | .position-sticky {
15 | position: sticky;
16 | }
17 |
18 | .top-0 {top: 0;}
19 | .top-2 {top: .2rem;}
20 | .top-4 {top: .4rem;}
21 | .top-8 {top: .8rem;}
22 | .top-12 {top: 1.2rem;}
23 | .top-16 {top: 1.6rem;}
24 | .top-24 {top: 2.4rem;}
25 |
26 | .bottom-0 {bottom: 0;}
27 |
28 | .left-0 {left: 0;}
29 |
30 | .right-0 {right: 0;}
31 |
32 | //Overflows
33 | .overflow-hidden { overflow: hidden;}
34 |
35 | //Displays
36 | .display-block { display: block;}
37 | .display-inline { display: inline;}
38 | .display-inline-block {display: inline-block;}
39 | .display-none { display: none;}
40 |
41 | //Table - will be explored more later
42 | .display-table { display: table;}
43 |
44 |
45 | //Grid Templates Columns
46 | .display-grid-columns-25percent-75percent {
47 | display: grid;
48 | grid-template-columns: 25% 75%;
49 | }
50 |
51 | .grid-columns-25-percent-75-percent {
52 | grid-template-columns: 25% 75%;
53 | }
54 |
55 | .display-grid-columns-50percent-50percent {
56 | display: grid;
57 | grid-template-columns: 50% 50%;
58 | }
59 |
60 | .grid-columns-50-percent-50-percent {
61 | grid-template-columns: 50% 50%;
62 | }
63 |
64 | .display-grid-columns-1fr-2fr {
65 | display: grid;
66 | grid-template-columns: 1fr 2fr;
67 | }
68 |
69 | .grid-columns-1fr-2fr {
70 | grid-template-columns: 1fr 2fr;
71 | }
72 | .display-grid-columns-1fr-1fr {
73 | display: grid;
74 | grid-template-columns: 1fr 1fr;
75 | }
76 |
77 | .grid-columns-1fr-1fr {
78 | grid-template-columns: 1fr 1fr;
79 | }
80 |
81 | .display-grid-columns-200-2fr-1fr {
82 | display: grid;
83 | grid-template-columns: 200px 2fr 1fr;
84 | }
85 |
86 | .grid-columns-200-2fr-1fr {
87 | grid-template-columns: 200px 2fr 1fr;
88 | }
89 |
90 | .display-grid-columns-200-1fr { //a fixed sidebar, with content on the right taking remaining space
91 | display: grid;
92 | grid-template-columns: 20rem 1fr;
93 | }
94 | .grid-columns-1fr-auto { //first column as much space, second column auto according to its content
95 | grid-template-columns: 1fr auto;
96 | }
97 |
98 | .display-grid-1fr-auto { //a fixed sidebar, with content on the right taking remaining space
99 | display: grid;
100 | grid-template-columns: 1fr auto;
101 | }
102 |
103 | .grid-columns-200-1fr {
104 | grid-template-columns: 20rem 1fr;
105 | }
106 |
107 | .grid-columns-250-1fr-1fr-1fr-1fr-1fr {
108 | grid-template-columns: 250px 1fr 1fr 1fr 1fr 1fr;
109 | }
110 |
111 | .grid-columns-250-repeat-5-fr {
112 | grid-template-columns: 250px repeat(5, 1fr);
113 | }
114 |
115 | .grid-columns-repeat-4-200 {
116 | grid-template-columns: repeat(4, 200px);
117 | }
118 |
119 |
120 |
121 | //Grid Template Rows
122 | .display-grid-rows-25percent-75percent {
123 | display: grid;
124 | grid-template-columns: 25% 75%;
125 | }
126 |
127 | .grid-rows-25-percent-75-percent {
128 | grid-template-columns: 25% 75%;
129 | }
130 | .display-grid-rows-50percent-50percent {
131 | display: grid;
132 | grid-template-columns: 50% 50%;
133 | }
134 |
135 | .grid-rows-50-percent-50-percent {
136 | grid-template-columns: 50% 50%;
137 | }
138 |
139 | .display-grid-rows-auto-1fr-auto { //use case: if you want the content in the middle to expand...and the footer to be at the very bottom, you may also need to set min-height of 100vh
140 | display: grid;
141 | grid-template-rows: auto 1fr auto;
142 | }
143 | .grid-rows-auto-1fr-auto {
144 | grid-template-rows: auto 1fr auto;
145 | }
146 |
147 | .display-grid-rows-1fr-2fr {
148 | display: grid;
149 | grid-template-rows: 1fr 2fr;
150 | }
151 |
152 | .grid-rows-1fr-2fr {
153 | grid-template-rows: 1fr 2fr;
154 | }
155 | .display-grid-rows-1fr-1fr {
156 | display: grid;
157 | grid-template-rows: 1fr 1fr;
158 | }
159 |
160 | .grid-rows-1fr-1fr {
161 | grid-template-rows: 1fr 1fr;
162 | }
163 |
164 | .display-grid-rows-1fr-1fr-1fr { //one column three rows
165 | display: grid;
166 | grid-template-rows: 1fr 1fr 1fr;
167 | }
168 |
169 | .grid-rows-1fr-1fr-1fr {
170 | grid-template-rows: 1fr 1fr 1fr;
171 | }
172 |
173 | .display-grid-rows-200-2fr-1fr {
174 | display: grid;
175 | grid-template-rows: 200px 2fr 1fr;
176 | }
177 |
178 | .grid-rows-200-2fr-1fr {
179 | grid-template-rows: 200px 2fr 1fr;
180 | }
181 |
182 | .display-grid-rows-64-1fr-100 {
183 | display: grid;
184 | grid-template-rows: 64px 1fr 100px;
185 | }
186 |
187 | .display-grid-rows-64-1fr-100-full-page {
188 | display: grid;
189 | grid-template-rows: 64px 1fr 100px;
190 | min-height: 100%; //use this if you want the grid to fill the whole page
191 | }
192 |
193 | .grid-rows-64-1fr-100 {
194 | grid-template-rows: 64px 1fr 100px;
195 | }
196 | //
197 |
198 |
199 | .grid-flow-row { grid-auto-flow: row; } //default - grid has multiple rows
200 | .grid-flow-column { grid-auto-flow: column; } //grid has multiple columns
201 |
202 | //consider auto too, auto sizes columns based on content (content width)
203 | .grid-4-columns-auto {
204 | grid-template-columns: repeat(4, auto);
205 | }
206 |
207 | .display-grid-4-columns-auto {
208 | display: grid;
209 | grid-template-columns: repeat(4, auto);
210 | }
211 |
212 | .grid-2-columns {
213 | grid-template-columns: 1fr 1fr;
214 | }
215 |
216 | .grid-2-columns {
217 | grid-template-columns: repeat(2, 1fr); //same as writing - 1fr 1fr
218 | }
219 |
220 | .grid-3-columns {
221 | grid-template-columns: repeat(3, 1fr);
222 | }
223 |
224 | .grid-4-columns {
225 | grid-template-columns: repeat(4, 1fr);
226 | }
227 | .grid-5-columns {
228 | grid-template-columns: repeat(5, 1fr);
229 | }
230 | .grid-6-columns {
231 | grid-template-columns: repeat(6, 1fr);
232 | }
233 | .grid-7-columns {
234 | grid-template-columns: repeat(7, 1fr);
235 | }
236 |
237 | .display-grid-2-columns {
238 | display: grid;
239 | grid-template-columns: 1fr 1fr;
240 | }
241 |
242 | .display-grid-2-columns {
243 | display: grid;
244 | grid-template-columns: repeat(2, 1fr); //same as writing - 1fr 1fr
245 | }
246 |
247 | .display-grid-3-columns {
248 | display: grid;
249 | grid-template-columns: repeat(3, 1fr);
250 | }
251 |
252 | .display-grid-4-columns {
253 | display: grid;
254 | grid-template-columns: repeat(4, 1fr);
255 | }
256 | .display-grid-5-columns {
257 | display: grid;
258 | grid-template-columns: repeat(5, 1fr);
259 | }
260 | .display-grid-6-columns {
261 | display: grid;
262 | grid-template-columns: repeat(6, 1fr);
263 | }
264 | .display-grid-7-columns {
265 | display: grid;
266 | grid-template-columns: repeat(7, 1fr);
267 | }
268 |
269 |
270 | .grid-2-rows {
271 | grid-template-rows: repeat(2, 1fr);
272 | }
273 | .grid-3-rows {
274 | grid-template-rows: repeat(3, 1fr);
275 | }
276 |
277 | .grid-4-rows {
278 | grid-template-rows: repeat(4, 1fr);
279 | }
280 | .grid-5-rows {
281 | grid-template-rows: repeat(5, 1fr);
282 | }
283 | .grid-6-rows {
284 | grid-template-rows: repeat(6, 1fr);
285 | }
286 | .grid-7-rows {
287 | grid-template-rows: repeat(7, 1fr);
288 | }
289 |
290 | .display-grid-2-rows {
291 | display: grid;
292 | grid-template-rows: repeat(2, 1fr);
293 | }
294 | .display-grid-3-rows {
295 | display: grid;
296 | grid-template-rows: repeat(3, 1fr);
297 | }
298 |
299 | .display-grid-4-rows {
300 | display: grid;
301 | grid-template-rows: repeat(4, 1fr);
302 | }
303 | .display-grid-5-rows {
304 | display: grid;
305 | grid-template-rows: repeat(5, 1fr);
306 | }
307 | .display-grid-6-rows {
308 | display: grid;
309 | grid-template-rows: repeat(6, 1fr);
310 | }
311 | .display-grid-7-rows {
312 | display: grid;
313 | grid-template-rows: repeat(7, 1fr);
314 | }
315 |
316 |
317 |
318 |
319 |
320 |
321 |
322 | .grid-self-center { align-self: center}
323 |
324 |
325 |
326 |
327 | //Grid Place Content
328 | /*
329 | The property place-content is a shorthand property in Grid that allows you to control
330 | the spacing of grid items along both the block and inline axes at once. It can specified with
331 | one or two values. (Align content + justify content)
332 | */
333 | .place-content-center { place-content: center } // the value is assigned to both align content and justify content
334 | .place-content-start { place-content: start}
335 | .place-content-end { place-content: end}
336 | .place-content-between { place-content: space-between}
337 | .place-content-around { place-content: space-around}
338 | .place-content-evenly { place-content: space-evenly}
339 | .place-content-stretch { place-content: stretch}
340 |
341 | .grid-place-center-between { place-content: center space-between} //shortcut, first value is align content, second is justify content
342 |
343 |
344 | /*
345 | GRID PLACE ITEMS
346 | The property place-items is a shorthand property in Grid that allows you to align items
347 | along both the block and inline directions at once.
348 | . It can specified with one or two values. (Align Items + Justify items)
349 | */
350 | .place-items-center { place-items: center}
351 |
352 |
353 |
354 |
355 |
356 |
357 |
358 | /*
359 | GRID COLUMN START It specifies the item's start position.
360 | */
361 | .column-start-1 { grid-column-start: 1}
362 | .column-start-2 { grid-column-start: 2}
363 | .column-start-3 { grid-column-start: 3}
364 | .column-start-4 { grid-column-start: 4}
365 | .column-start-5 { grid-column-start: 5}
366 | .column-start-minus { grid-column-start: -1}
367 |
368 | /*
369 | GRID COLUMN END It specifies the item's end position.
370 | */
371 | .column-end-1 { grid-column-end: 1}
372 | .column-end-2 { grid-column-end: 2}
373 | .column-end-3 { grid-column-end: 3}
374 | .column-end-4 { grid-column-end: 4}
375 | .column-end-5 { grid-column-end: 5}
376 | .column-end-minus { grid-column-end: -1}
377 |
378 |
379 | //Flex Flow
380 | .flex-row-wrap { flex-flow: row wrap; }
381 | .flex-column-wrap { flex-flow: column wrap; }
382 |
383 |
384 | //FLEX Centering Vertically and Horizontally (whatever is inside a container)
385 | .display-flex-center-both {
386 | display: flex;
387 | align-items: center;
388 | justify-content:center;
389 | }
390 |
391 | //End Shortcut
392 | .display-flex-end-both {
393 | display: flex;
394 | align-items: flex-end;
395 | justify-content: flex-end;
396 | }
397 |
398 |
399 | //Width
400 | .width-max-content { width: max-content}
401 | .width-min-content { width: min-content}
402 | .width-fit-content { width: fit-content}
403 |
404 |
405 |
406 | //Min Height min-height-vh: min-heigheight-viewport height
407 | .min-height-100vh { min-height: 100vh; }
408 | .min-height-90vh { min-height: 90vh; }
409 | .min-height-80vh { min-height: 80vh; }
410 | .min-height-70vh { min-height: 70vh; }
411 | .min-height-60vh { min-height: 60vh; }
412 | .min-height-50vh { min-height: 50vh; }
413 | .min-height-40vh { min-height: 40vh; }
414 | .min-height-35vh { min-height: 35vh; }
415 | .min-height-30vh { min-height: 30vh; }
416 |
417 |
--------------------------------------------------------------------------------
/design-ingredients/_size.scss:
--------------------------------------------------------------------------------
1 | // Main size system
2 | .width-0 {
3 | width: 0;
4 | }
5 |
6 | .width-20 {
7 | width: 2rem;
8 | }
9 |
10 | .width-40 {
11 | width: 4rem;
12 | }
13 |
14 | .width-80 {
15 | width: 8rem;
16 | }
17 |
18 | .width-120 {
19 | width: 12rem;
20 | }
21 |
22 | .width-160 {
23 | width: 16rem;
24 | }
25 |
26 | .width-240 {
27 | width: 24rem;
28 | }
29 |
30 | .width-320 {
31 | width: 32rem;
32 | }
33 |
34 | .width-480 {
35 | width: 48rem;
36 | }
37 |
38 | .width-640 {
39 | width: 64rem;
40 | }
41 |
42 | .width-800 {
43 | width: 80rem;
44 | }
45 |
46 | .width-960 {
47 | width: 96rem;
48 | }
49 |
50 | .width-1280 {
51 | width: 128rem;
52 | }
53 |
54 | // Extra values
55 | .width-100 {
56 | width: 10rem;
57 | }
58 |
59 | .width-200 {
60 | width: 20rem;
61 | }
62 |
63 | .width-400 {
64 | width: 40rem;
65 | }
66 |
67 | .width-560 {
68 | width: 56rem;
69 | }
70 |
71 | .width-720 {
72 | width: 72rem;
73 | }
74 |
75 | .width-1040 {
76 | width: 104rem;
77 | }
78 |
79 | .width-1120 {
80 | width: 112rem;
81 | }
82 |
83 | .width-1200 {
84 | width: 120rem;
85 | }
86 |
87 | // Percentage values
88 | .width-10-percent {
89 | width: 10%;
90 | }
91 |
92 | .width-20-percent {
93 | width: 20%;
94 | }
95 |
96 | .width-25-percent {
97 | width: 25%;
98 | }
99 |
100 | .width-30-percent {
101 | width: 30%;
102 | }
103 |
104 | .width-33-percent {
105 | width: 33.33%;
106 | }
107 |
108 | .width-40-percent {
109 | width: 40%;
110 | }
111 |
112 | .width-50-percent {
113 | width: 50%;
114 | }
115 |
116 | .width-60-percent {
117 | width: 60%;
118 | }
119 |
120 | .width-66-percent {
121 | width: 66.67%;
122 | }
123 |
124 | .width-70-percent {
125 | width: 70%;
126 | }
127 |
128 | .width-75-percent {
129 | width: 75%;
130 | }
131 |
132 | .width-80-percent {
133 | width: 80%;
134 | }
135 |
136 | .width-90-percent {
137 | width: 90%;
138 | }
139 |
140 | .width-100-percent {
141 | width: 100%;
142 | }
143 |
144 | // Main size system
145 | .height-0 {
146 | height: 0;
147 | }
148 |
149 | .height-20 {
150 | height: 2rem;
151 | }
152 |
153 | .height-40 {
154 | height: 4rem;
155 | }
156 |
157 | .height-80 {
158 | height: 8rem;
159 | }
160 |
161 | .height-120 {
162 | height: 12rem;
163 | }
164 |
165 | .height-160 {
166 | height: 16rem;
167 | }
168 |
169 | .height-240 {
170 | height: 24rem;
171 | }
172 |
173 | .height-320 {
174 | height: 32rem;
175 | }
176 |
177 | .height-480 {
178 | height: 48rem;
179 | }
180 |
181 | .height-640 {
182 | height: 64rem;
183 | }
184 |
185 | .height-800 {
186 | height: 80rem;
187 | }
188 |
189 | .height-960 {
190 | height: 96rem;
191 | }
192 |
193 | .height-1280 {
194 | height: 128rem;
195 | }
196 |
197 | // Extra values
198 | .height-100 {
199 | height: 10rem;
200 | }
201 |
202 | .height-200 {
203 | height: 20rem;
204 | }
205 |
206 | .height-400 {
207 | height: 40rem;
208 | }
209 |
210 | .height-560 {
211 | height: 56rem;
212 | }
213 |
214 | .height-720 {
215 | height: 72rem;
216 | }
217 |
218 | .height-1040 {
219 | height: 104rem;
220 | }
221 |
222 | .height-1120 {
223 | height: 112rem;
224 | }
225 |
226 | .height-1200 {
227 | height: 120rem;
228 | }
229 |
230 | // Percentage values
231 | .height-10-percent {
232 | height: 10%;
233 | }
234 |
235 | .height-20-percent {
236 | height: 20%;
237 | }
238 |
239 | .height-25-percent {
240 | height: 25%;
241 | }
242 |
243 | .height-30-percent {
244 | height: 30%;
245 | }
246 |
247 | .height-33-percent {
248 | height: 33.33%;
249 | }
250 |
251 | .height-40-percent {
252 | height: 40%;
253 | }
254 |
255 | .height-50-percent {
256 | height: 50%;
257 | }
258 |
259 | .height-60-percent {
260 | height: 60%;
261 | }
262 |
263 | .height-66-percent {
264 | height: 66.67%;
265 | }
266 |
267 | .height-70-percent {
268 | height: 70%;
269 | }
270 |
271 | .height-75-percent {
272 | height: 75%;
273 | }
274 |
275 | .height-80-percent {
276 | height: 80%;
277 | }
278 |
279 | .height-90-percent {
280 | height: 90%;
281 | }
282 |
283 | .height-100-percent {
284 | height: 100%;
285 | }
286 |
287 | // Main size system
288 | .min-width-0 {
289 | min-width: 0;
290 | }
291 |
292 | .min-width-20 {
293 | min-width: 2rem;
294 | }
295 |
296 | .min-width-40 {
297 | min-width: 4rem;
298 | }
299 |
300 | .min-width-80 {
301 | min-width: 8rem;
302 | }
303 |
304 | .min-width-120 {
305 | min-width: 12rem;
306 | }
307 |
308 | .min-width-160 {
309 | min-width: 16rem;
310 | }
311 |
312 | .min-width-240 {
313 | min-width: 24rem;
314 | }
315 |
316 | .min-width-320 {
317 | min-width: 32rem;
318 | }
319 |
320 | .min-width-480 {
321 | min-width: 48rem;
322 | }
323 |
324 | .min-width-640 {
325 | min-width: 64rem;
326 | }
327 |
328 | .min-width-800 {
329 | min-width: 80rem;
330 | }
331 |
332 | .min-width-960 {
333 | min-width: 96rem;
334 | }
335 |
336 | .min-width-1280 {
337 | min-width: 128rem;
338 | }
339 |
340 | // Extra values
341 | .min-width-100 {
342 | min-width: 10rem;
343 | }
344 |
345 | .min-width-200 {
346 | min-width: 20rem;
347 | }
348 |
349 | .min-width-400 {
350 | min-width: 40rem;
351 | }
352 |
353 | .min-width-560 {
354 | min-width: 56rem;
355 | }
356 |
357 | .min-width-720 {
358 | min-width: 72rem;
359 | }
360 |
361 | .min-width-1040 {
362 | min-width: 104rem;
363 | }
364 |
365 | .min-width-1120 {
366 | min-width: 112rem;
367 | }
368 |
369 | .min-width-1200 {
370 | min-width: 120rem;
371 | }
372 |
373 | // Percentage values
374 | .min-width-10-percent {
375 | min-width: 10%;
376 | }
377 |
378 | .min-width-20-percent {
379 | min-width: 20%;
380 | }
381 |
382 | .min-width-25-percent {
383 | min-width: 25%;
384 | }
385 |
386 | .min-width-30-percent {
387 | min-width: 30%;
388 | }
389 |
390 | .min-width-33-percent {
391 | min-width: 33.33%;
392 | }
393 |
394 | .min-width-40-percent {
395 | min-width: 40%;
396 | }
397 |
398 | .min-width-50-percent {
399 | min-width: 50%;
400 | }
401 |
402 | .min-width-60-percent {
403 | min-width: 60%;
404 | }
405 |
406 | .min-width-66-percent {
407 | min-width: 66.67%;
408 | }
409 |
410 | .min-width-70-percent {
411 | min-width: 70%;
412 | }
413 |
414 | .min-width-75-percent {
415 | min-width: 75%;
416 | }
417 |
418 | .min-width-80-percent {
419 | min-width: 80%;
420 | }
421 |
422 | .min-width-90-percent {
423 | min-width: 90%;
424 | }
425 |
426 | .min-width-100-percent {
427 | min-width: 100%;
428 | }
429 |
430 | // Main size system
431 | .min-height-0 {
432 | min-height: 0;
433 | }
434 |
435 | .min-height-20 {
436 | min-height: 2rem;
437 | }
438 |
439 | .min-height-40 {
440 | min-height: 4rem;
441 | }
442 |
443 | .min-height-80 {
444 | min-height: 8rem;
445 | }
446 |
447 | .min-height-120 {
448 | min-height: 12rem;
449 | }
450 |
451 | .min-height-160 {
452 | min-height: 16rem;
453 | }
454 |
455 | .min-height-240 {
456 | min-height: 24rem;
457 | }
458 |
459 | .min-height-320 {
460 | min-height: 32rem;
461 | }
462 |
463 | .min-height-480 {
464 | min-height: 48rem;
465 | }
466 |
467 | .min-height-640 {
468 | min-height: 64rem;
469 | }
470 |
471 | .min-height-800 {
472 | min-height: 80rem;
473 | }
474 |
475 | .min-height-960 {
476 | min-height: 96rem;
477 | }
478 |
479 | .min-height-1280 {
480 | min-height: 128rem;
481 | }
482 |
483 | // Extra values
484 | .min-height-100 {
485 | min-height: 10rem;
486 | }
487 |
488 | .min-height-200 {
489 | min-height: 20rem;
490 | }
491 |
492 | .min-height-400 {
493 | min-height: 40rem;
494 | }
495 |
496 | .min-height-560 {
497 | min-height: 56rem;
498 | }
499 |
500 | .min-height-720 {
501 | min-height: 72rem;
502 | }
503 |
504 | .min-height-1040 {
505 | min-height: 104rem;
506 | }
507 |
508 | .min-height-1120 {
509 | min-height: 112rem;
510 | }
511 |
512 | .min-height-1200 {
513 | min-height: 120rem;
514 | }
515 |
516 | // Percentage values
517 | .min-height-10-percent {
518 | min-height: 10%;
519 | }
520 |
521 | .min-height-20-percent {
522 | min-height: 20%;
523 | }
524 |
525 | .min-height-25-percent {
526 | min-height: 25%;
527 | }
528 |
529 | .min-height-30-percent {
530 | min-height: 30%;
531 | }
532 |
533 | .min-height-33-percent {
534 | min-height: 33.33%;
535 | }
536 |
537 | .min-height-40-percent {
538 | min-height: 40%;
539 | }
540 |
541 | .min-height-50-percent {
542 | min-height: 50%;
543 | }
544 |
545 | .min-height-60-percent {
546 | min-height: 60%;
547 | }
548 |
549 | .min-height-66-percent {
550 | min-height: 66.67%;
551 | }
552 |
553 | .min-height-70-percent {
554 | min-height: 70%;
555 | }
556 |
557 | .min-height-75-percent {
558 | min-height: 75%;
559 | }
560 |
561 | .min-height-80-percent {
562 | min-height: 80%;
563 | }
564 |
565 | .min-height-90-percent {
566 | min-height: 90%;
567 | }
568 |
569 | .min-height-100-percent {
570 | min-height: 100%;
571 | }
572 |
573 | // Main size system
574 | .max-width-0 {
575 | max-width: 0;
576 | }
577 |
578 | .max-width-20 {
579 | max-width: 2rem;
580 | }
581 |
582 | .max-width-40 {
583 | max-width: 4rem;
584 | }
585 |
586 | .max-width-80 {
587 | max-width: 8rem;
588 | }
589 |
590 | .max-width-120 {
591 | max-width: 12rem;
592 | }
593 |
594 | .max-width-160 {
595 | max-width: 16rem;
596 | }
597 |
598 | .max-width-240 {
599 | max-width: 24rem;
600 | }
601 |
602 | .max-width-320 {
603 | max-width: 32rem;
604 | }
605 |
606 | .max-width-480 {
607 | max-width: 48rem;
608 | }
609 |
610 | .max-width-640 {
611 | max-width: 64rem;
612 | }
613 |
614 | .max-width-800 {
615 | max-width: 80rem;
616 | }
617 |
618 | .max-width-960 {
619 | max-width: 96rem;
620 | }
621 |
622 | .max-width-1280 {
623 | max-width: 128rem;
624 | }
625 |
626 | // Extra values
627 | .max-width-100 {
628 | max-width: 10rem;
629 | }
630 |
631 | .max-width-200 {
632 | max-width: 20rem;
633 | }
634 |
635 | .max-width-400 {
636 | max-width: 40rem;
637 | }
638 |
639 | .max-width-560 {
640 | max-width: 56rem;
641 | }
642 |
643 | .max-width-720 {
644 | max-width: 72rem;
645 | }
646 |
647 | .max-width-1040 {
648 | max-width: 104rem;
649 | }
650 |
651 | .max-width-1120 {
652 | max-width: 112rem;
653 | }
654 |
655 | .max-width-1200 {
656 | max-width: 120rem;
657 | }
658 |
659 | // Percentage values
660 | .max-width-10-percent {
661 | max-width: 10%;
662 | }
663 |
664 | .max-width-20-percent {
665 | max-width: 20%;
666 | }
667 |
668 | .max-width-25-percent {
669 | max-width: 25%;
670 | }
671 |
672 | .max-width-30-percent {
673 | max-width: 30%;
674 | }
675 |
676 | .max-width-33-percent {
677 | max-width: 33.33%;
678 | }
679 |
680 | .max-width-40-percent {
681 | max-width: 40%;
682 | }
683 |
684 | .max-width-50-percent {
685 | max-width: 50%;
686 | }
687 |
688 | .max-width-60-percent {
689 | max-width: 60%;
690 | }
691 |
692 | .max-width-66-percent {
693 | max-width: 66.67%;
694 | }
695 |
696 | .max-width-70-percent {
697 | max-width: 70%;
698 | }
699 |
700 | .max-width-75-percent {
701 | max-width: 75%;
702 | }
703 |
704 | .max-width-80-percent {
705 | max-width: 80%;
706 | }
707 |
708 | .max-width-90-percent {
709 | max-width: 90%;
710 | }
711 |
712 | .max-width-100-percent {
713 | max-width: 100%;
714 | }
715 |
716 | // Main size system
717 | .max-height-0 {
718 | max-height: 0;
719 | }
720 |
721 | .max-height-20 {
722 | max-height: 2rem;
723 | }
724 |
725 | .max-height-40 {
726 | max-height: 4rem;
727 | }
728 |
729 | .max-height-80 {
730 | max-height: 8rem;
731 | }
732 |
733 | .max-height-120 {
734 | max-height: 12rem;
735 | }
736 |
737 | .max-height-160 {
738 | max-height: 16rem;
739 | }
740 |
741 | .max-height-240 {
742 | max-height: 24rem;
743 | }
744 |
745 | .max-height-320 {
746 | max-height: 32rem;
747 | }
748 |
749 | .max-height-480 {
750 | max-height: 48rem;
751 | }
752 |
753 | .max-height-640 {
754 | max-height: 64rem;
755 | }
756 |
757 | .max-height-800 {
758 | max-height: 80rem;
759 | }
760 |
761 | .max-height-960 {
762 | max-height: 96rem;
763 | }
764 |
765 | .max-height-1280 {
766 | max-height: 128rem;
767 | }
768 |
769 | // Extra values
770 | .max-height-100 {
771 | max-height: 10rem;
772 | }
773 |
774 | .max-height-200 {
775 | max-height: 20rem;
776 | }
777 |
778 | .max-height-400 {
779 | max-height: 40rem;
780 | }
781 |
782 | .max-height-560 {
783 | max-height: 56rem;
784 | }
785 |
786 | .max-height-720 {
787 | max-height: 72rem;
788 | }
789 |
790 | .max-height-1040 {
791 | max-height: 104rem;
792 | }
793 |
794 | .max-height-1120 {
795 | max-height: 112rem;
796 | }
797 |
798 | .max-height-1200 {
799 | max-height: 120rem;
800 | }
801 |
802 | // Percentage values
803 | .min-height-10-percent {
804 | min-height: 10%;
805 | }
806 |
807 | .min-height-20-percent {
808 | min-height: 20%;
809 | }
810 |
811 | .min-height-25-percent {
812 | min-height: 25%;
813 | }
814 |
815 | .min-height-30-percent {
816 | min-height: 30%;
817 | }
818 |
819 | .min-height-33-percent {
820 | min-height: 33.33%;
821 | }
822 |
823 | .min-height-40-percent {
824 | min-height: 40%;
825 | }
826 |
827 | .min-height-50-percent {
828 | min-height: 50%;
829 | }
830 |
831 | .min-height-60-percent {
832 | min-height: 60%;
833 | }
834 |
835 | .min-height-66-percent {
836 | min-height: 66.67%;
837 | }
838 |
839 | .min-height-70-percent {
840 | min-height: 70%;
841 | }
842 |
843 | .min-height-75-percent {
844 | min-height: 75%;
845 | }
846 |
847 | .min-height-80-percent {
848 | min-height: 80%;
849 | }
850 |
851 | .min-height-90-percent {
852 | min-height: 90%;
853 | }
854 |
855 | .min-height-100-percent {
856 | min-height: 100%;
857 | }
858 |
--------------------------------------------------------------------------------
/design-ingredients/_tips.scss:
--------------------------------------------------------------------------------
1 | /*These are a collection of CSS Tips, Tricks & Less Known Properties to help you achieve certain results fast*/
2 |
3 | .smooth-scrolling { //apply this to the html tag
4 | scroll-behavior: smooth;
5 | }
6 |
7 | .cursor-pointer {
8 | cursor: pointer;
9 | }
--------------------------------------------------------------------------------
/design-ingredients/_typography.scss:
--------------------------------------------------------------------------------
1 | //1. Typography - Formatting and Designing Text
2 |
3 |
4 | /*FONT SIZE SYSTEM (px)
5 | 10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98*/
6 |
7 | //FONT SIZES (15 sizes)
8 | .font-size-10 { font-size: 1.0rem; }
9 | .font-size-12 { font-size: 1.2rem; }
10 | .font-size-14 { font-size: 1.4rem; }
11 | .font-size-16 { font-size: 1.6rem; }
12 | .font-size-18 { font-size: 1.8rem; }
13 | .font-size-20 { font-size: 2.0rem; }
14 | .font-size-24 { font-size: 2.4rem; }
15 | .font-size-30 { font-size: 3.0rem; }
16 | .font-size-36 { font-size: 3.6rem; }
17 | .font-size-44 { font-size: 4.4rem; }
18 | .font-size-52 { font-size: 5.2rem; }
19 | .font-size-62 { font-size: 6.2rem; }
20 | .font-size-74 { font-size: 7.4rem; }
21 | .font-size-86 { font-size: 8.6rem; }
22 | .font-size-98 { font-size: 9.8rem; }
23 |
24 | //FONT WEIGHTS (5 weights)
25 | .font-weight-300 { font-weight: 300;}
26 | .font-weight-400 { font-weight: 400;}
27 | .font-weight-500 { font-weight: 500;}
28 | .font-weight-600 { font-weight: 600;}
29 | .font-weight-700 { font-weight: 700;}
30 |
31 | //LINE HEIGHTS (7 Lines Options)
32 | .line-height-10 { line-height: 1.0;}
33 | .line-height-11 { line-height: 1.1;}
34 | .line-height-12 { line-height: 1.2;}
35 | .line-height-13 { line-height: 1.3;}
36 | .line-height-14 { line-height: 1.4;}
37 | .line-height-15 { line-height: 1.5;}
38 | .line-height-16 { line-height: 1.6;} //mostly used for paragraphs (can de a paragraph default
39 | .line-height-17 { line-height: 1.7;}
40 |
41 |
42 | //LETTER SPACING (Rarely used)
43 | .letter-spacing-minus-1 { letter-spacing: -1px}
44 | .letter-spacing-minus-05 { letter-spacing: -0.5px}
45 | .letter-spacing-05 { letter-spacing: .5px} //too small it's okay if it stays in pixels
46 | .letter-spacing-075 { letter-spacing: .75px} //??
47 | .letter-spacing-1 { letter-spacing: 1px}
48 | .letter-spacing-2 { letter-spacing: 2px}
49 | .letter-spacing-3 { letter-spacing: 3px}
50 | .letter-spacing-4 { letter-spacing: 4px}
51 |
52 | //TEXT ALIGNMENT
53 | .text-center { text-align: center }
54 | .text-left { text-align: left }
55 | .text-right { text-align: right }
56 | .text-justify { text-align: justify }
57 |
58 | //TEXT FORMAT
59 | .text-uppercase {text-transform: uppercase}
60 | .text-lowercase {text-transform: lowercase}
61 | .text-capitalize { text-transform: capitalize}
62 |
63 |
64 | //LINKS
65 | .text-decoration-none { text-decoration: none;}
66 |
67 |
68 |
69 | //UNORDERED LISTS
70 | .list-style-none { list-style: none;}
71 |
72 |
--------------------------------------------------------------------------------
/design-ingredients/_whitespace.scss:
--------------------------------------------------------------------------------
1 | //7. Whitespace
2 |
3 | /*SPACING SYSTEM (px)
4 | 2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 (12 Values)
5 | */
6 |
7 | //Alignment
8 | .margin-center {
9 | margin-left: auto;
10 | margin-right: auto;
11 | }
12 |
13 | //.margin-center { margin: 0 auto;}
14 | //.mg-auto { margin: auto auto;}
15 |
16 | // Main spacing system
17 | .gap-0 {
18 | gap: 0;
19 | }
20 |
21 | .gap-2 {
22 | gap: .2rem;
23 | }
24 |
25 | .gap-4 {
26 | gap: .4rem;
27 | }
28 |
29 | .gap-8 {
30 | gap: .8rem;
31 | }
32 |
33 | .gap-12 {
34 | gap: 1.2rem;
35 | }
36 |
37 | .gap-16 {
38 | gap: 1.6rem;
39 | }
40 |
41 | .gap-24 {
42 | gap: 2.4rem;
43 | }
44 |
45 | .gap-32 {
46 | gap: 3.2rem;
47 | }
48 |
49 | .gap-48 {
50 | gap: 4.8rem;
51 | }
52 |
53 | .gap-64 {
54 | gap: 6.4rem;
55 | }
56 |
57 | .gap-80 {
58 | gap: 8.0rem;
59 | }
60 |
61 | .gap-96 {
62 | gap: 9.6rem;
63 | }
64 |
65 | .gap-128 {
66 | gap: 12.8rem;
67 | }
68 |
69 | // Extra values
70 | .gap-10 {
71 | gap: 1.0rem;
72 | }
73 |
74 | .gap-20 {
75 | gap: 2.0rem;
76 | }
77 |
78 | .gap-40 {
79 | gap: 4.0rem;
80 | }
81 |
82 | .gap-56 {
83 | gap: 5.6rem;
84 | }
85 |
86 | .gap-72 {
87 | gap: 7.2rem;
88 | }
89 |
90 | .gap-104 {
91 | gap: 10.4rem;
92 | }
93 |
94 | .gap-112 {
95 | gap: 11.2rem;
96 | }
97 |
98 | .gap-120 {
99 | gap: 12.0rem;
100 | }
101 |
102 |
103 | // Main spacing system
104 | .row-gap-0 {
105 | row-gap: 0;
106 | }
107 |
108 | .row-gap-2 {
109 | row-gap: .2rem;
110 | }
111 |
112 | .row-gap-4 {
113 | row-gap: .4rem;
114 | }
115 |
116 | .row-gap-8 {
117 | row-gap: .8rem;
118 | }
119 |
120 | .row-gap-12 {
121 | row-gap: 1.2rem;
122 | }
123 |
124 | .row-gap-16 {
125 | row-gap: 1.6rem;
126 | }
127 |
128 | .row-gap-24 {
129 | row-gap: 2.4rem;
130 | }
131 |
132 | .row-gap-32 {
133 | row-gap: 3.2rem;
134 | }
135 |
136 | .row-gap-48 {
137 | row-gap: 4.8rem;
138 | }
139 |
140 | .row-gap-64 {
141 | row-gap: 6.4rem;
142 | }
143 |
144 | .row-gap-80 {
145 | row-gap: 8.0rem;
146 | }
147 |
148 | .row-gap-96 {
149 | row-gap: 9.6rem;
150 | }
151 |
152 | .row-gap-128 {
153 | row-gap: 12.8rem;
154 | }
155 |
156 | // Extra values
157 | .row-gap-10 {
158 | row-gap: 1.0rem;
159 | }
160 |
161 | .row-gap-20 {
162 | row-gap: 2.0rem;
163 | }
164 |
165 | .row-gap-40 {
166 | row-gap: 4.0rem;
167 | }
168 |
169 | .row-gap-56 {
170 | row-gap: 5.6rem;
171 | }
172 |
173 | .row-gap-72 {
174 | row-gap: 7.2rem;
175 | }
176 |
177 | .row-gap-104 {
178 | row-gap: 10.4rem;
179 | }
180 |
181 | .row-gap-112 {
182 | row-gap: 11.2rem;
183 | }
184 |
185 | .row-gap-120 {
186 | row-gap: 12.0rem;
187 | }
188 |
189 |
190 | // Main spacing system
191 | .column-gap-0 {
192 | column-gap: 0;
193 | }
194 |
195 | .column-gap-2 {
196 | column-gap: .2rem;
197 | }
198 |
199 | .column-gap-4 {
200 | column-gap: .4rem;
201 | }
202 |
203 | .column-gap-8 {
204 | column-gap: .8rem;
205 | }
206 |
207 | .column-gap-12 {
208 | column-gap: 1.2rem;
209 | }
210 |
211 | .column-gap-16 {
212 | column-gap: 1.6rem;
213 | }
214 |
215 | .column-gap-24 {
216 | column-gap: 2.4rem;
217 | }
218 |
219 | .column-gap-32 {
220 | column-gap: 3.2rem;
221 | }
222 |
223 | .column-gap-48 {
224 | column-gap: 4.8rem;
225 | }
226 |
227 | .column-gap-64 {
228 | column-gap: 6.4rem;
229 | }
230 |
231 | .column-gap-80 {
232 | column-gap: 8.0rem;
233 | }
234 |
235 | .column-gap-96 {
236 | column-gap: 9.6rem;
237 | }
238 |
239 | .column-gap-128 {
240 | column-gap: 12.8rem;
241 | }
242 |
243 | // Extra values
244 | .column-gap-10 {
245 | column-gap: 1.0rem;
246 | }
247 |
248 | .column-gap-20 {
249 | column-gap: 2.0rem;
250 | }
251 |
252 | .column-gap-40 {
253 | column-gap: 4.0rem;
254 | }
255 |
256 | .column-gap-56 {
257 | column-gap: 5.6rem;
258 | }
259 |
260 | .column-gap-72 {
261 | column-gap: 7.2rem;
262 | }
263 |
264 | .column-gap-104 {
265 | column-gap: 10.4rem;
266 | }
267 |
268 | .column-gap-112 {
269 | column-gap: 11.2rem;
270 | }
271 |
272 | .column-gap-120 {
273 | column-gap: 12.0rem;
274 | }
275 |
276 | // Main spacing system
277 | .margin-0 {
278 | margin: 0;
279 | }
280 |
281 | .margin-2 {
282 | margin: .2rem;
283 | }
284 |
285 | .margin-4 {
286 | margin: .4rem;
287 | }
288 |
289 | .margin-8 {
290 | margin: .8rem;
291 | }
292 |
293 | .margin-12 {
294 | margin: 1.2rem;
295 | }
296 |
297 | .margin-16 {
298 | margin: 1.6rem;
299 | }
300 |
301 | .margin-24 {
302 | margin: 2.4rem;
303 | }
304 |
305 | .margin-32 {
306 | margin: 3.2rem;
307 | }
308 |
309 | .margin-48 {
310 | margin: 4.8rem;
311 | }
312 |
313 | .margin-64 {
314 | margin: 6.4rem;
315 | }
316 |
317 | .margin-80 {
318 | margin: 8.0rem;
319 | }
320 |
321 | .margin-96 {
322 | margin: 9.6rem;
323 | }
324 |
325 | .margin-128 {
326 | margin: 12.8rem;
327 | }
328 |
329 | .margin-auto {
330 | margin: auto;
331 | }
332 |
333 | // Extra values
334 | .margin-10 {
335 | margin: 1.0rem;
336 | }
337 |
338 | .margin-20 {
339 | margin: 2.0rem;
340 | }
341 |
342 | .margin-40 {
343 | margin: 4.0rem;
344 | }
345 |
346 | .margin-56 {
347 | margin: 5.6rem;
348 | }
349 |
350 | .margin-72 {
351 | margin: 7.2rem;
352 | }
353 |
354 | .margin-104 {
355 | margin: 10.4rem;
356 | }
357 |
358 | .margin-112 {
359 | margin: 11.2rem;
360 | }
361 |
362 | .margin-120 {
363 | margin: 12.0rem;
364 | }
365 |
366 | // Main spacing system
367 | .margin-top-0 {
368 | margin-top: 0;
369 | }
370 |
371 | .margin-top-2 {
372 | margin-top: .2rem;
373 | }
374 |
375 | .margin-top-4 {
376 | margin-top: .4rem;
377 | }
378 |
379 | .margin-top-8 {
380 | margin-top: .8rem;
381 | }
382 |
383 | .margin-top-12 {
384 | margin-top: 1.2rem;
385 | }
386 |
387 | .margin-top-16 {
388 | margin-top: 1.6rem;
389 | }
390 |
391 | .margin-top-24 {
392 | margin-top: 2.4rem;
393 | }
394 |
395 | .margin-top-32 {
396 | margin-top: 3.2rem;
397 | }
398 |
399 | .margin-top-48 {
400 | margin-top: 4.8rem;
401 | }
402 |
403 | .margin-top-64 {
404 | margin-top: 6.4rem;
405 | }
406 |
407 | .margin-top-80 {
408 | margin-top: 8.0rem;
409 | }
410 |
411 | .margin-top-96 {
412 | margin-top: 9.6rem;
413 | }
414 |
415 | .margin-top-128 {
416 | margin-top: 12.8rem;
417 | }
418 |
419 | .margin-top-auto {
420 | margin-top: auto;
421 | }
422 |
423 | // Extra values
424 | .margin-top-10 {
425 | margin-top: 1.0rem;
426 | }
427 |
428 | .margin-top-20 {
429 | margin-top: 2.0rem;
430 | }
431 |
432 | .margin-top-40 {
433 | margin-top: 4.0rem;
434 | }
435 |
436 | .margin-top-56 {
437 | margin-top: 5.6rem;
438 | }
439 |
440 | .margin-top-72 {
441 | margin-top: 7.2rem;
442 | }
443 |
444 | .margin-top-104 {
445 | margin-top: 10.4rem;
446 | }
447 |
448 | .margin-top-112 {
449 | margin-top: 11.2rem;
450 | }
451 |
452 | .margin-top-120 {
453 | margin-top: 12.0rem;
454 | }
455 |
456 |
457 | // Main spacing system
458 | .margin-right-0 {
459 | margin-right: 0;
460 | }
461 |
462 | .margin-right-2 {
463 | margin-right: .2rem;
464 | }
465 |
466 | .margin-right-4 {
467 | margin-right: .4rem;
468 | }
469 |
470 | .margin-right-8 {
471 | margin-right: .8rem;
472 | }
473 |
474 | .margin-right-12 {
475 | margin-right: 1.2rem;
476 | }
477 |
478 | .margin-right-16 {
479 | margin-right: 1.6rem;
480 | }
481 |
482 | .margin-right-24 {
483 | margin-right: 2.4rem;
484 | }
485 |
486 | .margin-right-32 {
487 | margin-right: 3.2rem;
488 | }
489 |
490 | .margin-right-48 {
491 | margin-right: 4.8rem;
492 | }
493 |
494 | .margin-right-64 {
495 | margin-right: 6.4rem;
496 | }
497 |
498 | .margin-right-80 {
499 | margin-right: 8.0rem;
500 | }
501 |
502 | .margin-right-96 {
503 | margin-right: 9.6rem;
504 | }
505 |
506 | .margin-right-128 {
507 | margin-right: 12.8rem;
508 | }
509 |
510 | .margin-right-auto {
511 | margin-right: auto;
512 | }
513 |
514 | // Extra values
515 | .margin-right-10 {
516 | margin-right: 1.0rem;
517 | }
518 |
519 | .margin-right-20 {
520 | margin-right: 2.0rem;
521 | }
522 |
523 | .margin-right-40 {
524 | margin-right: 4.0rem;
525 | }
526 |
527 | .margin-right-56 {
528 | margin-right: 5.6rem;
529 | }
530 |
531 | .margin-right-72 {
532 | margin-right: 7.2rem;
533 | }
534 |
535 | .margin-right-104 {
536 | margin-right: 10.4rem;
537 | }
538 |
539 | .margin-right-112 {
540 | margin-right: 11.2rem;
541 | }
542 |
543 | .margin-right-120 {
544 | margin-right: 12.0rem;
545 | }
546 |
547 |
548 | // Main spacing system
549 | .margin-bottom-0 {
550 | margin-bottom: 0;
551 | }
552 |
553 | .margin-bottom-2 {
554 | margin-bottom: .2rem;
555 | }
556 |
557 | .margin-bottom-4 {
558 | margin-bottom: .4rem;
559 | }
560 |
561 | .margin-bottom-8 {
562 | margin-bottom: .8rem;
563 | }
564 |
565 | .margin-bottom-12 {
566 | margin-bottom: 1.2rem;
567 | }
568 |
569 | .margin-bottom-16 {
570 | margin-bottom: 1.6rem;
571 | }
572 |
573 | .margin-bottom-24 {
574 | margin-bottom: 2.4rem;
575 | }
576 |
577 | .margin-bottom-32 {
578 | margin-bottom: 3.2rem;
579 | }
580 |
581 | .margin-bottom-48 {
582 | margin-bottom: 4.8rem;
583 | }
584 |
585 | .margin-bottom-64 {
586 | margin-bottom: 6.4rem;
587 | }
588 |
589 | .margin-bottom-80 {
590 | margin-bottom: 8.0rem;
591 | }
592 |
593 | .margin-bottom-96 {
594 | margin-bottom: 9.6rem;
595 | }
596 |
597 | .margin-bottom-128 {
598 | margin-bottom: 12.8rem;
599 | }
600 |
601 | .margin-bottom-auto {
602 | margin-bottom: auto;
603 | }
604 |
605 | // Extra values
606 | .margin-bottom-10 {
607 | margin-bottom: 1.0rem;
608 | }
609 |
610 | .margin-bottom-20 {
611 | margin-bottom: 2.0rem;
612 | }
613 |
614 | .margin-bottom-40 {
615 | margin-bottom: 4.0rem;
616 | }
617 |
618 | .margin-bottom-56 {
619 | margin-bottom: 5.6rem;
620 | }
621 |
622 | .margin-bottom-72 {
623 | margin-bottom: 7.2rem;
624 | }
625 |
626 | .margin-bottom-104 {
627 | margin-bottom: 10.4rem;
628 | }
629 |
630 | .margin-bottom-112 {
631 | margin-bottom: 11.2rem;
632 | }
633 |
634 | .margin-bottom-120 {
635 | margin-bottom: 12.0rem;
636 | }
637 |
638 |
639 | // Main spacing system
640 | .margin-left-0 {
641 | margin-left: 0;
642 | }
643 |
644 | .margin-left-2 {
645 | margin-left: .2rem;
646 | }
647 |
648 | .margin-left-4 {
649 | margin-left: .4rem;
650 | }
651 |
652 | .margin-left-8 {
653 | margin-left: .8rem;
654 | }
655 |
656 | .margin-left-12 {
657 | margin-left: 1.2rem;
658 | }
659 |
660 | .margin-left-16 {
661 | margin-left: 1.6rem;
662 | }
663 |
664 | .margin-left-24 {
665 | margin-left: 2.4rem;
666 | }
667 |
668 | .margin-left-32 {
669 | margin-left: 3.2rem;
670 | }
671 |
672 | .margin-left-48 {
673 | margin-left: 4.8rem;
674 | }
675 |
676 | .margin-left-64 {
677 | margin-left: 6.4rem;
678 | }
679 |
680 | .margin-left-80 {
681 | margin-left: 8.0rem;
682 | }
683 |
684 | .margin-left-96 {
685 | margin-left: 9.6rem;
686 | }
687 |
688 | .margin-left-128 {
689 | margin-left: 12.8rem;
690 | }
691 |
692 | .margin-left-auto {
693 | margin-left: auto;
694 | }
695 |
696 | // Extra values
697 | .margin-left-10 {
698 | margin-left: 1.0rem;
699 | }
700 |
701 | .margin-left-20 {
702 | margin-left: 2.0rem;
703 | }
704 |
705 | .margin-left-40 {
706 | margin-left: 4.0rem;
707 | }
708 |
709 | .margin-left-56 {
710 | margin-left: 5.6rem;
711 | }
712 |
713 | .margin-left-72 {
714 | margin-left: 7.2rem;
715 | }
716 |
717 | .margin-left-104 {
718 | margin-left: 10.4rem;
719 | }
720 |
721 | .margin-left-112 {
722 | margin-left: 11.2rem;
723 | }
724 |
725 | .margin-left-120 {
726 | margin-left: 12.0rem;
727 | }
728 |
729 |
730 | // Main spacing system
731 | .padding-0 {
732 | padding: 0;
733 | }
734 |
735 | .padding-2 {
736 | padding: .2rem;
737 | }
738 |
739 | .padding-4 {
740 | padding: .4rem;
741 | }
742 |
743 | .padding-8 {
744 | padding: .8rem;
745 | }
746 |
747 | .padding-12 {
748 | padding: 1.2rem;
749 | }
750 |
751 | .padding-16 {
752 | padding: 1.6rem;
753 | }
754 |
755 | .padding-24 {
756 | padding: 2.4rem;
757 | }
758 |
759 | .padding-32 {
760 | padding: 3.2rem;
761 | }
762 |
763 | .padding-48 {
764 | padding: 4.8rem;
765 | }
766 |
767 | .padding-64 {
768 | padding: 6.4rem;
769 | }
770 |
771 | .padding-80 {
772 | padding: 8.0rem;
773 | }
774 |
775 | .padding-96 {
776 | padding: 9.6rem;
777 | }
778 |
779 | .padding-128 {
780 | padding: 12.8rem;
781 | }
782 |
783 | // Extra values
784 | .padding-10 {
785 | padding: 1.0rem;
786 | }
787 |
788 | .padding-20 {
789 | padding: 2.0rem;
790 | }
791 |
792 | .padding-40 {
793 | padding: 4.0rem;
794 | }
795 |
796 | .padding-56 {
797 | padding: 5.6rem;
798 | }
799 |
800 | .padding-72 {
801 | padding: 7.2rem;
802 | }
803 |
804 | .padding-104 {
805 | padding: 10.4rem;
806 | }
807 |
808 | .padding-112 {
809 | padding: 11.2rem;
810 | }
811 |
812 | .padding-120 {
813 | padding: 12.0rem;
814 | }
815 |
816 |
817 | // Main spacing system
818 | .padding-top-0 {
819 | padding-top: 0;
820 | }
821 |
822 | .padding-top-2 {
823 | padding-top: .2rem;
824 | }
825 |
826 | .padding-top-4 {
827 | padding-top: .4rem;
828 | }
829 |
830 | .padding-top-8 {
831 | padding-top: .8rem;
832 | }
833 |
834 | .padding-top-12 {
835 | padding-top: 1.2rem;
836 | }
837 |
838 | .padding-top-16 {
839 | padding-top: 1.6rem;
840 | }
841 |
842 | .padding-top-24 {
843 | padding-top: 2.4rem;
844 | }
845 |
846 | .padding-top-32 {
847 | padding-top: 3.2rem;
848 | }
849 |
850 | .padding-top-48 {
851 | padding-top: 4.8rem;
852 | }
853 |
854 | .padding-top-64 {
855 | padding-top: 6.4rem;
856 | }
857 |
858 | .padding-top-80 {
859 | padding-top: 8.0rem;
860 | }
861 |
862 | .padding-top-96 {
863 | padding-top: 9.6rem;
864 | }
865 |
866 | .padding-top-128 {
867 | padding-top: 12.8rem;
868 | }
869 |
870 | // Extra values
871 | .padding-top-10 {
872 | padding-top: 1.0rem;
873 | }
874 |
875 | .padding-top-20 {
876 | padding-top: 2.0rem;
877 | }
878 |
879 | .padding-top-40 {
880 | padding-top: 4.0rem;
881 | }
882 |
883 | .padding-top-56 {
884 | padding-top: 5.6rem;
885 | }
886 |
887 | .padding-top-72 {
888 | padding-top: 7.2rem;
889 | }
890 |
891 | .padding-top-104 {
892 | padding-top: 10.4rem;
893 | }
894 |
895 | .padding-top-112 {
896 | padding-top: 11.2rem;
897 | }
898 |
899 | .padding-top-120 {
900 | padding-top: 12.0rem;
901 | }
902 |
903 |
904 | // Main spacing system
905 | .padding-right-0 {
906 | padding-right: 0;
907 | }
908 |
909 | .padding-right-2 {
910 | padding-right: .2rem;
911 | }
912 |
913 | .padding-right-4 {
914 | padding-right: .4rem;
915 | }
916 |
917 | .padding-right-8 {
918 | padding-right: .8rem;
919 | }
920 |
921 | .padding-right-12 {
922 | padding-right: 1.2rem;
923 | }
924 |
925 | .padding-right-16 {
926 | padding-right: 1.6rem;
927 | }
928 |
929 | .padding-right-24 {
930 | padding-right: 2.4rem;
931 | }
932 |
933 | .padding-right-32 {
934 | padding-right: 3.2rem;
935 | }
936 |
937 | .padding-right-48 {
938 | padding-right: 4.8rem;
939 | }
940 |
941 | .padding-right-64 {
942 | padding-right: 6.4rem;
943 | }
944 |
945 | .padding-right-80 {
946 | padding-right: 8.0rem;
947 | }
948 |
949 | .padding-right-96 {
950 | padding-right: 9.6rem;
951 | }
952 |
953 | .padding-right-128 {
954 | padding-right: 12.8rem;
955 | }
956 |
957 | // Extra values
958 | .padding-right-10 {
959 | padding-right: 1.0rem;
960 | }
961 |
962 | .padding-right-20 {
963 | padding-right: 2.0rem;
964 | }
965 |
966 | .padding-right-40 {
967 | padding-right: 4.0rem;
968 | }
969 |
970 | .padding-right-56 {
971 | padding-right: 5.6rem;
972 | }
973 |
974 | .padding-right-72 {
975 | padding-right: 7.2rem;
976 | }
977 |
978 | .padding-right-104 {
979 | padding-right: 10.4rem;
980 | }
981 |
982 | .padding-right-112 {
983 | padding-right: 11.2rem;
984 | }
985 |
986 | .padding-right-120 {
987 | padding-right: 12.0rem;
988 | }
989 |
990 |
991 | // Main spacing system
992 | .padding-bottom-0 {
993 | padding-bottom: 0;
994 | }
995 |
996 | .padding-bottom-2 {
997 | padding-bottom: .2rem;
998 | }
999 |
1000 | .padding-bottom-4 {
1001 | padding-bottom: .4rem;
1002 | }
1003 |
1004 | .padding-bottom-8 {
1005 | padding-bottom: .8rem;
1006 | }
1007 |
1008 | .padding-bottom-12 {
1009 | padding-bottom: 1.2rem;
1010 | }
1011 |
1012 | .padding-bottom-16 {
1013 | padding-bottom: 1.6rem;
1014 | }
1015 |
1016 | .padding-bottom-24 {
1017 | padding-bottom: 2.4rem;
1018 | }
1019 |
1020 | .padding-bottom-32 {
1021 | padding-bottom: 3.2rem;
1022 | }
1023 |
1024 | .padding-bottom-48 {
1025 | padding-bottom: 4.8rem;
1026 | }
1027 |
1028 | .padding-bottom-64 {
1029 | padding-bottom: 6.4rem;
1030 | }
1031 |
1032 | .padding-bottom-80 {
1033 | padding-bottom: 8.0rem;
1034 | }
1035 |
1036 | .padding-bottom-96 {
1037 | padding-bottom: 9.6rem;
1038 | }
1039 |
1040 | .padding-bottom-128 {
1041 | padding-bottom: 12.8rem;
1042 | }
1043 |
1044 | // Extra values
1045 | .padding-bottom-10 {
1046 | padding-bottom: 1.0rem;
1047 | }
1048 |
1049 | .padding-bottom-20 {
1050 | padding-bottom: 2.0rem;
1051 | }
1052 |
1053 | .padding-bottom-40 {
1054 | padding-bottom: 4.0rem;
1055 | }
1056 |
1057 | .padding-bottom-56 {
1058 | padding-bottom: 5.6rem;
1059 | }
1060 |
1061 | .padding-bottom-72 {
1062 | padding-bottom: 7.2rem;
1063 | }
1064 |
1065 | .padding-bottom-104 {
1066 | padding-bottom: 10.4rem;
1067 | }
1068 |
1069 | .padding-bottom-112 {
1070 | padding-bottom: 11.2rem;
1071 | }
1072 |
1073 | .padding-bottom-120 {
1074 | padding-bottom: 12.0rem;
1075 | }
1076 |
1077 |
1078 | // Main spacing system
1079 | .padding-left-0 {
1080 | padding-left: 0;
1081 | }
1082 |
1083 | .padding-left-2 {
1084 | padding-left: .2rem;
1085 | }
1086 |
1087 | .padding-left-4 {
1088 | padding-left: .4rem;
1089 | }
1090 |
1091 | .padding-left-8 {
1092 | padding-left: .8rem;
1093 | }
1094 |
1095 | .padding-left-12 {
1096 | padding-left: 1.2rem;
1097 | }
1098 |
1099 | .padding-left-16 {
1100 | padding-left: 1.6rem;
1101 | }
1102 |
1103 | .padding-left-24 {
1104 | padding-left: 2.4rem;
1105 | }
1106 |
1107 | .padding-left-32 {
1108 | padding-left: 3.2rem;
1109 | }
1110 |
1111 | .padding-left-48 {
1112 | padding-left: 4.8rem;
1113 | }
1114 |
1115 | .padding-left-64 {
1116 | padding-left: 6.4rem;
1117 | }
1118 |
1119 | .padding-left-80 {
1120 | padding-left: 8.0rem;
1121 | }
1122 |
1123 | .padding-left-96 {
1124 | padding-left: 9.6rem;
1125 | }
1126 |
1127 | .padding-left-128 {
1128 | padding-left: 12.8rem;
1129 | }
1130 |
1131 | // Extra values
1132 | .padding-left-10 {
1133 | padding-left: 1.0rem;
1134 | }
1135 |
1136 | .padding-left-20 {
1137 | padding-left: 2.0rem;
1138 | }
1139 |
1140 | .padding-left-40 {
1141 | padding-left: 4.0rem;
1142 | }
1143 |
1144 | .padding-left-56 {
1145 | padding-left: 5.6rem;
1146 | }
1147 |
1148 | .padding-left-72 {
1149 | padding-left: 7.2rem;
1150 | }
1151 |
1152 | .padding-left-104 {
1153 | padding-left: 10.4rem;
1154 | }
1155 |
1156 | .padding-left-112 {
1157 | padding-left: 11.2rem;
1158 | }
1159 |
1160 | .padding-left-120 {
1161 | padding-left: 12.0rem;
1162 | }
1163 |
1164 |
1165 |
1166 |
1167 |
1168 |
--------------------------------------------------------------------------------
/main.css:
--------------------------------------------------------------------------------
1 | /*Global Resets*/
2 | * {
3 | margin: 0;
4 | padding: 0;
5 | box-sizing: border-box;
6 | }
7 |
8 | html {
9 | font-size: 62.5%;
10 | }
11 |
12 | body {
13 | font-size: 1.8rem;
14 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
15 | font-weight: 400;
16 | color: #333333;
17 | text-rendering: optimizeLegibility;
18 | overflow-x: hidden;
19 | }
20 |
21 | /*1. GRAY*/
22 | .background-gray-00 {
23 | background-color: #f8f9fa;
24 | }
25 |
26 | .background-gray-02 {
27 | background-color: #e9ecef;
28 | }
29 |
30 | .background-gray-04 {
31 | background-color: #ced4da;
32 | }
33 |
34 | .background-gray-05 {
35 | background-color: #adb5bd;
36 | }
37 |
38 | .background-gray-07 {
39 | background-color: #495057;
40 | }
41 |
42 | .background-gray-09 {
43 | background-color: #212529;
44 | }
45 |
46 | .background-red-00 {
47 | background-color: #fff5f5;
48 | }
49 |
50 | .background-red-02 {
51 | background-color: #ffc9c9;
52 | }
53 |
54 | .background-red-04 {
55 | background-color: #ff8787;
56 | }
57 |
58 | .background-red-05 {
59 | background-color: #ff6b6b;
60 | }
61 |
62 | .background-red-07 {
63 | background-color: #f03e3e;
64 | }
65 |
66 | .background-red-09 {
67 | background-color: #c92a2a;
68 | }
69 |
70 | .background-pink-00 {
71 | background-color: #fff0f6;
72 | }
73 |
74 | .background-pink-02 {
75 | background-color: #fcc2d7;
76 | }
77 |
78 | .background-pink-04 {
79 | background-color: #f783ac;
80 | }
81 |
82 | .background-pink-05 {
83 | background-color: #f06595;
84 | }
85 |
86 | .background-pink-07 {
87 | background-color: #d6336c;
88 | }
89 |
90 | .background-pink-09 {
91 | background-color: #a61e4d;
92 | }
93 |
94 | .background-grape-00 {
95 | background-color: #f8f0fc;
96 | }
97 |
98 | .background-grape-02 {
99 | background-color: #eebefa;
100 | }
101 |
102 | .background-grape-04 {
103 | background-color: #da77f2;
104 | }
105 |
106 | .background-grape-05 {
107 | background-color: #cc5de8;
108 | }
109 |
110 | .background-grape-07 {
111 | background-color: #ae3ec9;
112 | }
113 |
114 | .background-grape-09 {
115 | background-color: #862e9c;
116 | }
117 |
118 | .background-magenta-00 {
119 | background-color: #f8f0fc;
120 | }
121 |
122 | .background-magenta-02 {
123 | background-color: #eebefa;
124 | }
125 |
126 | .background-magenta-04 {
127 | background-color: #da77f2;
128 | }
129 |
130 | .background-magenta-05 {
131 | background-color: #cc5de8;
132 | }
133 |
134 | .background-magenta-07 {
135 | background-color: #ae3ec9;
136 | }
137 |
138 | .background-magenta-09 {
139 | background-color: #862e9c;
140 | }
141 |
142 | .background-fuchsia-00 {
143 | background-color: #f8f0fc;
144 | }
145 |
146 | .background-fuchsia-02 {
147 | background-color: #eebefa;
148 | }
149 |
150 | .background-fuchsia-04 {
151 | background-color: #da77f2;
152 | }
153 |
154 | .background-fuchsia-05 {
155 | background-color: #cc5de8;
156 | }
157 |
158 | .background-fuchsia-07 {
159 | background-color: #ae3ec9;
160 | }
161 |
162 | .background-fuchsia-09 {
163 | background-color: #862e9c;
164 | }
165 |
166 | .background-violet-00 {
167 | background-color: #f3f0ff;
168 | }
169 |
170 | .background-violet-02 {
171 | background-color: #d0bfff;
172 | }
173 |
174 | .background-violet-04 {
175 | background-color: #9775fa;
176 | }
177 |
178 | .background-violet-05 {
179 | background-color: #845ef7;
180 | }
181 |
182 | .background-violet-07 {
183 | background-color: #7048e8;
184 | }
185 |
186 | .background-violet-09 {
187 | background-color: #5f3dc4;
188 | }
189 |
190 | .background-purple-00 {
191 | background-color: #f3f0ff;
192 | }
193 |
194 | .background-purple-02 {
195 | background-color: #d0bfff;
196 | }
197 |
198 | .background-purple-04 {
199 | background-color: #9775fa;
200 | }
201 |
202 | .background-purple-05 {
203 | background-color: #845ef7;
204 | }
205 |
206 | .background-purple-07 {
207 | background-color: #7048e8;
208 | }
209 |
210 | .background-purple-09 {
211 | background-color: #5f3dc4;
212 | }
213 |
214 | .background-indigo-00 {
215 | background-color: #edf2ff;
216 | }
217 |
218 | .background-indigo-02 {
219 | background-color: #bac8ff;
220 | }
221 |
222 | .background-indigo-04 {
223 | background-color: #748ffc;
224 | }
225 |
226 | .background-indigo-05 {
227 | background-color: #5c7cfa;
228 | }
229 |
230 | .background-indigo-07 {
231 | background-color: #4263eb;
232 | }
233 |
234 | .background-indigo-09 {
235 | background-color: #364fc7;
236 | }
237 |
238 | .background-blue-00 {
239 | background-color: #e7f5ff;
240 | }
241 |
242 | .background-blue-02 {
243 | background-color: #a5d8ff;
244 | }
245 |
246 | .background-blue-04 {
247 | background-color: #4dabf7;
248 | }
249 |
250 | .background-blue-05 {
251 | background-color: #339af0;
252 | }
253 |
254 | .background-blue-07 {
255 | background-color: #1c7ed6;
256 | }
257 |
258 | .background-blue-09 {
259 | background-color: #1864ab;
260 | }
261 |
262 | .background-cyan-00 {
263 | background-color: #e3fafc;
264 | }
265 |
266 | .background-cyan-02 {
267 | background-color: #99e9f2;
268 | }
269 |
270 | .background-cyan-04 {
271 | background-color: #3bc9db;
272 | }
273 |
274 | .background-cyan-05 {
275 | background-color: #22b8cf;
276 | }
277 |
278 | .background-cyan-07 {
279 | background-color: #1098ad;
280 | }
281 |
282 | .background-cyan-09 {
283 | background-color: #0b7285;
284 | }
285 |
286 | .background-teal-00 {
287 | background-color: #e6fcf5;
288 | }
289 |
290 | .background-teal-02 {
291 | background-color: #96f2d7;
292 | }
293 |
294 | .background-teal-04 {
295 | background-color: #38d9a9;
296 | }
297 |
298 | .background-teal-05 {
299 | background-color: #20c997;
300 | }
301 |
302 | .background-teal-07 {
303 | background-color: #0ca678;
304 | }
305 |
306 | .background-teal-09 {
307 | background-color: #087f5b;
308 | }
309 |
310 | .background-green-00 {
311 | background-color: #ebfbee;
312 | }
313 |
314 | .background-green-02 {
315 | background-color: #b2f2bb;
316 | }
317 |
318 | .background-green-04 {
319 | background-color: #69db7c;
320 | }
321 |
322 | .background-green-05 {
323 | background-color: #51cf66;
324 | }
325 |
326 | .background-green-07 {
327 | background-color: #37b24d;
328 | }
329 |
330 | .background-green-09 {
331 | background-color: #2b8a3e;
332 | }
333 |
334 | .background-lime-00 {
335 | background-color: #f4fce3;
336 | }
337 |
338 | .background-lime-02 {
339 | background-color: #d8f5a2;
340 | }
341 |
342 | .background-lime-04 {
343 | background-color: #a9e34b;
344 | }
345 |
346 | .background-lime-05 {
347 | background-color: #94d82d;
348 | }
349 |
350 | .background-lime-07 {
351 | background-color: #74b816;
352 | }
353 |
354 | .background-lime-09 {
355 | background-color: #5c940d;
356 | }
357 |
358 | .background-yellow-00 {
359 | background-color: #fff9db;
360 | }
361 |
362 | .background-yellow-02 {
363 | background-color: #ffec99;
364 | }
365 |
366 | .background-yellow-04 {
367 | background-color: #ffd43b;
368 | }
369 |
370 | .background-yellow-05 {
371 | background-color: #fcc419;
372 | }
373 |
374 | .background-yellow-07 {
375 | background-color: #f59f00;
376 | }
377 |
378 | .background-yellow-09 {
379 | background-color: #e67700;
380 | }
381 |
382 | .background-orange-00 {
383 | background-color: #fff4e6;
384 | }
385 |
386 | .background-orange-02 {
387 | background-color: #ffd8a8;
388 | }
389 |
390 | .background-orange-04 {
391 | background-color: #ffa94d;
392 | }
393 |
394 | .background-orange-05 {
395 | background-color: #ff922b;
396 | }
397 |
398 | .background-orange-07 {
399 | background-color: #f76707;
400 | }
401 |
402 | .background-orange-09 {
403 | background-color: #d9480f;
404 | }
405 |
406 | .background-white {
407 | background-color: #fff;
408 | }
409 |
410 | .background-black {
411 | background-color: #000;
412 | }
413 |
414 | .background-gray {
415 | background-color: #333;
416 | }
417 |
418 | /*1. GRAY*/
419 | .gray-00 {
420 | color: #f8f9fa;
421 | }
422 |
423 | .gray-02 {
424 | color: #e9ecef;
425 | }
426 |
427 | .gray-04 {
428 | color: #ced4da;
429 | }
430 |
431 | .gray-05 {
432 | color: #adb5bd;
433 | }
434 |
435 | .gray-07 {
436 | color: #495057;
437 | }
438 |
439 | .gray-09 {
440 | color: #212529;
441 | }
442 |
443 | .red-00 {
444 | color: #fff5f5;
445 | }
446 |
447 | .red-02 {
448 | color: #ffc9c9;
449 | }
450 |
451 | .red-04 {
452 | color: #ff8787;
453 | }
454 |
455 | .red-05 {
456 | color: #ff6b6b;
457 | }
458 |
459 | .red-07 {
460 | color: #f03e3e;
461 | }
462 |
463 | .red-09 {
464 | color: #c92a2a;
465 | }
466 |
467 | .pink-00 {
468 | color: #fff0f6;
469 | }
470 |
471 | .pink-02 {
472 | color: #fcc2d7;
473 | }
474 |
475 | .pink-04 {
476 | color: #f783ac;
477 | }
478 |
479 | .pink-05 {
480 | color: #f06595;
481 | }
482 |
483 | .pink-07 {
484 | color: #d6336c;
485 | }
486 |
487 | .pink-09 {
488 | color: #a61e4d;
489 | }
490 |
491 | .grape-00 {
492 | color: #f8f0fc;
493 | }
494 |
495 | .grape-02 {
496 | color: #eebefa;
497 | }
498 |
499 | .grape-04 {
500 | color: #da77f2;
501 | }
502 |
503 | .grape-05 {
504 | color: #cc5de8;
505 | }
506 |
507 | .grape-07 {
508 | color: #ae3ec9;
509 | }
510 |
511 | .grape-09 {
512 | color: #862e9c;
513 | }
514 |
515 | .magenta-00 {
516 | color: #f8f0fc;
517 | }
518 |
519 | .magenta-02 {
520 | color: #eebefa;
521 | }
522 |
523 | .magenta-04 {
524 | color: #da77f2;
525 | }
526 |
527 | .magenta-05 {
528 | color: #cc5de8;
529 | }
530 |
531 | .magenta-07 {
532 | color: #ae3ec9;
533 | }
534 |
535 | .magenta-09 {
536 | color: #862e9c;
537 | }
538 |
539 | .fuchsia-00 {
540 | color: #f8f0fc;
541 | }
542 |
543 | .fuchsia-02 {
544 | color: #eebefa;
545 | }
546 |
547 | .fuchsia-04 {
548 | color: #da77f2;
549 | }
550 |
551 | .fuchsia-05 {
552 | color: #cc5de8;
553 | }
554 |
555 | .fuchsia-07 {
556 | color: #ae3ec9;
557 | }
558 |
559 | .fuchsia-09 {
560 | color: #862e9c;
561 | }
562 |
563 | .violet-00 {
564 | color: #f3f0ff;
565 | }
566 |
567 | .violet-02 {
568 | color: #d0bfff;
569 | }
570 |
571 | .violet-04 {
572 | color: #9775fa;
573 | }
574 |
575 | .violet-05 {
576 | color: #845ef7;
577 | }
578 |
579 | .violet-07 {
580 | color: #7048e8;
581 | }
582 |
583 | .violet-09 {
584 | color: #5f3dc4;
585 | }
586 |
587 | .purple-00 {
588 | color: #f3f0ff;
589 | }
590 |
591 | .purple-02 {
592 | color: #d0bfff;
593 | }
594 |
595 | .purple-04 {
596 | color: #9775fa;
597 | }
598 |
599 | .purple-05 {
600 | color: #845ef7;
601 | }
602 |
603 | .purple-07 {
604 | color: #7048e8;
605 | }
606 |
607 | .purple-09 {
608 | color: #5f3dc4;
609 | }
610 |
611 | .indigo-00 {
612 | color: #edf2ff;
613 | }
614 |
615 | .indigo-02 {
616 | color: #bac8ff;
617 | }
618 |
619 | .indigo-04 {
620 | color: #748ffc;
621 | }
622 |
623 | .indigo-05 {
624 | color: #5c7cfa;
625 | }
626 |
627 | .indigo-07 {
628 | color: #4263eb;
629 | }
630 |
631 | .indigo-09 {
632 | color: #364fc7;
633 | }
634 |
635 | .blue-00 {
636 | color: #e7f5ff;
637 | }
638 |
639 | .blue-02 {
640 | color: #a5d8ff;
641 | }
642 |
643 | .blue-04 {
644 | color: #4dabf7;
645 | }
646 |
647 | .blue-05 {
648 | color: #339af0;
649 | }
650 |
651 | .blue-07 {
652 | color: #1c7ed6;
653 | }
654 |
655 | .blue-09 {
656 | color: #1864ab;
657 | }
658 |
659 | .cyan-00 {
660 | color: #e3fafc;
661 | }
662 |
663 | .cyan-02 {
664 | color: #99e9f2;
665 | }
666 |
667 | .cyan-04 {
668 | color: #3bc9db;
669 | }
670 |
671 | .cyan-05 {
672 | color: #22b8cf;
673 | }
674 |
675 | .cyan-07 {
676 | color: #1098ad;
677 | }
678 |
679 | .cyan-09 {
680 | color: #0b7285;
681 | }
682 |
683 | .teal-00 {
684 | color: #e6fcf5;
685 | }
686 |
687 | .teal-02 {
688 | color: #96f2d7;
689 | }
690 |
691 | .teal-04 {
692 | color: #38d9a9;
693 | }
694 |
695 | .teal-05 {
696 | color: #20c997;
697 | }
698 |
699 | .teal-07 {
700 | color: #0ca678;
701 | }
702 |
703 | .teal-09 {
704 | color: #087f5b;
705 | }
706 |
707 | .green-00 {
708 | color: #ebfbee;
709 | }
710 |
711 | .green-02 {
712 | color: #b2f2bb;
713 | }
714 |
715 | .green-04 {
716 | color: #69db7c;
717 | }
718 |
719 | .green-05 {
720 | color: #51cf66;
721 | }
722 |
723 | .green-07 {
724 | color: #37b24d;
725 | }
726 |
727 | .green-09 {
728 | color: #2b8a3e;
729 | }
730 |
731 | .lime-00 {
732 | color: #f4fce3;
733 | }
734 |
735 | .lime-02 {
736 | color: #d8f5a2;
737 | }
738 |
739 | .lime-04 {
740 | color: #a9e34b;
741 | }
742 |
743 | .lime-05 {
744 | color: #94d82d;
745 | }
746 |
747 | .lime-07 {
748 | color: #74b816;
749 | }
750 |
751 | .lime-09 {
752 | color: #5c940d;
753 | }
754 |
755 | .yellow-00 {
756 | color: #fff9db;
757 | }
758 |
759 | .yellow-02 {
760 | color: #ffec99;
761 | }
762 |
763 | .yellow-04 {
764 | color: #ffd43b;
765 | }
766 |
767 | .yellow-05 {
768 | color: #fcc419;
769 | }
770 |
771 | .yellow-07 {
772 | color: #f59f00;
773 | }
774 |
775 | .yellow-09 {
776 | color: #e67700;
777 | }
778 |
779 | .orange-00 {
780 | color: #fff4e6;
781 | }
782 |
783 | .orange-02 {
784 | color: #ffd8a8;
785 | }
786 |
787 | .orange-04 {
788 | color: #ffa94d;
789 | }
790 |
791 | .orange-05 {
792 | color: #ff922b;
793 | }
794 |
795 | .orange-07 {
796 | color: #f76707;
797 | }
798 |
799 | .orange-09 {
800 | color: #d9480f;
801 | }
802 |
803 | .white {
804 | color: #fff;
805 | }
806 |
807 | .black {
808 | color: #000;
809 | }
810 |
811 | .gray {
812 | color: #333;
813 | }
814 |
815 | .display-flex {
816 | display: flex;
817 | }
818 |
819 | .display-inline-flex {
820 | display: inline-flex;
821 | }
822 |
823 | .flex-row {
824 | flex-direction: row;
825 | }
826 |
827 | .flex-row-reverse {
828 | flex-direction: row-reverse;
829 | }
830 |
831 | .flex-column {
832 | flex-direction: column;
833 | }
834 |
835 | .flex-column-reverse {
836 | flex-direction: column-reverse;
837 | }
838 |
839 | .flex-align-stretch {
840 | align-items: stretch;
841 | }
842 |
843 | .flex-align-start {
844 | align-items: flex-start;
845 | }
846 |
847 | .flex-align-end {
848 | align-items: flex-end;
849 | }
850 |
851 | .flex-align-baseline {
852 | align-items: baseline;
853 | }
854 |
855 | .flex-align-center {
856 | align-items: center;
857 | }
858 |
859 | .flex-justify-between {
860 | justify-content: space-between;
861 | }
862 |
863 | .flex-justify-around {
864 | justify-content: space-around;
865 | }
866 |
867 | .flex-justify-evenly {
868 | justify-content: space-evenly;
869 | }
870 |
871 | .flex-justify-start {
872 | justify-content: flex-start;
873 | }
874 |
875 | .flex-justify-end {
876 | justify-content: flex-end;
877 | }
878 |
879 | .flex-justify-center {
880 | justify-content: center;
881 | }
882 |
883 | .flex-wrap {
884 | flex-wrap: wrap;
885 | }
886 |
887 | .flex-wrap-reverse {
888 | flex-wrap: wrap-reverse;
889 | }
890 |
891 | .flex-no-wrap {
892 | flex-wrap: nowrap;
893 | }
894 |
895 | .align-content-center {
896 | align-content: center;
897 | }
898 |
899 | .align-content-start {
900 | align-content: flex-start;
901 | }
902 |
903 | .align-content-end {
904 | align-content: flex-end;
905 | }
906 |
907 | .align-content-between {
908 | align-content: space-between;
909 | }
910 |
911 | .align-content-around {
912 | align-content: space-around;
913 | }
914 |
915 | .align-content-evenly {
916 | align-content: space-evenly;
917 | }
918 |
919 | .flex-self-auto {
920 | align-self: auto;
921 | }
922 |
923 | .flex-self-end {
924 | align-self: flex-end;
925 | }
926 |
927 | .flex-self-start {
928 | align-self: flex-start;
929 | }
930 |
931 | .flex-self-stretch {
932 | align-self: stretch;
933 | }
934 |
935 | .flex-self-center {
936 | align-self: center;
937 | }
938 |
939 | .flex-self-baseline {
940 | align-self: baseline;
941 | }
942 |
943 | .flex-order-0 {
944 | order: 0;
945 | }
946 |
947 | .flex-order-1 {
948 | order: 1;
949 | }
950 |
951 | .flex-order-2 {
952 | order: 2;
953 | }
954 |
955 | .flex-order-3 {
956 | order: 3;
957 | }
958 |
959 | .flex-order-minus-1 {
960 | order: -1;
961 | }
962 |
963 | .flex-grow-0 {
964 | flex-grow: 0;
965 | }
966 |
967 | .flex-grow-1 {
968 | flex-grow: 1;
969 | }
970 |
971 | .flex-grow-2 {
972 | flex-grow: 2;
973 | }
974 |
975 | /*will occupy double the space*/
976 | .flex-grow-3 {
977 | flex-grow: 3;
978 | }
979 |
980 | /*will occupy three times the space*/
981 | .flex-shrink-1 {
982 | flex-shrink: 1;
983 | }
984 |
985 | .flex-shrink-0 {
986 | flex-shrink: 0;
987 | }
988 |
989 | .flex-grow-0-shrink-1 {
990 | flex-grow: 0;
991 | flex-shrink: 1;
992 | }
993 |
994 | .flex-grow-1-shrink-0 {
995 | flex-grow: 1;
996 | flex-shrink: 0;
997 | }
998 |
999 | .flex-basis-0 {
1000 | flex-basis: 0;
1001 | }
1002 |
1003 | .flex-basis-20 {
1004 | flex-basis: 2rem;
1005 | }
1006 |
1007 | .flex-basis-40 {
1008 | flex-basis: 4rem;
1009 | }
1010 |
1011 | .flex-basis-80 {
1012 | flex-basis: 8rem;
1013 | }
1014 |
1015 | .flex-basis-120 {
1016 | flex-basis: 12rem;
1017 | }
1018 |
1019 | .flex-basis-160 {
1020 | flex-basis: 16rem;
1021 | }
1022 |
1023 | .flex-basis-240 {
1024 | flex-basis: 24rem;
1025 | }
1026 |
1027 | .flex-basis-320 {
1028 | flex-basis: 32rem;
1029 | }
1030 |
1031 | .flex-basis-480 {
1032 | flex-basis: 48rem;
1033 | }
1034 |
1035 | .flex-basis-640 {
1036 | flex-basis: 64rem;
1037 | }
1038 |
1039 | .flex-basis-800 {
1040 | flex-basis: 80rem;
1041 | }
1042 |
1043 | .flex-basis-960 {
1044 | flex-basis: 96rem;
1045 | }
1046 |
1047 | .flex-basis-1280 {
1048 | flex-basis: 128rem;
1049 | }
1050 |
1051 | .flex-basis-100 {
1052 | flex-basis: 10rem;
1053 | }
1054 |
1055 | .flex-basis-200 {
1056 | flex-basis: 20rem;
1057 | }
1058 |
1059 | .flex-basis-400 {
1060 | flex-basis: 40rem;
1061 | }
1062 |
1063 | .flex-basis-560 {
1064 | flex-basis: 56rem;
1065 | }
1066 |
1067 | .flex-basis-720 {
1068 | flex-basis: 72rem;
1069 | }
1070 |
1071 | .flex-basis-1040 {
1072 | flex-basis: 104rem;
1073 | }
1074 |
1075 | .flex-basis-1120 {
1076 | flex-basis: 112rem;
1077 | }
1078 |
1079 | .flex-basis-1200 {
1080 | flex-basis: 120rem;
1081 | }
1082 |
1083 | .flex-basis-10-percent {
1084 | flex-basis: 10%;
1085 | }
1086 |
1087 | .flex-basis-20-percent {
1088 | flex-basis: 20%;
1089 | }
1090 |
1091 | .flex-basis-25-percent {
1092 | flex-basis: 25%;
1093 | }
1094 |
1095 | .flex-basis-30-percent {
1096 | flex-basis: 30%;
1097 | }
1098 |
1099 | .flex-basis-33-percent {
1100 | flex-basis: 33.33%;
1101 | }
1102 |
1103 | .flex-basis-40-percent {
1104 | flex-basis: 40%;
1105 | }
1106 |
1107 | .flex-basis-50-percent {
1108 | flex-basis: 50%;
1109 | }
1110 |
1111 | .flex-basis-60-percent {
1112 | flex-basis: 60%;
1113 | }
1114 |
1115 | .flex-basis-66-percent {
1116 | flex-basis: 66.67%;
1117 | }
1118 |
1119 | .flex-basis-70-percent {
1120 | flex-basis: 70%;
1121 | }
1122 |
1123 | .flex-basis-75-percent {
1124 | flex-basis: 75%;
1125 | }
1126 |
1127 | .flex-basis-80-percent {
1128 | flex-basis: 80%;
1129 | }
1130 |
1131 | .flex-basis-90-percent {
1132 | flex-basis: 90%;
1133 | }
1134 |
1135 | .flex-basis-100-percent {
1136 | flex-basis: 100%;
1137 | }
1138 |
1139 | .position-relative {
1140 | position: relative;
1141 | }
1142 |
1143 | .position-absolute {
1144 | position: absolute;
1145 | }
1146 |
1147 | .position-fixed {
1148 | position: fixed;
1149 | }
1150 |
1151 | .position-sticky {
1152 | position: sticky;
1153 | }
1154 |
1155 | .top-0 {
1156 | top: 0;
1157 | }
1158 |
1159 | .top-2 {
1160 | top: 0.2rem;
1161 | }
1162 |
1163 | .top-4 {
1164 | top: 0.4rem;
1165 | }
1166 |
1167 | .top-8 {
1168 | top: 0.8rem;
1169 | }
1170 |
1171 | .top-12 {
1172 | top: 1.2rem;
1173 | }
1174 |
1175 | .top-16 {
1176 | top: 1.6rem;
1177 | }
1178 |
1179 | .top-24 {
1180 | top: 2.4rem;
1181 | }
1182 |
1183 | .bottom-0 {
1184 | bottom: 0;
1185 | }
1186 |
1187 | .left-0 {
1188 | left: 0;
1189 | }
1190 |
1191 | .right-0 {
1192 | right: 0;
1193 | }
1194 |
1195 | .overflow-hidden {
1196 | overflow: hidden;
1197 | }
1198 |
1199 | .display-block {
1200 | display: block;
1201 | }
1202 |
1203 | .display-inline {
1204 | display: inline;
1205 | }
1206 |
1207 | .display-inline-block {
1208 | display: inline-block;
1209 | }
1210 |
1211 | .display-none {
1212 | display: none;
1213 | }
1214 |
1215 | .display-table {
1216 | display: table;
1217 | }
1218 |
1219 | /*
1220 | .grid {
1221 | display: grid;
1222 | gap: 9.6rem; //applies both to row and column
1223 | }*/
1224 | .display-grid {
1225 | display: grid;
1226 | }
1227 |
1228 | .display-inline-grid {
1229 | display: inline-grid;
1230 | }
1231 |
1232 | .grid {
1233 | display: grid;
1234 | column-gap: 6.4rem;
1235 | row-gap: 9.6rem;
1236 | }
1237 |
1238 | .display-grid-columns-25percent-75percent {
1239 | display: grid;
1240 | grid-template-columns: 25% 75%;
1241 | }
1242 |
1243 | .grid-columns-25-percent-75-percent {
1244 | grid-template-columns: 25% 75%;
1245 | }
1246 |
1247 | .display-grid-columns-50percent-50percent {
1248 | display: grid;
1249 | grid-template-columns: 50% 50%;
1250 | }
1251 |
1252 | .grid-columns-50-percent-50-percent {
1253 | grid-template-columns: 50% 50%;
1254 | }
1255 |
1256 | .display-grid-columns-1fr-2fr {
1257 | display: grid;
1258 | grid-template-columns: 1fr 2fr;
1259 | }
1260 |
1261 | .grid-columns-1fr-2fr {
1262 | grid-template-columns: 1fr 2fr;
1263 | }
1264 |
1265 | .display-grid-columns-1fr-1fr {
1266 | display: grid;
1267 | grid-template-columns: 1fr 1fr;
1268 | }
1269 |
1270 | .grid-columns-1fr-1fr {
1271 | grid-template-columns: 1fr 1fr;
1272 | }
1273 |
1274 | .display-grid-columns-200-2fr-1fr {
1275 | display: grid;
1276 | grid-template-columns: 200px 2fr 1fr;
1277 | }
1278 |
1279 | .grid-columns-200-2fr-1fr {
1280 | grid-template-columns: 200px 2fr 1fr;
1281 | }
1282 |
1283 | .display-grid-columns-200-1fr {
1284 | display: grid;
1285 | grid-template-columns: 20rem 1fr;
1286 | }
1287 |
1288 | .grid-columns-1fr-auto {
1289 | grid-template-columns: 1fr auto;
1290 | }
1291 |
1292 | .display-grid-1fr-auto {
1293 | display: grid;
1294 | grid-template-columns: 1fr auto;
1295 | }
1296 |
1297 | .grid-columns-200-1fr {
1298 | grid-template-columns: 20rem 1fr;
1299 | }
1300 |
1301 | .grid-columns-250-1fr-1fr-1fr-1fr-1fr {
1302 | grid-template-columns: 250px 1fr 1fr 1fr 1fr 1fr;
1303 | }
1304 |
1305 | .grid-columns-250-repeat-5-fr {
1306 | grid-template-columns: 250px repeat(5, 1fr);
1307 | }
1308 |
1309 | .grid-columns-repeat-4-200 {
1310 | grid-template-columns: repeat(4, 200px);
1311 | }
1312 |
1313 | .display-grid-rows-25percent-75percent {
1314 | display: grid;
1315 | grid-template-columns: 25% 75%;
1316 | }
1317 |
1318 | .grid-rows-25-percent-75-percent {
1319 | grid-template-columns: 25% 75%;
1320 | }
1321 |
1322 | .display-grid-rows-50percent-50percent {
1323 | display: grid;
1324 | grid-template-columns: 50% 50%;
1325 | }
1326 |
1327 | .grid-rows-50-percent-50-percent {
1328 | grid-template-columns: 50% 50%;
1329 | }
1330 |
1331 | .display-grid-rows-auto-1fr-auto {
1332 | display: grid;
1333 | grid-template-rows: auto 1fr auto;
1334 | }
1335 |
1336 | .grid-rows-auto-1fr-auto {
1337 | grid-template-rows: auto 1fr auto;
1338 | }
1339 |
1340 | .display-grid-rows-1fr-2fr {
1341 | display: grid;
1342 | grid-template-rows: 1fr 2fr;
1343 | }
1344 |
1345 | .grid-rows-1fr-2fr {
1346 | grid-template-rows: 1fr 2fr;
1347 | }
1348 |
1349 | .display-grid-rows-1fr-1fr {
1350 | display: grid;
1351 | grid-template-rows: 1fr 1fr;
1352 | }
1353 |
1354 | .grid-rows-1fr-1fr {
1355 | grid-template-rows: 1fr 1fr;
1356 | }
1357 |
1358 | .display-grid-rows-1fr-1fr-1fr {
1359 | display: grid;
1360 | grid-template-rows: 1fr 1fr 1fr;
1361 | }
1362 |
1363 | .grid-rows-1fr-1fr-1fr {
1364 | grid-template-rows: 1fr 1fr 1fr;
1365 | }
1366 |
1367 | .display-grid-rows-200-2fr-1fr {
1368 | display: grid;
1369 | grid-template-rows: 200px 2fr 1fr;
1370 | }
1371 |
1372 | .grid-rows-200-2fr-1fr {
1373 | grid-template-rows: 200px 2fr 1fr;
1374 | }
1375 |
1376 | .display-grid-rows-64-1fr-100 {
1377 | display: grid;
1378 | grid-template-rows: 64px 1fr 100px;
1379 | }
1380 |
1381 | .display-grid-rows-64-1fr-100-full-page {
1382 | display: grid;
1383 | grid-template-rows: 64px 1fr 100px;
1384 | min-height: 100%;
1385 | }
1386 |
1387 | .grid-rows-64-1fr-100 {
1388 | grid-template-rows: 64px 1fr 100px;
1389 | }
1390 |
1391 | .grid-flow-row {
1392 | grid-auto-flow: row;
1393 | }
1394 |
1395 | .grid-flow-column {
1396 | grid-auto-flow: column;
1397 | }
1398 |
1399 | .grid-4-columns-auto {
1400 | grid-template-columns: repeat(4, auto);
1401 | }
1402 |
1403 | .display-grid-4-columns-auto {
1404 | display: grid;
1405 | grid-template-columns: repeat(4, auto);
1406 | }
1407 |
1408 | .grid-2-columns {
1409 | grid-template-columns: 1fr 1fr;
1410 | }
1411 |
1412 | .grid-2-columns {
1413 | grid-template-columns: repeat(2, 1fr);
1414 | }
1415 |
1416 | .grid-3-columns {
1417 | grid-template-columns: repeat(3, 1fr);
1418 | }
1419 |
1420 | .grid-4-columns {
1421 | grid-template-columns: repeat(4, 1fr);
1422 | }
1423 |
1424 | .grid-5-columns {
1425 | grid-template-columns: repeat(5, 1fr);
1426 | }
1427 |
1428 | .grid-6-columns {
1429 | grid-template-columns: repeat(6, 1fr);
1430 | }
1431 |
1432 | .grid-7-columns {
1433 | grid-template-columns: repeat(7, 1fr);
1434 | }
1435 |
1436 | .display-grid-2-columns {
1437 | display: grid;
1438 | grid-template-columns: 1fr 1fr;
1439 | }
1440 |
1441 | .display-grid-2-columns {
1442 | display: grid;
1443 | grid-template-columns: repeat(2, 1fr);
1444 | }
1445 |
1446 | .display-grid-3-columns {
1447 | display: grid;
1448 | grid-template-columns: repeat(3, 1fr);
1449 | }
1450 |
1451 | .display-grid-4-columns {
1452 | display: grid;
1453 | grid-template-columns: repeat(4, 1fr);
1454 | }
1455 |
1456 | .display-grid-5-columns {
1457 | display: grid;
1458 | grid-template-columns: repeat(5, 1fr);
1459 | }
1460 |
1461 | .display-grid-6-columns {
1462 | display: grid;
1463 | grid-template-columns: repeat(6, 1fr);
1464 | }
1465 |
1466 | .display-grid-7-columns {
1467 | display: grid;
1468 | grid-template-columns: repeat(7, 1fr);
1469 | }
1470 |
1471 | .grid-2-rows {
1472 | grid-template-rows: repeat(2, 1fr);
1473 | }
1474 |
1475 | .grid-3-rows {
1476 | grid-template-rows: repeat(3, 1fr);
1477 | }
1478 |
1479 | .grid-4-rows {
1480 | grid-template-rows: repeat(4, 1fr);
1481 | }
1482 |
1483 | .grid-5-rows {
1484 | grid-template-rows: repeat(5, 1fr);
1485 | }
1486 |
1487 | .grid-6-rows {
1488 | grid-template-rows: repeat(6, 1fr);
1489 | }
1490 |
1491 | .grid-7-rows {
1492 | grid-template-rows: repeat(7, 1fr);
1493 | }
1494 |
1495 | .display-grid-2-rows {
1496 | display: grid;
1497 | grid-template-rows: repeat(2, 1fr);
1498 | }
1499 |
1500 | .display-grid-3-rows {
1501 | display: grid;
1502 | grid-template-rows: repeat(3, 1fr);
1503 | }
1504 |
1505 | .display-grid-4-rows {
1506 | display: grid;
1507 | grid-template-rows: repeat(4, 1fr);
1508 | }
1509 |
1510 | .display-grid-5-rows {
1511 | display: grid;
1512 | grid-template-rows: repeat(5, 1fr);
1513 | }
1514 |
1515 | .display-grid-6-rows {
1516 | display: grid;
1517 | grid-template-rows: repeat(6, 1fr);
1518 | }
1519 |
1520 | .display-grid-7-rows {
1521 | display: grid;
1522 | grid-template-rows: repeat(7, 1fr);
1523 | }
1524 |
1525 | .grid-justify-center {
1526 | justify-content: center;
1527 | }
1528 |
1529 | .grid-justify-start {
1530 | justify-content: start;
1531 | }
1532 |
1533 | .grid-justify-end {
1534 | justify-content: end;
1535 | }
1536 |
1537 | .grid-justify-between {
1538 | justify-content: space-between;
1539 | }
1540 |
1541 | .grid-justify-around {
1542 | justify-content: space-around;
1543 | }
1544 |
1545 | .grid-justify-evenly {
1546 | justify-content: space-evenly;
1547 | }
1548 |
1549 | .grid-justify-stretch {
1550 | justify-content: stretch;
1551 | }
1552 |
1553 | .grid-center-vertical {
1554 | align-items: center;
1555 | }
1556 |
1557 | .grid-self-center {
1558 | align-self: center;
1559 | }
1560 |
1561 | .grid-items-center {
1562 | justify-items: center;
1563 | }
1564 |
1565 | .grid-items-start {
1566 | justify-items: start;
1567 | }
1568 |
1569 | .grid-items-end {
1570 | justify-items: end;
1571 | }
1572 |
1573 | /*
1574 | 1.The grid container has a height value that is greater than the sum of individual
1575 | row heights
1576 | 2. And when none of the grid items has a height specified in fr units
1577 | */
1578 | .grid-align-center {
1579 | align-content: center;
1580 | }
1581 |
1582 | .grid-align-start {
1583 | align-content: start;
1584 | }
1585 |
1586 | .grid-align-end {
1587 | align-content: end;
1588 | }
1589 |
1590 | .grid-align-between {
1591 | align-content: space-between;
1592 | }
1593 |
1594 | .grid-align-around {
1595 | align-content: space-around;
1596 | }
1597 |
1598 | .grid-align-evenly {
1599 | align-content: space-evenly;
1600 | }
1601 |
1602 | .grid-align-stretch {
1603 | align-content: stretch;
1604 | }
1605 |
1606 | .flex-align-center {
1607 | align-content: center;
1608 | }
1609 |
1610 | .flex-align-start {
1611 | align-content: flex-start;
1612 | }
1613 |
1614 | .flex-align-end {
1615 | align-content: flex-end;
1616 | }
1617 |
1618 | .flex-align-between {
1619 | align-content: space-between;
1620 | }
1621 |
1622 | .flex-align-around {
1623 | align-content: space-around;
1624 | }
1625 |
1626 | .flex-align-evenly {
1627 | align-content: space-evenly;
1628 | }
1629 |
1630 | .flex-align-stretch {
1631 | align-content: stretch;
1632 | }
1633 |
1634 | /*
1635 | The property place-content is a shorthand property in Grid that allows you to control
1636 | the spacing of grid items along both the block and inline axes at once. It can specified with
1637 | one or two values. (Align content + justify content)
1638 | */
1639 | .place-content-center {
1640 | place-content: center;
1641 | }
1642 |
1643 | .place-content-start {
1644 | place-content: start;
1645 | }
1646 |
1647 | .place-content-end {
1648 | place-content: end;
1649 | }
1650 |
1651 | .place-content-between {
1652 | place-content: space-between;
1653 | }
1654 |
1655 | .place-content-around {
1656 | place-content: space-around;
1657 | }
1658 |
1659 | .place-content-evenly {
1660 | place-content: space-evenly;
1661 | }
1662 |
1663 | .place-content-stretch {
1664 | place-content: stretch;
1665 | }
1666 |
1667 | .grid-place-center-between {
1668 | place-content: center space-between;
1669 | }
1670 |
1671 | /*
1672 | GRID PLACE ITEMS
1673 | The property place-items is a shorthand property in Grid that allows you to align items
1674 | along both the block and inline directions at once.
1675 | . It can specified with one or two values. (Align Items + Justify items)
1676 | */
1677 | .place-items-center {
1678 | place-items: center;
1679 | }
1680 |
1681 | /*
1682 | To center align horizontally within each column
1683 | */
1684 | .justify-items-start {
1685 | justify-items: start;
1686 | }
1687 |
1688 | .justify-items-end {
1689 | justify-items: end;
1690 | }
1691 |
1692 | .justify-items-center {
1693 | justify-items: center;
1694 | }
1695 |
1696 | .justify-items-stretch {
1697 | justify-items: stretch;
1698 | }
1699 |
1700 | /*
1701 | The property align-items allows us to vertically align the content within the rows, while
1702 | the previous property align-content allows us to vertically space out the entire rows.
1703 | */
1704 | /*
1705 | To center align vertically within each row
1706 | */
1707 | .grid-items-center {
1708 | align-items: center;
1709 | }
1710 |
1711 | /*
1712 | GRID COLUMN START It specifies the item's start position.
1713 | */
1714 | .column-start-1 {
1715 | grid-column-start: 1;
1716 | }
1717 |
1718 | .column-start-2 {
1719 | grid-column-start: 2;
1720 | }
1721 |
1722 | .column-start-3 {
1723 | grid-column-start: 3;
1724 | }
1725 |
1726 | .column-start-4 {
1727 | grid-column-start: 4;
1728 | }
1729 |
1730 | .column-start-5 {
1731 | grid-column-start: 5;
1732 | }
1733 |
1734 | .column-start-minus {
1735 | grid-column-start: -1;
1736 | }
1737 |
1738 | /*
1739 | GRID COLUMN END It specifies the item's end position.
1740 | */
1741 | .column-end-1 {
1742 | grid-column-end: 1;
1743 | }
1744 |
1745 | .column-end-2 {
1746 | grid-column-end: 2;
1747 | }
1748 |
1749 | .column-end-3 {
1750 | grid-column-end: 3;
1751 | }
1752 |
1753 | .column-end-4 {
1754 | grid-column-end: 4;
1755 | }
1756 |
1757 | .column-end-5 {
1758 | grid-column-end: 5;
1759 | }
1760 |
1761 | .column-end-minus {
1762 | grid-column-end: -1;
1763 | }
1764 |
1765 | .flex-row-wrap {
1766 | flex-flow: row wrap;
1767 | }
1768 |
1769 | .flex-column-wrap {
1770 | flex-flow: column wrap;
1771 | }
1772 |
1773 | .display-flex-center-both {
1774 | display: flex;
1775 | align-items: center;
1776 | justify-content: center;
1777 | }
1778 |
1779 | .display-flex-end-both {
1780 | display: flex;
1781 | align-items: flex-end;
1782 | justify-content: flex-end;
1783 | }
1784 |
1785 | .width-max-content {
1786 | width: max-content;
1787 | }
1788 |
1789 | .width-min-content {
1790 | width: min-content;
1791 | }
1792 |
1793 | .width-fit-content {
1794 | width: fit-content;
1795 | }
1796 |
1797 | .min-height-100vh {
1798 | min-height: 100vh;
1799 | }
1800 |
1801 | .min-height-90vh {
1802 | min-height: 90vh;
1803 | }
1804 |
1805 | .min-height-80vh {
1806 | min-height: 80vh;
1807 | }
1808 |
1809 | .min-height-70vh {
1810 | min-height: 70vh;
1811 | }
1812 |
1813 | .min-height-60vh {
1814 | min-height: 60vh;
1815 | }
1816 |
1817 | .min-height-50vh {
1818 | min-height: 50vh;
1819 | }
1820 |
1821 | .min-height-40vh {
1822 | min-height: 40vh;
1823 | }
1824 |
1825 | .min-height-35vh {
1826 | min-height: 35vh;
1827 | }
1828 |
1829 | .min-height-30vh {
1830 | min-height: 30vh;
1831 | }
1832 |
1833 | /*These are a collection of CSS Tips, Tricks & Less Known Properties to help you achieve certain results fast*/
1834 | .smooth-scrolling {
1835 | scroll-behavior: smooth;
1836 | }
1837 |
1838 | .cursor-pointer {
1839 | cursor: pointer;
1840 | }
1841 |
1842 | .border-radius-0 {
1843 | border-radius: 0;
1844 | }
1845 |
1846 | .border-radius-2 {
1847 | border-radius: 0.2rem;
1848 | }
1849 |
1850 | .border-radius-4 {
1851 | border-radius: 0.4rem;
1852 | }
1853 |
1854 | .border-radius-8 {
1855 | border-radius: 0.8rem;
1856 | }
1857 |
1858 | .border-radius-12 {
1859 | border-radius: 1.2rem;
1860 | }
1861 |
1862 | .border-radius-16 {
1863 | border-radius: 1.6rem;
1864 | }
1865 |
1866 | .border-radius-24 {
1867 | border-radius: 2.4rem;
1868 | }
1869 |
1870 | .border-radius-32 {
1871 | border-radius: 3.2rem;
1872 | }
1873 |
1874 | .border-radius-48 {
1875 | border-radius: 4.8rem;
1876 | }
1877 |
1878 | .border-radius-64 {
1879 | border-radius: 6.4rem;
1880 | }
1881 |
1882 | .border-radius-80 {
1883 | border-radius: 8rem;
1884 | }
1885 |
1886 | .border-radius-96 {
1887 | border-radius: 9.6rem;
1888 | }
1889 |
1890 | .border-radius-128 {
1891 | border-radius: 12.8rem;
1892 | }
1893 |
1894 | .border-radius-10 {
1895 | border-radius: 1rem;
1896 | }
1897 |
1898 | .border-radius-20 {
1899 | border-radius: 2rem;
1900 | }
1901 |
1902 | .border-radius-40 {
1903 | border-radius: 4rem;
1904 | }
1905 |
1906 | .border-radius-56 {
1907 | border-radius: 5.6rem;
1908 | }
1909 |
1910 | .border-radius-72 {
1911 | border-radius: 7.2rem;
1912 | }
1913 |
1914 | .border-radius-104 {
1915 | border-radius: 10.4rem;
1916 | }
1917 |
1918 | .border-radius-112 {
1919 | border-radius: 11.2rem;
1920 | }
1921 |
1922 | .border-radius-120 {
1923 | border-radius: 12rem;
1924 | }
1925 |
1926 | .border-radius-10-percent {
1927 | border-radius: 10%;
1928 | }
1929 |
1930 | .border-radius-20-percent {
1931 | border-radius: 20%;
1932 | }
1933 |
1934 | .border-radius-25-percent {
1935 | border-radius: 25%;
1936 | }
1937 |
1938 | .border-radius-30-percent {
1939 | border-radius: 30%;
1940 | }
1941 |
1942 | .border-radius-33-percent {
1943 | border-radius: 33.33%;
1944 | }
1945 |
1946 | .border-radius-40-percent {
1947 | border-radius: 40%;
1948 | }
1949 |
1950 | .border-radius-50-percent {
1951 | border-radius: 50%;
1952 | }
1953 |
1954 | .border-radius-60-percent {
1955 | border-radius: 60%;
1956 | }
1957 |
1958 | .border-radius-66-percent {
1959 | border-radius: 66.67%;
1960 | }
1961 |
1962 | .border-radius-70-percent {
1963 | border-radius: 70%;
1964 | }
1965 |
1966 | .border-radius-75-percent {
1967 | border-radius: 75%;
1968 | }
1969 |
1970 | .border-radius-80-percent {
1971 | border-radius: 80%;
1972 | }
1973 |
1974 | .border-radius-90-percent {
1975 | border-radius: 90%;
1976 | }
1977 |
1978 | .border-radius-100-percent {
1979 | border-radius: 100%;
1980 | }
1981 |
1982 | .border-bottom-1-black {
1983 | border-bottom: 1px solid black;
1984 | }
1985 |
1986 | /*FONT SIZE SYSTEM (px)
1987 | 10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98*/
1988 | .font-size-10 {
1989 | font-size: 1rem;
1990 | }
1991 |
1992 | .font-size-12 {
1993 | font-size: 1.2rem;
1994 | }
1995 |
1996 | .font-size-14 {
1997 | font-size: 1.4rem;
1998 | }
1999 |
2000 | .font-size-16 {
2001 | font-size: 1.6rem;
2002 | }
2003 |
2004 | .font-size-18 {
2005 | font-size: 1.8rem;
2006 | }
2007 |
2008 | .font-size-20 {
2009 | font-size: 2rem;
2010 | }
2011 |
2012 | .font-size-24 {
2013 | font-size: 2.4rem;
2014 | }
2015 |
2016 | .font-size-30 {
2017 | font-size: 3rem;
2018 | }
2019 |
2020 | .font-size-36 {
2021 | font-size: 3.6rem;
2022 | }
2023 |
2024 | .font-size-44 {
2025 | font-size: 4.4rem;
2026 | }
2027 |
2028 | .font-size-52 {
2029 | font-size: 5.2rem;
2030 | }
2031 |
2032 | .font-size-62 {
2033 | font-size: 6.2rem;
2034 | }
2035 |
2036 | .font-size-74 {
2037 | font-size: 7.4rem;
2038 | }
2039 |
2040 | .font-size-86 {
2041 | font-size: 8.6rem;
2042 | }
2043 |
2044 | .font-size-98 {
2045 | font-size: 9.8rem;
2046 | }
2047 |
2048 | .font-weight-300 {
2049 | font-weight: 300;
2050 | }
2051 |
2052 | .font-weight-400 {
2053 | font-weight: 400;
2054 | }
2055 |
2056 | .font-weight-500 {
2057 | font-weight: 500;
2058 | }
2059 |
2060 | .font-weight-600 {
2061 | font-weight: 600;
2062 | }
2063 |
2064 | .font-weight-700 {
2065 | font-weight: 700;
2066 | }
2067 |
2068 | .line-height-10 {
2069 | line-height: 1;
2070 | }
2071 |
2072 | .line-height-11 {
2073 | line-height: 1.1;
2074 | }
2075 |
2076 | .line-height-12 {
2077 | line-height: 1.2;
2078 | }
2079 |
2080 | .line-height-13 {
2081 | line-height: 1.3;
2082 | }
2083 |
2084 | .line-height-14 {
2085 | line-height: 1.4;
2086 | }
2087 |
2088 | .line-height-15 {
2089 | line-height: 1.5;
2090 | }
2091 |
2092 | .line-height-16 {
2093 | line-height: 1.6;
2094 | }
2095 |
2096 | .line-height-17 {
2097 | line-height: 1.7;
2098 | }
2099 |
2100 | .letter-spacing-minus-1 {
2101 | letter-spacing: -1px;
2102 | }
2103 |
2104 | .letter-spacing-minus-05 {
2105 | letter-spacing: -0.5px;
2106 | }
2107 |
2108 | .letter-spacing-05 {
2109 | letter-spacing: 0.5px;
2110 | }
2111 |
2112 | .letter-spacing-075 {
2113 | letter-spacing: 0.75px;
2114 | }
2115 |
2116 | .letter-spacing-1 {
2117 | letter-spacing: 1px;
2118 | }
2119 |
2120 | .letter-spacing-2 {
2121 | letter-spacing: 2px;
2122 | }
2123 |
2124 | .letter-spacing-3 {
2125 | letter-spacing: 3px;
2126 | }
2127 |
2128 | .letter-spacing-4 {
2129 | letter-spacing: 4px;
2130 | }
2131 |
2132 | .text-center {
2133 | text-align: center;
2134 | }
2135 |
2136 | .text-left {
2137 | text-align: left;
2138 | }
2139 |
2140 | .text-right {
2141 | text-align: right;
2142 | }
2143 |
2144 | .text-justify {
2145 | text-align: justify;
2146 | }
2147 |
2148 | .text-uppercase {
2149 | text-transform: uppercase;
2150 | }
2151 |
2152 | .text-lowercase {
2153 | text-transform: lowercase;
2154 | }
2155 |
2156 | .text-capitalize {
2157 | text-transform: capitalize;
2158 | }
2159 |
2160 | .text-decoration-none {
2161 | text-decoration: none;
2162 | }
2163 |
2164 | .list-style-none {
2165 | list-style: none;
2166 | }
2167 |
2168 | /*SPACING SYSTEM (px)
2169 | 2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 (12 Values)
2170 | */
2171 | .margin-center {
2172 | margin-left: auto;
2173 | margin-right: auto;
2174 | }
2175 |
2176 | .gap-0 {
2177 | gap: 0;
2178 | }
2179 |
2180 | .gap-2 {
2181 | gap: 0.2rem;
2182 | }
2183 |
2184 | .gap-4 {
2185 | gap: 0.4rem;
2186 | }
2187 |
2188 | .gap-8 {
2189 | gap: 0.8rem;
2190 | }
2191 |
2192 | .gap-12 {
2193 | gap: 1.2rem;
2194 | }
2195 |
2196 | .gap-16 {
2197 | gap: 1.6rem;
2198 | }
2199 |
2200 | .gap-24 {
2201 | gap: 2.4rem;
2202 | }
2203 |
2204 | .gap-32 {
2205 | gap: 3.2rem;
2206 | }
2207 |
2208 | .gap-48 {
2209 | gap: 4.8rem;
2210 | }
2211 |
2212 | .gap-64 {
2213 | gap: 6.4rem;
2214 | }
2215 |
2216 | .gap-80 {
2217 | gap: 8rem;
2218 | }
2219 |
2220 | .gap-96 {
2221 | gap: 9.6rem;
2222 | }
2223 |
2224 | .gap-128 {
2225 | gap: 12.8rem;
2226 | }
2227 |
2228 | .gap-10 {
2229 | gap: 1rem;
2230 | }
2231 |
2232 | .gap-20 {
2233 | gap: 2rem;
2234 | }
2235 |
2236 | .gap-40 {
2237 | gap: 4rem;
2238 | }
2239 |
2240 | .gap-56 {
2241 | gap: 5.6rem;
2242 | }
2243 |
2244 | .gap-72 {
2245 | gap: 7.2rem;
2246 | }
2247 |
2248 | .gap-104 {
2249 | gap: 10.4rem;
2250 | }
2251 |
2252 | .gap-112 {
2253 | gap: 11.2rem;
2254 | }
2255 |
2256 | .gap-120 {
2257 | gap: 12rem;
2258 | }
2259 |
2260 | .row-gap-0 {
2261 | row-gap: 0;
2262 | }
2263 |
2264 | .row-gap-2 {
2265 | row-gap: 0.2rem;
2266 | }
2267 |
2268 | .row-gap-4 {
2269 | row-gap: 0.4rem;
2270 | }
2271 |
2272 | .row-gap-8 {
2273 | row-gap: 0.8rem;
2274 | }
2275 |
2276 | .row-gap-12 {
2277 | row-gap: 1.2rem;
2278 | }
2279 |
2280 | .row-gap-16 {
2281 | row-gap: 1.6rem;
2282 | }
2283 |
2284 | .row-gap-24 {
2285 | row-gap: 2.4rem;
2286 | }
2287 |
2288 | .row-gap-32 {
2289 | row-gap: 3.2rem;
2290 | }
2291 |
2292 | .row-gap-48 {
2293 | row-gap: 4.8rem;
2294 | }
2295 |
2296 | .row-gap-64 {
2297 | row-gap: 6.4rem;
2298 | }
2299 |
2300 | .row-gap-80 {
2301 | row-gap: 8rem;
2302 | }
2303 |
2304 | .row-gap-96 {
2305 | row-gap: 9.6rem;
2306 | }
2307 |
2308 | .row-gap-128 {
2309 | row-gap: 12.8rem;
2310 | }
2311 |
2312 | .row-gap-10 {
2313 | row-gap: 1rem;
2314 | }
2315 |
2316 | .row-gap-20 {
2317 | row-gap: 2rem;
2318 | }
2319 |
2320 | .row-gap-40 {
2321 | row-gap: 4rem;
2322 | }
2323 |
2324 | .row-gap-56 {
2325 | row-gap: 5.6rem;
2326 | }
2327 |
2328 | .row-gap-72 {
2329 | row-gap: 7.2rem;
2330 | }
2331 |
2332 | .row-gap-104 {
2333 | row-gap: 10.4rem;
2334 | }
2335 |
2336 | .row-gap-112 {
2337 | row-gap: 11.2rem;
2338 | }
2339 |
2340 | .row-gap-120 {
2341 | row-gap: 12rem;
2342 | }
2343 |
2344 | .column-gap-0 {
2345 | column-gap: 0;
2346 | }
2347 |
2348 | .column-gap-2 {
2349 | column-gap: 0.2rem;
2350 | }
2351 |
2352 | .column-gap-4 {
2353 | column-gap: 0.4rem;
2354 | }
2355 |
2356 | .column-gap-8 {
2357 | column-gap: 0.8rem;
2358 | }
2359 |
2360 | .column-gap-12 {
2361 | column-gap: 1.2rem;
2362 | }
2363 |
2364 | .column-gap-16 {
2365 | column-gap: 1.6rem;
2366 | }
2367 |
2368 | .column-gap-24 {
2369 | column-gap: 2.4rem;
2370 | }
2371 |
2372 | .column-gap-32 {
2373 | column-gap: 3.2rem;
2374 | }
2375 |
2376 | .column-gap-48 {
2377 | column-gap: 4.8rem;
2378 | }
2379 |
2380 | .column-gap-64 {
2381 | column-gap: 6.4rem;
2382 | }
2383 |
2384 | .column-gap-80 {
2385 | column-gap: 8rem;
2386 | }
2387 |
2388 | .column-gap-96 {
2389 | column-gap: 9.6rem;
2390 | }
2391 |
2392 | .column-gap-128 {
2393 | column-gap: 12.8rem;
2394 | }
2395 |
2396 | .column-gap-10 {
2397 | column-gap: 1rem;
2398 | }
2399 |
2400 | .column-gap-20 {
2401 | column-gap: 2rem;
2402 | }
2403 |
2404 | .column-gap-40 {
2405 | column-gap: 4rem;
2406 | }
2407 |
2408 | .column-gap-56 {
2409 | column-gap: 5.6rem;
2410 | }
2411 |
2412 | .column-gap-72 {
2413 | column-gap: 7.2rem;
2414 | }
2415 |
2416 | .column-gap-104 {
2417 | column-gap: 10.4rem;
2418 | }
2419 |
2420 | .column-gap-112 {
2421 | column-gap: 11.2rem;
2422 | }
2423 |
2424 | .column-gap-120 {
2425 | column-gap: 12rem;
2426 | }
2427 |
2428 | .margin-0 {
2429 | margin: 0;
2430 | }
2431 |
2432 | .margin-2 {
2433 | margin: 0.2rem;
2434 | }
2435 |
2436 | .margin-4 {
2437 | margin: 0.4rem;
2438 | }
2439 |
2440 | .margin-8 {
2441 | margin: 0.8rem;
2442 | }
2443 |
2444 | .margin-12 {
2445 | margin: 1.2rem;
2446 | }
2447 |
2448 | .margin-16 {
2449 | margin: 1.6rem;
2450 | }
2451 |
2452 | .margin-24 {
2453 | margin: 2.4rem;
2454 | }
2455 |
2456 | .margin-32 {
2457 | margin: 3.2rem;
2458 | }
2459 |
2460 | .margin-48 {
2461 | margin: 4.8rem;
2462 | }
2463 |
2464 | .margin-64 {
2465 | margin: 6.4rem;
2466 | }
2467 |
2468 | .margin-80 {
2469 | margin: 8rem;
2470 | }
2471 |
2472 | .margin-96 {
2473 | margin: 9.6rem;
2474 | }
2475 |
2476 | .margin-128 {
2477 | margin: 12.8rem;
2478 | }
2479 |
2480 | .margin-auto {
2481 | margin: auto;
2482 | }
2483 |
2484 | .margin-10 {
2485 | margin: 1rem;
2486 | }
2487 |
2488 | .margin-20 {
2489 | margin: 2rem;
2490 | }
2491 |
2492 | .margin-40 {
2493 | margin: 4rem;
2494 | }
2495 |
2496 | .margin-56 {
2497 | margin: 5.6rem;
2498 | }
2499 |
2500 | .margin-72 {
2501 | margin: 7.2rem;
2502 | }
2503 |
2504 | .margin-104 {
2505 | margin: 10.4rem;
2506 | }
2507 |
2508 | .margin-112 {
2509 | margin: 11.2rem;
2510 | }
2511 |
2512 | .margin-120 {
2513 | margin: 12rem;
2514 | }
2515 |
2516 | .margin-top-0 {
2517 | margin-top: 0;
2518 | }
2519 |
2520 | .margin-top-2 {
2521 | margin-top: 0.2rem;
2522 | }
2523 |
2524 | .margin-top-4 {
2525 | margin-top: 0.4rem;
2526 | }
2527 |
2528 | .margin-top-8 {
2529 | margin-top: 0.8rem;
2530 | }
2531 |
2532 | .margin-top-12 {
2533 | margin-top: 1.2rem;
2534 | }
2535 |
2536 | .margin-top-16 {
2537 | margin-top: 1.6rem;
2538 | }
2539 |
2540 | .margin-top-24 {
2541 | margin-top: 2.4rem;
2542 | }
2543 |
2544 | .margin-top-32 {
2545 | margin-top: 3.2rem;
2546 | }
2547 |
2548 | .margin-top-48 {
2549 | margin-top: 4.8rem;
2550 | }
2551 |
2552 | .margin-top-64 {
2553 | margin-top: 6.4rem;
2554 | }
2555 |
2556 | .margin-top-80 {
2557 | margin-top: 8rem;
2558 | }
2559 |
2560 | .margin-top-96 {
2561 | margin-top: 9.6rem;
2562 | }
2563 |
2564 | .margin-top-128 {
2565 | margin-top: 12.8rem;
2566 | }
2567 |
2568 | .margin-top-auto {
2569 | margin-top: auto;
2570 | }
2571 |
2572 | .margin-top-10 {
2573 | margin-top: 1rem;
2574 | }
2575 |
2576 | .margin-top-20 {
2577 | margin-top: 2rem;
2578 | }
2579 |
2580 | .margin-top-40 {
2581 | margin-top: 4rem;
2582 | }
2583 |
2584 | .margin-top-56 {
2585 | margin-top: 5.6rem;
2586 | }
2587 |
2588 | .margin-top-72 {
2589 | margin-top: 7.2rem;
2590 | }
2591 |
2592 | .margin-top-104 {
2593 | margin-top: 10.4rem;
2594 | }
2595 |
2596 | .margin-top-112 {
2597 | margin-top: 11.2rem;
2598 | }
2599 |
2600 | .margin-top-120 {
2601 | margin-top: 12rem;
2602 | }
2603 |
2604 | .margin-right-0 {
2605 | margin-right: 0;
2606 | }
2607 |
2608 | .margin-right-2 {
2609 | margin-right: 0.2rem;
2610 | }
2611 |
2612 | .margin-right-4 {
2613 | margin-right: 0.4rem;
2614 | }
2615 |
2616 | .margin-right-8 {
2617 | margin-right: 0.8rem;
2618 | }
2619 |
2620 | .margin-right-12 {
2621 | margin-right: 1.2rem;
2622 | }
2623 |
2624 | .margin-right-16 {
2625 | margin-right: 1.6rem;
2626 | }
2627 |
2628 | .margin-right-24 {
2629 | margin-right: 2.4rem;
2630 | }
2631 |
2632 | .margin-right-32 {
2633 | margin-right: 3.2rem;
2634 | }
2635 |
2636 | .margin-right-48 {
2637 | margin-right: 4.8rem;
2638 | }
2639 |
2640 | .margin-right-64 {
2641 | margin-right: 6.4rem;
2642 | }
2643 |
2644 | .margin-right-80 {
2645 | margin-right: 8rem;
2646 | }
2647 |
2648 | .margin-right-96 {
2649 | margin-right: 9.6rem;
2650 | }
2651 |
2652 | .margin-right-128 {
2653 | margin-right: 12.8rem;
2654 | }
2655 |
2656 | .margin-right-auto {
2657 | margin-right: auto;
2658 | }
2659 |
2660 | .margin-right-10 {
2661 | margin-right: 1rem;
2662 | }
2663 |
2664 | .margin-right-20 {
2665 | margin-right: 2rem;
2666 | }
2667 |
2668 | .margin-right-40 {
2669 | margin-right: 4rem;
2670 | }
2671 |
2672 | .margin-right-56 {
2673 | margin-right: 5.6rem;
2674 | }
2675 |
2676 | .margin-right-72 {
2677 | margin-right: 7.2rem;
2678 | }
2679 |
2680 | .margin-right-104 {
2681 | margin-right: 10.4rem;
2682 | }
2683 |
2684 | .margin-right-112 {
2685 | margin-right: 11.2rem;
2686 | }
2687 |
2688 | .margin-right-120 {
2689 | margin-right: 12rem;
2690 | }
2691 |
2692 | .margin-bottom-0 {
2693 | margin-bottom: 0;
2694 | }
2695 |
2696 | .margin-bottom-2 {
2697 | margin-bottom: 0.2rem;
2698 | }
2699 |
2700 | .margin-bottom-4 {
2701 | margin-bottom: 0.4rem;
2702 | }
2703 |
2704 | .margin-bottom-8 {
2705 | margin-bottom: 0.8rem;
2706 | }
2707 |
2708 | .margin-bottom-12 {
2709 | margin-bottom: 1.2rem;
2710 | }
2711 |
2712 | .margin-bottom-16 {
2713 | margin-bottom: 1.6rem;
2714 | }
2715 |
2716 | .margin-bottom-24 {
2717 | margin-bottom: 2.4rem;
2718 | }
2719 |
2720 | .margin-bottom-32 {
2721 | margin-bottom: 3.2rem;
2722 | }
2723 |
2724 | .margin-bottom-48 {
2725 | margin-bottom: 4.8rem;
2726 | }
2727 |
2728 | .margin-bottom-64 {
2729 | margin-bottom: 6.4rem;
2730 | }
2731 |
2732 | .margin-bottom-80 {
2733 | margin-bottom: 8rem;
2734 | }
2735 |
2736 | .margin-bottom-96 {
2737 | margin-bottom: 9.6rem;
2738 | }
2739 |
2740 | .margin-bottom-128 {
2741 | margin-bottom: 12.8rem;
2742 | }
2743 |
2744 | .margin-bottom-auto {
2745 | margin-bottom: auto;
2746 | }
2747 |
2748 | .margin-bottom-10 {
2749 | margin-bottom: 1rem;
2750 | }
2751 |
2752 | .margin-bottom-20 {
2753 | margin-bottom: 2rem;
2754 | }
2755 |
2756 | .margin-bottom-40 {
2757 | margin-bottom: 4rem;
2758 | }
2759 |
2760 | .margin-bottom-56 {
2761 | margin-bottom: 5.6rem;
2762 | }
2763 |
2764 | .margin-bottom-72 {
2765 | margin-bottom: 7.2rem;
2766 | }
2767 |
2768 | .margin-bottom-104 {
2769 | margin-bottom: 10.4rem;
2770 | }
2771 |
2772 | .margin-bottom-112 {
2773 | margin-bottom: 11.2rem;
2774 | }
2775 |
2776 | .margin-bottom-120 {
2777 | margin-bottom: 12rem;
2778 | }
2779 |
2780 | .margin-left-0 {
2781 | margin-left: 0;
2782 | }
2783 |
2784 | .margin-left-2 {
2785 | margin-left: 0.2rem;
2786 | }
2787 |
2788 | .margin-left-4 {
2789 | margin-left: 0.4rem;
2790 | }
2791 |
2792 | .margin-left-8 {
2793 | margin-left: 0.8rem;
2794 | }
2795 |
2796 | .margin-left-12 {
2797 | margin-left: 1.2rem;
2798 | }
2799 |
2800 | .margin-left-16 {
2801 | margin-left: 1.6rem;
2802 | }
2803 |
2804 | .margin-left-24 {
2805 | margin-left: 2.4rem;
2806 | }
2807 |
2808 | .margin-left-32 {
2809 | margin-left: 3.2rem;
2810 | }
2811 |
2812 | .margin-left-48 {
2813 | margin-left: 4.8rem;
2814 | }
2815 |
2816 | .margin-left-64 {
2817 | margin-left: 6.4rem;
2818 | }
2819 |
2820 | .margin-left-80 {
2821 | margin-left: 8rem;
2822 | }
2823 |
2824 | .margin-left-96 {
2825 | margin-left: 9.6rem;
2826 | }
2827 |
2828 | .margin-left-128 {
2829 | margin-left: 12.8rem;
2830 | }
2831 |
2832 | .margin-left-auto {
2833 | margin-left: auto;
2834 | }
2835 |
2836 | .margin-left-10 {
2837 | margin-left: 1rem;
2838 | }
2839 |
2840 | .margin-left-20 {
2841 | margin-left: 2rem;
2842 | }
2843 |
2844 | .margin-left-40 {
2845 | margin-left: 4rem;
2846 | }
2847 |
2848 | .margin-left-56 {
2849 | margin-left: 5.6rem;
2850 | }
2851 |
2852 | .margin-left-72 {
2853 | margin-left: 7.2rem;
2854 | }
2855 |
2856 | .margin-left-104 {
2857 | margin-left: 10.4rem;
2858 | }
2859 |
2860 | .margin-left-112 {
2861 | margin-left: 11.2rem;
2862 | }
2863 |
2864 | .margin-left-120 {
2865 | margin-left: 12rem;
2866 | }
2867 |
2868 | .padding-0 {
2869 | padding: 0;
2870 | }
2871 |
2872 | .padding-2 {
2873 | padding: 0.2rem;
2874 | }
2875 |
2876 | .padding-4 {
2877 | padding: 0.4rem;
2878 | }
2879 |
2880 | .padding-8 {
2881 | padding: 0.8rem;
2882 | }
2883 |
2884 | .padding-12 {
2885 | padding: 1.2rem;
2886 | }
2887 |
2888 | .padding-16 {
2889 | padding: 1.6rem;
2890 | }
2891 |
2892 | .padding-24 {
2893 | padding: 2.4rem;
2894 | }
2895 |
2896 | .padding-32 {
2897 | padding: 3.2rem;
2898 | }
2899 |
2900 | .padding-48 {
2901 | padding: 4.8rem;
2902 | }
2903 |
2904 | .padding-64 {
2905 | padding: 6.4rem;
2906 | }
2907 |
2908 | .padding-80 {
2909 | padding: 8rem;
2910 | }
2911 |
2912 | .padding-96 {
2913 | padding: 9.6rem;
2914 | }
2915 |
2916 | .padding-128 {
2917 | padding: 12.8rem;
2918 | }
2919 |
2920 | .padding-10 {
2921 | padding: 1rem;
2922 | }
2923 |
2924 | .padding-20 {
2925 | padding: 2rem;
2926 | }
2927 |
2928 | .padding-40 {
2929 | padding: 4rem;
2930 | }
2931 |
2932 | .padding-56 {
2933 | padding: 5.6rem;
2934 | }
2935 |
2936 | .padding-72 {
2937 | padding: 7.2rem;
2938 | }
2939 |
2940 | .padding-104 {
2941 | padding: 10.4rem;
2942 | }
2943 |
2944 | .padding-112 {
2945 | padding: 11.2rem;
2946 | }
2947 |
2948 | .padding-120 {
2949 | padding: 12rem;
2950 | }
2951 |
2952 | .padding-top-0 {
2953 | padding-top: 0;
2954 | }
2955 |
2956 | .padding-top-2 {
2957 | padding-top: 0.2rem;
2958 | }
2959 |
2960 | .padding-top-4 {
2961 | padding-top: 0.4rem;
2962 | }
2963 |
2964 | .padding-top-8 {
2965 | padding-top: 0.8rem;
2966 | }
2967 |
2968 | .padding-top-12 {
2969 | padding-top: 1.2rem;
2970 | }
2971 |
2972 | .padding-top-16 {
2973 | padding-top: 1.6rem;
2974 | }
2975 |
2976 | .padding-top-24 {
2977 | padding-top: 2.4rem;
2978 | }
2979 |
2980 | .padding-top-32 {
2981 | padding-top: 3.2rem;
2982 | }
2983 |
2984 | .padding-top-48 {
2985 | padding-top: 4.8rem;
2986 | }
2987 |
2988 | .padding-top-64 {
2989 | padding-top: 6.4rem;
2990 | }
2991 |
2992 | .padding-top-80 {
2993 | padding-top: 8rem;
2994 | }
2995 |
2996 | .padding-top-96 {
2997 | padding-top: 9.6rem;
2998 | }
2999 |
3000 | .padding-top-128 {
3001 | padding-top: 12.8rem;
3002 | }
3003 |
3004 | .padding-top-10 {
3005 | padding-top: 1rem;
3006 | }
3007 |
3008 | .padding-top-20 {
3009 | padding-top: 2rem;
3010 | }
3011 |
3012 | .padding-top-40 {
3013 | padding-top: 4rem;
3014 | }
3015 |
3016 | .padding-top-56 {
3017 | padding-top: 5.6rem;
3018 | }
3019 |
3020 | .padding-top-72 {
3021 | padding-top: 7.2rem;
3022 | }
3023 |
3024 | .padding-top-104 {
3025 | padding-top: 10.4rem;
3026 | }
3027 |
3028 | .padding-top-112 {
3029 | padding-top: 11.2rem;
3030 | }
3031 |
3032 | .padding-top-120 {
3033 | padding-top: 12rem;
3034 | }
3035 |
3036 | .padding-right-0 {
3037 | padding-right: 0;
3038 | }
3039 |
3040 | .padding-right-2 {
3041 | padding-right: 0.2rem;
3042 | }
3043 |
3044 | .padding-right-4 {
3045 | padding-right: 0.4rem;
3046 | }
3047 |
3048 | .padding-right-8 {
3049 | padding-right: 0.8rem;
3050 | }
3051 |
3052 | .padding-right-12 {
3053 | padding-right: 1.2rem;
3054 | }
3055 |
3056 | .padding-right-16 {
3057 | padding-right: 1.6rem;
3058 | }
3059 |
3060 | .padding-right-24 {
3061 | padding-right: 2.4rem;
3062 | }
3063 |
3064 | .padding-right-32 {
3065 | padding-right: 3.2rem;
3066 | }
3067 |
3068 | .padding-right-48 {
3069 | padding-right: 4.8rem;
3070 | }
3071 |
3072 | .padding-right-64 {
3073 | padding-right: 6.4rem;
3074 | }
3075 |
3076 | .padding-right-80 {
3077 | padding-right: 8rem;
3078 | }
3079 |
3080 | .padding-right-96 {
3081 | padding-right: 9.6rem;
3082 | }
3083 |
3084 | .padding-right-128 {
3085 | padding-right: 12.8rem;
3086 | }
3087 |
3088 | .padding-right-10 {
3089 | padding-right: 1rem;
3090 | }
3091 |
3092 | .padding-right-20 {
3093 | padding-right: 2rem;
3094 | }
3095 |
3096 | .padding-right-40 {
3097 | padding-right: 4rem;
3098 | }
3099 |
3100 | .padding-right-56 {
3101 | padding-right: 5.6rem;
3102 | }
3103 |
3104 | .padding-right-72 {
3105 | padding-right: 7.2rem;
3106 | }
3107 |
3108 | .padding-right-104 {
3109 | padding-right: 10.4rem;
3110 | }
3111 |
3112 | .padding-right-112 {
3113 | padding-right: 11.2rem;
3114 | }
3115 |
3116 | .padding-right-120 {
3117 | padding-right: 12rem;
3118 | }
3119 |
3120 | .padding-bottom-0 {
3121 | padding-bottom: 0;
3122 | }
3123 |
3124 | .padding-bottom-2 {
3125 | padding-bottom: 0.2rem;
3126 | }
3127 |
3128 | .padding-bottom-4 {
3129 | padding-bottom: 0.4rem;
3130 | }
3131 |
3132 | .padding-bottom-8 {
3133 | padding-bottom: 0.8rem;
3134 | }
3135 |
3136 | .padding-bottom-12 {
3137 | padding-bottom: 1.2rem;
3138 | }
3139 |
3140 | .padding-bottom-16 {
3141 | padding-bottom: 1.6rem;
3142 | }
3143 |
3144 | .padding-bottom-24 {
3145 | padding-bottom: 2.4rem;
3146 | }
3147 |
3148 | .padding-bottom-32 {
3149 | padding-bottom: 3.2rem;
3150 | }
3151 |
3152 | .padding-bottom-48 {
3153 | padding-bottom: 4.8rem;
3154 | }
3155 |
3156 | .padding-bottom-64 {
3157 | padding-bottom: 6.4rem;
3158 | }
3159 |
3160 | .padding-bottom-80 {
3161 | padding-bottom: 8rem;
3162 | }
3163 |
3164 | .padding-bottom-96 {
3165 | padding-bottom: 9.6rem;
3166 | }
3167 |
3168 | .padding-bottom-128 {
3169 | padding-bottom: 12.8rem;
3170 | }
3171 |
3172 | .padding-bottom-10 {
3173 | padding-bottom: 1rem;
3174 | }
3175 |
3176 | .padding-bottom-20 {
3177 | padding-bottom: 2rem;
3178 | }
3179 |
3180 | .padding-bottom-40 {
3181 | padding-bottom: 4rem;
3182 | }
3183 |
3184 | .padding-bottom-56 {
3185 | padding-bottom: 5.6rem;
3186 | }
3187 |
3188 | .padding-bottom-72 {
3189 | padding-bottom: 7.2rem;
3190 | }
3191 |
3192 | .padding-bottom-104 {
3193 | padding-bottom: 10.4rem;
3194 | }
3195 |
3196 | .padding-bottom-112 {
3197 | padding-bottom: 11.2rem;
3198 | }
3199 |
3200 | .padding-bottom-120 {
3201 | padding-bottom: 12rem;
3202 | }
3203 |
3204 | .padding-left-0 {
3205 | padding-left: 0;
3206 | }
3207 |
3208 | .padding-left-2 {
3209 | padding-left: 0.2rem;
3210 | }
3211 |
3212 | .padding-left-4 {
3213 | padding-left: 0.4rem;
3214 | }
3215 |
3216 | .padding-left-8 {
3217 | padding-left: 0.8rem;
3218 | }
3219 |
3220 | .padding-left-12 {
3221 | padding-left: 1.2rem;
3222 | }
3223 |
3224 | .padding-left-16 {
3225 | padding-left: 1.6rem;
3226 | }
3227 |
3228 | .padding-left-24 {
3229 | padding-left: 2.4rem;
3230 | }
3231 |
3232 | .padding-left-32 {
3233 | padding-left: 3.2rem;
3234 | }
3235 |
3236 | .padding-left-48 {
3237 | padding-left: 4.8rem;
3238 | }
3239 |
3240 | .padding-left-64 {
3241 | padding-left: 6.4rem;
3242 | }
3243 |
3244 | .padding-left-80 {
3245 | padding-left: 8rem;
3246 | }
3247 |
3248 | .padding-left-96 {
3249 | padding-left: 9.6rem;
3250 | }
3251 |
3252 | .padding-left-128 {
3253 | padding-left: 12.8rem;
3254 | }
3255 |
3256 | .padding-left-10 {
3257 | padding-left: 1rem;
3258 | }
3259 |
3260 | .padding-left-20 {
3261 | padding-left: 2rem;
3262 | }
3263 |
3264 | .padding-left-40 {
3265 | padding-left: 4rem;
3266 | }
3267 |
3268 | .padding-left-56 {
3269 | padding-left: 5.6rem;
3270 | }
3271 |
3272 | .padding-left-72 {
3273 | padding-left: 7.2rem;
3274 | }
3275 |
3276 | .padding-left-104 {
3277 | padding-left: 10.4rem;
3278 | }
3279 |
3280 | .padding-left-112 {
3281 | padding-left: 11.2rem;
3282 | }
3283 |
3284 | .padding-left-120 {
3285 | padding-left: 12rem;
3286 | }
3287 |
3288 | .width-0 {
3289 | width: 0;
3290 | }
3291 |
3292 | .width-20 {
3293 | width: 2rem;
3294 | }
3295 |
3296 | .width-40 {
3297 | width: 4rem;
3298 | }
3299 |
3300 | .width-80 {
3301 | width: 8rem;
3302 | }
3303 |
3304 | .width-120 {
3305 | width: 12rem;
3306 | }
3307 |
3308 | .width-160 {
3309 | width: 16rem;
3310 | }
3311 |
3312 | .width-240 {
3313 | width: 24rem;
3314 | }
3315 |
3316 | .width-320 {
3317 | width: 32rem;
3318 | }
3319 |
3320 | .width-480 {
3321 | width: 48rem;
3322 | }
3323 |
3324 | .width-640 {
3325 | width: 64rem;
3326 | }
3327 |
3328 | .width-800 {
3329 | width: 80rem;
3330 | }
3331 |
3332 | .width-960 {
3333 | width: 96rem;
3334 | }
3335 |
3336 | .width-1280 {
3337 | width: 128rem;
3338 | }
3339 |
3340 | .width-100 {
3341 | width: 10rem;
3342 | }
3343 |
3344 | .width-200 {
3345 | width: 20rem;
3346 | }
3347 |
3348 | .width-400 {
3349 | width: 40rem;
3350 | }
3351 |
3352 | .width-560 {
3353 | width: 56rem;
3354 | }
3355 |
3356 | .width-720 {
3357 | width: 72rem;
3358 | }
3359 |
3360 | .width-1040 {
3361 | width: 104rem;
3362 | }
3363 |
3364 | .width-1120 {
3365 | width: 112rem;
3366 | }
3367 |
3368 | .width-1200 {
3369 | width: 120rem;
3370 | }
3371 |
3372 | .width-10-percent {
3373 | width: 10%;
3374 | }
3375 |
3376 | .width-20-percent {
3377 | width: 20%;
3378 | }
3379 |
3380 | .width-25-percent {
3381 | width: 25%;
3382 | }
3383 |
3384 | .width-30-percent {
3385 | width: 30%;
3386 | }
3387 |
3388 | .width-33-percent {
3389 | width: 33.33%;
3390 | }
3391 |
3392 | .width-40-percent {
3393 | width: 40%;
3394 | }
3395 |
3396 | .width-50-percent {
3397 | width: 50%;
3398 | }
3399 |
3400 | .width-60-percent {
3401 | width: 60%;
3402 | }
3403 |
3404 | .width-66-percent {
3405 | width: 66.67%;
3406 | }
3407 |
3408 | .width-70-percent {
3409 | width: 70%;
3410 | }
3411 |
3412 | .width-75-percent {
3413 | width: 75%;
3414 | }
3415 |
3416 | .width-80-percent {
3417 | width: 80%;
3418 | }
3419 |
3420 | .width-90-percent {
3421 | width: 90%;
3422 | }
3423 |
3424 | .width-100-percent {
3425 | width: 100%;
3426 | }
3427 |
3428 | .height-0 {
3429 | height: 0;
3430 | }
3431 |
3432 | .height-20 {
3433 | height: 2rem;
3434 | }
3435 |
3436 | .height-40 {
3437 | height: 4rem;
3438 | }
3439 |
3440 | .height-80 {
3441 | height: 8rem;
3442 | }
3443 |
3444 | .height-120 {
3445 | height: 12rem;
3446 | }
3447 |
3448 | .height-160 {
3449 | height: 16rem;
3450 | }
3451 |
3452 | .height-240 {
3453 | height: 24rem;
3454 | }
3455 |
3456 | .height-320 {
3457 | height: 32rem;
3458 | }
3459 |
3460 | .height-480 {
3461 | height: 48rem;
3462 | }
3463 |
3464 | .height-640 {
3465 | height: 64rem;
3466 | }
3467 |
3468 | .height-800 {
3469 | height: 80rem;
3470 | }
3471 |
3472 | .height-960 {
3473 | height: 96rem;
3474 | }
3475 |
3476 | .height-1280 {
3477 | height: 128rem;
3478 | }
3479 |
3480 | .height-100 {
3481 | height: 10rem;
3482 | }
3483 |
3484 | .height-200 {
3485 | height: 20rem;
3486 | }
3487 |
3488 | .height-400 {
3489 | height: 40rem;
3490 | }
3491 |
3492 | .height-560 {
3493 | height: 56rem;
3494 | }
3495 |
3496 | .height-720 {
3497 | height: 72rem;
3498 | }
3499 |
3500 | .height-1040 {
3501 | height: 104rem;
3502 | }
3503 |
3504 | .height-1120 {
3505 | height: 112rem;
3506 | }
3507 |
3508 | .height-1200 {
3509 | height: 120rem;
3510 | }
3511 |
3512 | .height-10-percent {
3513 | height: 10%;
3514 | }
3515 |
3516 | .height-20-percent {
3517 | height: 20%;
3518 | }
3519 |
3520 | .height-25-percent {
3521 | height: 25%;
3522 | }
3523 |
3524 | .height-30-percent {
3525 | height: 30%;
3526 | }
3527 |
3528 | .height-33-percent {
3529 | height: 33.33%;
3530 | }
3531 |
3532 | .height-40-percent {
3533 | height: 40%;
3534 | }
3535 |
3536 | .height-50-percent {
3537 | height: 50%;
3538 | }
3539 |
3540 | .height-60-percent {
3541 | height: 60%;
3542 | }
3543 |
3544 | .height-66-percent {
3545 | height: 66.67%;
3546 | }
3547 |
3548 | .height-70-percent {
3549 | height: 70%;
3550 | }
3551 |
3552 | .height-75-percent {
3553 | height: 75%;
3554 | }
3555 |
3556 | .height-80-percent {
3557 | height: 80%;
3558 | }
3559 |
3560 | .height-90-percent {
3561 | height: 90%;
3562 | }
3563 |
3564 | .height-100-percent {
3565 | height: 100%;
3566 | }
3567 |
3568 | .min-width-0 {
3569 | min-width: 0;
3570 | }
3571 |
3572 | .min-width-20 {
3573 | min-width: 2rem;
3574 | }
3575 |
3576 | .min-width-40 {
3577 | min-width: 4rem;
3578 | }
3579 |
3580 | .min-width-80 {
3581 | min-width: 8rem;
3582 | }
3583 |
3584 | .min-width-120 {
3585 | min-width: 12rem;
3586 | }
3587 |
3588 | .min-width-160 {
3589 | min-width: 16rem;
3590 | }
3591 |
3592 | .min-width-240 {
3593 | min-width: 24rem;
3594 | }
3595 |
3596 | .min-width-320 {
3597 | min-width: 32rem;
3598 | }
3599 |
3600 | .min-width-480 {
3601 | min-width: 48rem;
3602 | }
3603 |
3604 | .min-width-640 {
3605 | min-width: 64rem;
3606 | }
3607 |
3608 | .min-width-800 {
3609 | min-width: 80rem;
3610 | }
3611 |
3612 | .min-width-960 {
3613 | min-width: 96rem;
3614 | }
3615 |
3616 | .min-width-1280 {
3617 | min-width: 128rem;
3618 | }
3619 |
3620 | .min-width-100 {
3621 | min-width: 10rem;
3622 | }
3623 |
3624 | .min-width-200 {
3625 | min-width: 20rem;
3626 | }
3627 |
3628 | .min-width-400 {
3629 | min-width: 40rem;
3630 | }
3631 |
3632 | .min-width-560 {
3633 | min-width: 56rem;
3634 | }
3635 |
3636 | .min-width-720 {
3637 | min-width: 72rem;
3638 | }
3639 |
3640 | .min-width-1040 {
3641 | min-width: 104rem;
3642 | }
3643 |
3644 | .min-width-1120 {
3645 | min-width: 112rem;
3646 | }
3647 |
3648 | .min-width-1200 {
3649 | min-width: 120rem;
3650 | }
3651 |
3652 | .min-width-10-percent {
3653 | min-width: 10%;
3654 | }
3655 |
3656 | .min-width-20-percent {
3657 | min-width: 20%;
3658 | }
3659 |
3660 | .min-width-25-percent {
3661 | min-width: 25%;
3662 | }
3663 |
3664 | .min-width-30-percent {
3665 | min-width: 30%;
3666 | }
3667 |
3668 | .min-width-33-percent {
3669 | min-width: 33.33%;
3670 | }
3671 |
3672 | .min-width-40-percent {
3673 | min-width: 40%;
3674 | }
3675 |
3676 | .min-width-50-percent {
3677 | min-width: 50%;
3678 | }
3679 |
3680 | .min-width-60-percent {
3681 | min-width: 60%;
3682 | }
3683 |
3684 | .min-width-66-percent {
3685 | min-width: 66.67%;
3686 | }
3687 |
3688 | .min-width-70-percent {
3689 | min-width: 70%;
3690 | }
3691 |
3692 | .min-width-75-percent {
3693 | min-width: 75%;
3694 | }
3695 |
3696 | .min-width-80-percent {
3697 | min-width: 80%;
3698 | }
3699 |
3700 | .min-width-90-percent {
3701 | min-width: 90%;
3702 | }
3703 |
3704 | .min-width-100-percent {
3705 | min-width: 100%;
3706 | }
3707 |
3708 | .min-height-0 {
3709 | min-height: 0;
3710 | }
3711 |
3712 | .min-height-20 {
3713 | min-height: 2rem;
3714 | }
3715 |
3716 | .min-height-40 {
3717 | min-height: 4rem;
3718 | }
3719 |
3720 | .min-height-80 {
3721 | min-height: 8rem;
3722 | }
3723 |
3724 | .min-height-120 {
3725 | min-height: 12rem;
3726 | }
3727 |
3728 | .min-height-160 {
3729 | min-height: 16rem;
3730 | }
3731 |
3732 | .min-height-240 {
3733 | min-height: 24rem;
3734 | }
3735 |
3736 | .min-height-320 {
3737 | min-height: 32rem;
3738 | }
3739 |
3740 | .min-height-480 {
3741 | min-height: 48rem;
3742 | }
3743 |
3744 | .min-height-640 {
3745 | min-height: 64rem;
3746 | }
3747 |
3748 | .min-height-800 {
3749 | min-height: 80rem;
3750 | }
3751 |
3752 | .min-height-960 {
3753 | min-height: 96rem;
3754 | }
3755 |
3756 | .min-height-1280 {
3757 | min-height: 128rem;
3758 | }
3759 |
3760 | .min-height-100 {
3761 | min-height: 10rem;
3762 | }
3763 |
3764 | .min-height-200 {
3765 | min-height: 20rem;
3766 | }
3767 |
3768 | .min-height-400 {
3769 | min-height: 40rem;
3770 | }
3771 |
3772 | .min-height-560 {
3773 | min-height: 56rem;
3774 | }
3775 |
3776 | .min-height-720 {
3777 | min-height: 72rem;
3778 | }
3779 |
3780 | .min-height-1040 {
3781 | min-height: 104rem;
3782 | }
3783 |
3784 | .min-height-1120 {
3785 | min-height: 112rem;
3786 | }
3787 |
3788 | .min-height-1200 {
3789 | min-height: 120rem;
3790 | }
3791 |
3792 | .min-height-10-percent {
3793 | min-height: 10%;
3794 | }
3795 |
3796 | .min-height-20-percent {
3797 | min-height: 20%;
3798 | }
3799 |
3800 | .min-height-25-percent {
3801 | min-height: 25%;
3802 | }
3803 |
3804 | .min-height-30-percent {
3805 | min-height: 30%;
3806 | }
3807 |
3808 | .min-height-33-percent {
3809 | min-height: 33.33%;
3810 | }
3811 |
3812 | .min-height-40-percent {
3813 | min-height: 40%;
3814 | }
3815 |
3816 | .min-height-50-percent {
3817 | min-height: 50%;
3818 | }
3819 |
3820 | .min-height-60-percent {
3821 | min-height: 60%;
3822 | }
3823 |
3824 | .min-height-66-percent {
3825 | min-height: 66.67%;
3826 | }
3827 |
3828 | .min-height-70-percent {
3829 | min-height: 70%;
3830 | }
3831 |
3832 | .min-height-75-percent {
3833 | min-height: 75%;
3834 | }
3835 |
3836 | .min-height-80-percent {
3837 | min-height: 80%;
3838 | }
3839 |
3840 | .min-height-90-percent {
3841 | min-height: 90%;
3842 | }
3843 |
3844 | .min-height-100-percent {
3845 | min-height: 100%;
3846 | }
3847 |
3848 | .max-width-0 {
3849 | max-width: 0;
3850 | }
3851 |
3852 | .max-width-20 {
3853 | max-width: 2rem;
3854 | }
3855 |
3856 | .max-width-40 {
3857 | max-width: 4rem;
3858 | }
3859 |
3860 | .max-width-80 {
3861 | max-width: 8rem;
3862 | }
3863 |
3864 | .max-width-120 {
3865 | max-width: 12rem;
3866 | }
3867 |
3868 | .max-width-160 {
3869 | max-width: 16rem;
3870 | }
3871 |
3872 | .max-width-240 {
3873 | max-width: 24rem;
3874 | }
3875 |
3876 | .max-width-320 {
3877 | max-width: 32rem;
3878 | }
3879 |
3880 | .max-width-480 {
3881 | max-width: 48rem;
3882 | }
3883 |
3884 | .max-width-640 {
3885 | max-width: 64rem;
3886 | }
3887 |
3888 | .max-width-800 {
3889 | max-width: 80rem;
3890 | }
3891 |
3892 | .max-width-960 {
3893 | max-width: 96rem;
3894 | }
3895 |
3896 | .max-width-1280 {
3897 | max-width: 128rem;
3898 | }
3899 |
3900 | .max-width-100 {
3901 | max-width: 10rem;
3902 | }
3903 |
3904 | .max-width-200 {
3905 | max-width: 20rem;
3906 | }
3907 |
3908 | .max-width-400 {
3909 | max-width: 40rem;
3910 | }
3911 |
3912 | .max-width-560 {
3913 | max-width: 56rem;
3914 | }
3915 |
3916 | .max-width-720 {
3917 | max-width: 72rem;
3918 | }
3919 |
3920 | .max-width-1040 {
3921 | max-width: 104rem;
3922 | }
3923 |
3924 | .max-width-1120 {
3925 | max-width: 112rem;
3926 | }
3927 |
3928 | .max-width-1200 {
3929 | max-width: 120rem;
3930 | }
3931 |
3932 | .max-width-10-percent {
3933 | max-width: 10%;
3934 | }
3935 |
3936 | .max-width-20-percent {
3937 | max-width: 20%;
3938 | }
3939 |
3940 | .max-width-25-percent {
3941 | max-width: 25%;
3942 | }
3943 |
3944 | .max-width-30-percent {
3945 | max-width: 30%;
3946 | }
3947 |
3948 | .max-width-33-percent {
3949 | max-width: 33.33%;
3950 | }
3951 |
3952 | .max-width-40-percent {
3953 | max-width: 40%;
3954 | }
3955 |
3956 | .max-width-50-percent {
3957 | max-width: 50%;
3958 | }
3959 |
3960 | .max-width-60-percent {
3961 | max-width: 60%;
3962 | }
3963 |
3964 | .max-width-66-percent {
3965 | max-width: 66.67%;
3966 | }
3967 |
3968 | .max-width-70-percent {
3969 | max-width: 70%;
3970 | }
3971 |
3972 | .max-width-75-percent {
3973 | max-width: 75%;
3974 | }
3975 |
3976 | .max-width-80-percent {
3977 | max-width: 80%;
3978 | }
3979 |
3980 | .max-width-90-percent {
3981 | max-width: 90%;
3982 | }
3983 |
3984 | .max-width-100-percent {
3985 | max-width: 100%;
3986 | }
3987 |
3988 | .max-height-0 {
3989 | max-height: 0;
3990 | }
3991 |
3992 | .max-height-20 {
3993 | max-height: 2rem;
3994 | }
3995 |
3996 | .max-height-40 {
3997 | max-height: 4rem;
3998 | }
3999 |
4000 | .max-height-80 {
4001 | max-height: 8rem;
4002 | }
4003 |
4004 | .max-height-120 {
4005 | max-height: 12rem;
4006 | }
4007 |
4008 | .max-height-160 {
4009 | max-height: 16rem;
4010 | }
4011 |
4012 | .max-height-240 {
4013 | max-height: 24rem;
4014 | }
4015 |
4016 | .max-height-320 {
4017 | max-height: 32rem;
4018 | }
4019 |
4020 | .max-height-480 {
4021 | max-height: 48rem;
4022 | }
4023 |
4024 | .max-height-640 {
4025 | max-height: 64rem;
4026 | }
4027 |
4028 | .max-height-800 {
4029 | max-height: 80rem;
4030 | }
4031 |
4032 | .max-height-960 {
4033 | max-height: 96rem;
4034 | }
4035 |
4036 | .max-height-1280 {
4037 | max-height: 128rem;
4038 | }
4039 |
4040 | .max-height-100 {
4041 | max-height: 10rem;
4042 | }
4043 |
4044 | .max-height-200 {
4045 | max-height: 20rem;
4046 | }
4047 |
4048 | .max-height-400 {
4049 | max-height: 40rem;
4050 | }
4051 |
4052 | .max-height-560 {
4053 | max-height: 56rem;
4054 | }
4055 |
4056 | .max-height-720 {
4057 | max-height: 72rem;
4058 | }
4059 |
4060 | .max-height-1040 {
4061 | max-height: 104rem;
4062 | }
4063 |
4064 | .max-height-1120 {
4065 | max-height: 112rem;
4066 | }
4067 |
4068 | .max-height-1200 {
4069 | max-height: 120rem;
4070 | }
4071 |
4072 | .min-height-10-percent {
4073 | min-height: 10%;
4074 | }
4075 |
4076 | .min-height-20-percent {
4077 | min-height: 20%;
4078 | }
4079 |
4080 | .min-height-25-percent {
4081 | min-height: 25%;
4082 | }
4083 |
4084 | .min-height-30-percent {
4085 | min-height: 30%;
4086 | }
4087 |
4088 | .min-height-33-percent {
4089 | min-height: 33.33%;
4090 | }
4091 |
4092 | .min-height-40-percent {
4093 | min-height: 40%;
4094 | }
4095 |
4096 | .min-height-50-percent {
4097 | min-height: 50%;
4098 | }
4099 |
4100 | .min-height-60-percent {
4101 | min-height: 60%;
4102 | }
4103 |
4104 | .min-height-66-percent {
4105 | min-height: 66.67%;
4106 | }
4107 |
4108 | .min-height-70-percent {
4109 | min-height: 70%;
4110 | }
4111 |
4112 | .min-height-75-percent {
4113 | min-height: 75%;
4114 | }
4115 |
4116 | .min-height-80-percent {
4117 | min-height: 80%;
4118 | }
4119 |
4120 | .min-height-90-percent {
4121 | min-height: 90%;
4122 | }
4123 |
4124 | .min-height-100-percent {
4125 | min-height: 100%;
4126 | }
4127 |
4128 | /*# sourceMappingURL=main.css.map */
4129 |
--------------------------------------------------------------------------------
/main.css.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sourceRoot":"","sources":["base/_resets.scss","design-ingredients/_background.scss","design-ingredients/_color.scss","design-ingredients/_flexbox.scss","design-ingredients/_layout.scss","design-ingredients/_tips.scss","design-ingredients/_border-radius.scss","design-ingredients/_borders.scss","design-ingredients/_typography.scss","design-ingredients/_whitespace.scss","design-ingredients/_size.scss"],"names":[],"mappings":"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AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAKF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAKF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAKF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAKF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAKF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAKF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAKF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAKF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;ACvoCF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE","file":"main.css"}
--------------------------------------------------------------------------------
/main.scss:
--------------------------------------------------------------------------------
1 |
2 | @import "base/resets";
3 |
4 | @import "design-ingredients/background";
5 | @import "design-ingredients/color";
6 |
7 | @import "design-ingredients/flexbox";
8 | @import "design-ingredients/grid";
9 |
10 |
11 | @import "design-ingredients/layout";
12 | @import "design-ingredients/tips";
13 |
14 |
15 | @import "design-ingredients/border-radius";
16 | @import "design-ingredients/borders";
17 |
18 |
19 | @import "design-ingredients/typography";
20 |
21 | @import "design-ingredients/whitespace";
22 | @import "design-ingredients/size";
23 |
24 |
25 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "amigocss",
3 | "version": "1.1.0",
4 | "description": "Amigo CSS - A simple, custom-first and intuitive CSS framework for CSS lovers.",
5 | "repository": {
6 | "type": "git",
7 | "url": "git+https://github.com/amiamigo97/amigocss.git"
8 | },
9 | "keywords": [
10 | "css",
11 | "cssframework",
12 | "amigocss"
13 | ],
14 | "author": "Ami Amigo",
15 | "license": "Apache-2.0",
16 | "bugs": {
17 | "url": "https://github.com/amiamigo97/amigocss/issues"
18 | },
19 | "homepage": "https://amigocss.com"
20 | }
21 |
--------------------------------------------------------------------------------