aesthetics 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,16 @@
1
+ // Aesthetics Framework
2
+ //
3
+ // Copyright 2014 Duane Adam
4
+
5
+ // Browser Reset
6
+ //------------
7
+ @import "normalize";
8
+
9
+ // Settings
10
+ //------------
11
+ @import "settings/devices";
12
+ @import "components/z-index";
13
+
14
+ // Components
15
+ //------------
16
+ @import "components/utilities";
@@ -0,0 +1,232 @@
1
+ //==========================================================================
2
+ // Utilities.scss
3
+ //
4
+ // Please use available utilities before attempting of adding a new property
5
+ // to your CSS classes.
6
+ //
7
+ // Index:
8
+ // 1) Access Controls
9
+ // 2) Positioning
10
+ // 3) Text Alignment
11
+ // 4) Text Decoration
12
+ // 5) Visilibity
13
+ //==========================================================================
14
+
15
+
16
+ // Access Control
17
+ //
18
+ // Gives a grey-ish color to indicate a control is disabled or inactive
19
+ //---------------------------
20
+ .u-disabled {
21
+ color: rgba(0, 0, 0, 0.3) !important;
22
+ }
23
+ .u-disabled--light {
24
+ color: rgba(255, 255, 255, 0.5) !important;
25
+ }
26
+
27
+
28
+ // Positioning
29
+ //---------------------------
30
+ .u-pullLeft {
31
+ float: left !important;
32
+ }
33
+
34
+ .u-pullRight {
35
+ float: right !important;
36
+ }
37
+
38
+ .u-autoWidth {
39
+ width: auto !important;
40
+ }
41
+
42
+ .u-fill, .u-fillWidth {
43
+ width: 100% !important;
44
+ }
45
+
46
+ .u-fill, .u-fillHeight {
47
+ height: 100% !important;
48
+ }
49
+
50
+ .u-center {
51
+ margin-right: auto !important;
52
+ margin-left: auto !important;
53
+ }
54
+
55
+ .u-foreground {
56
+ position: relative;
57
+ z-index: $zIndex-1--screenForeground;
58
+ }
59
+
60
+ .u-block {
61
+ display: block !important;
62
+ }
63
+
64
+ .u-inlineBlock {
65
+ display: inline-block !important;
66
+ }
67
+
68
+ .u-table {
69
+ display: table;
70
+ }
71
+
72
+ .u-table:before {
73
+ display: inherit;
74
+ height: auto;
75
+ }
76
+
77
+ .u-table--fixed {
78
+ table-layout: fixed;
79
+ }
80
+
81
+ .u-tableRow {
82
+ display: table-row;
83
+ }
84
+
85
+ .u-tableCell {
86
+ display: table-cell;
87
+ }
88
+
89
+ .u-clearfix:before, .u-clearfix:after {
90
+ display: table;
91
+ content: " ";
92
+ }
93
+ .u-clearfix:after {
94
+ clear: both;
95
+ }
96
+
97
+
98
+ // Text Alignment
99
+ //---------------------------
100
+ .u-textAlignCenter {
101
+ text-align: center !important;
102
+ }
103
+
104
+ .u-textAlignRight {
105
+ text-align: right !important;
106
+ }
107
+
108
+ .u-textAlignLeft {
109
+ text-align: left !important;
110
+ }
111
+
112
+ .u-verticalAlignTop {
113
+ vertical-align: top !important;
114
+ }
115
+
116
+ .u-verticalAlignBottom {
117
+ vertical-align: bottom !important;
118
+ }
119
+
120
+ .u-verticalAlignMiddle {
121
+ vertical-align: middle !important;
122
+ }
123
+
124
+
125
+ // Text Decoration
126
+ //---------------------------
127
+ .u-capitalize {
128
+ text-transform: capitalize !important;
129
+ }
130
+
131
+ .u-underline {
132
+ text-decoration: underline !important;
133
+ }
134
+
135
+ .u-hyphenate {
136
+ word-break: break-word;
137
+ -webkit-hyphens: auto;
138
+ -webkit-hyphenate-limit-before: 2;
139
+ -webkit-hyphenate-limit-after: 3;
140
+ -webkit-hyphenate-limit-lines: 2;
141
+ }
142
+
143
+ .u-antialiased {
144
+ -webkit-font-smoothing: antialiased;
145
+ -moz-osx-font-smoothing: grayscale;
146
+ }
147
+
148
+
149
+ // Font Weight
150
+ //---------------------------
151
+ .u-fontThin {
152
+ font-weight: 100 !important;
153
+ }
154
+
155
+ .u-fontLight {
156
+ font-weight: 300 !important;
157
+ }
158
+
159
+ .u-fontRegular {
160
+ font-weight: 400 !important;
161
+ }
162
+
163
+ .u-fontSemibold {
164
+ font-weight: 600 !important
165
+ }
166
+
167
+ .u-fontBold {
168
+ font-weight: 700 !important;
169
+ }
170
+
171
+ .u-fontExtraBold {
172
+ font-weight: 800 !important;
173
+ }
174
+
175
+ .u-fontBlack {
176
+ font-weight: 900 !important;
177
+ }
178
+
179
+
180
+ // Visibility
181
+ //---------------------------
182
+ .u-hide {
183
+ display: none !important;
184
+ }
185
+
186
+ .u-opaque {
187
+ opacity: 1 !important;
188
+ }
189
+
190
+ @media screen and (max-width: $mobile--landscape) {
191
+ .u-hideOnMobile {
192
+ display: none !important;
193
+ }
194
+ }
195
+
196
+ @media screen and (max-width: $miniTablet) {
197
+ .u-hideOnMiniTablet {
198
+ display: none !important;
199
+ }
200
+ }
201
+
202
+ @media screen and (min-width: $tablet) {
203
+ .u-showOnTablet {
204
+ display: none !important;
205
+ }
206
+ }
207
+
208
+ @media screen and (max-width: $tablet) {
209
+ .u-hideOnTablet {
210
+ display: none !important;
211
+ }
212
+ }
213
+
214
+ @media screen and (min-width: $tablet--landscape) {
215
+ .u-showOnTablet--landscape {
216
+ display: none !important;
217
+ }
218
+ }
219
+
220
+ @media screen and (max-width: $tablet--landscape) {
221
+ .u-hideOnTablet--landscape {
222
+ display: none !important;
223
+ }
224
+ }
225
+
226
+ .u-overflowHidden {
227
+ overflow: hidden !important;
228
+ }
229
+
230
+ .u-hidePointerEvents {
231
+ pointer-events: none !important;
232
+ }
@@ -0,0 +1,45 @@
1
+ //==========================================================================
2
+ // Z-index.scss
3
+ //
4
+ // Do not modify the z-index scale!
5
+ // This scale gives us an overview of which layer things are on.
6
+ //
7
+ // Usage:
8
+ // Think of it as layers. Instead of naming it accordingly to CSS class you
9
+ // are referring to, think, which layer should this element be?
10
+ //
11
+ // Index:
12
+ // 1) Scale
13
+ // 2) Layers
14
+ //==========================================================================
15
+
16
+
17
+ // Z-Index Scale
18
+ //----------------
19
+ $zIndex-1: 100;
20
+ $zIndex-2: 200;
21
+ $zIndex-3: 300;
22
+ $zIndex-4: 400;
23
+ $zIndex-5: 500;
24
+ $zIndex-6: 600;
25
+ $zIndex-7: 700;
26
+ $zIndex-8: 800;
27
+ $zIndex-9: 900;
28
+ $zIndex-10: 1000;
29
+
30
+
31
+ // Layers
32
+ //----------------
33
+ $zIndex-1--screenForeground: $zIndex-1;
34
+
35
+ $zIndex-6--navbarOverlay: $zIndex-6;
36
+
37
+ $zIndex-7--navbar: $zIndex-7;
38
+
39
+ $zIndex-8--overlay: $zIndex-8;
40
+
41
+ $zIndex-9--modal: $zIndex-9;
42
+ $zIndex-9--dialog: $zIndex-9;
43
+ $zIndex-9--tooltip: $zIndex-9;
44
+
45
+ $zIndex-10--dev: $zIndex-10;
@@ -0,0 +1,21 @@
1
+ //=======================================================================================
2
+ // Device-Breakpoints.scss
3
+ //
4
+ // Use the scale so media queries across the app are consistent.
5
+ // Do not modify the general devices! Add a new device if you have to target a
6
+ // specific device.
7
+ //=======================================================================================
8
+
9
+ // General Devices
10
+ //--------------------
11
+ $mobile: 320px;
12
+ $mobile--landscape: 480px;
13
+ $miniTablet: 600px;
14
+ $miniTablet--landscape: 960px;
15
+ $tablet: 768px;
16
+ $tablet--landscape: 1024px;
17
+ $desktop: 1200px;
18
+
19
+
20
+ // Specific Devices
21
+ //--------------------
@@ -0,0 +1,326 @@
1
+ /*! normalize.css v3.0.2 | MIT License | git.io/normalize */
2
+ html {
3
+ font-family: sans-serif;
4
+ -ms-text-size-adjust: 100%;
5
+ -webkit-text-size-adjust: 100%; }
6
+
7
+ body {
8
+ margin: 0; }
9
+
10
+ article,
11
+ aside,
12
+ details,
13
+ figcaption,
14
+ figure,
15
+ footer,
16
+ header,
17
+ hgroup,
18
+ main,
19
+ menu,
20
+ nav,
21
+ section,
22
+ summary {
23
+ display: block; }
24
+
25
+ audio,
26
+ canvas,
27
+ progress,
28
+ video {
29
+ display: inline-block;
30
+ vertical-align: baseline; }
31
+
32
+ audio:not([controls]) {
33
+ display: none;
34
+ height: 0; }
35
+
36
+ [hidden],
37
+ template {
38
+ display: none; }
39
+
40
+ a {
41
+ background-color: transparent; }
42
+
43
+ a:active,
44
+ a:hover {
45
+ outline: 0; }
46
+
47
+ abbr[title] {
48
+ border-bottom: 1px dotted; }
49
+
50
+ b,
51
+ strong {
52
+ font-weight: bold; }
53
+
54
+ dfn {
55
+ font-style: italic; }
56
+
57
+ h1 {
58
+ font-size: 2em;
59
+ margin: 0.67em 0; }
60
+
61
+ mark {
62
+ background: #ff0;
63
+ color: #000; }
64
+
65
+ small {
66
+ font-size: 80%; }
67
+
68
+ sub,
69
+ sup {
70
+ font-size: 75%;
71
+ line-height: 0;
72
+ position: relative;
73
+ vertical-align: baseline; }
74
+
75
+ sup {
76
+ top: -0.5em; }
77
+
78
+ sub {
79
+ bottom: -0.25em; }
80
+
81
+ img {
82
+ border: 0; }
83
+
84
+ svg:not(:root) {
85
+ overflow: hidden; }
86
+
87
+ figure {
88
+ margin: 1em 40px; }
89
+
90
+ hr {
91
+ -moz-box-sizing: content-box;
92
+ box-sizing: content-box;
93
+ height: 0; }
94
+
95
+ pre {
96
+ overflow: auto; }
97
+
98
+ code,
99
+ kbd,
100
+ pre,
101
+ samp {
102
+ font-family: monospace, monospace;
103
+ font-size: 1em; }
104
+
105
+ button,
106
+ input,
107
+ optgroup,
108
+ select,
109
+ textarea {
110
+ color: inherit;
111
+ font: inherit;
112
+ margin: 0; }
113
+
114
+ button {
115
+ overflow: visible; }
116
+
117
+ button,
118
+ select {
119
+ text-transform: none; }
120
+
121
+ button,
122
+ html input[type="button"],
123
+ input[type="reset"],
124
+ input[type="submit"] {
125
+ -webkit-appearance: button;
126
+ cursor: pointer; }
127
+
128
+ button[disabled],
129
+ html input[disabled] {
130
+ cursor: default; }
131
+
132
+ button::-moz-focus-inner,
133
+ input::-moz-focus-inner {
134
+ border: 0;
135
+ padding: 0; }
136
+
137
+ input {
138
+ line-height: normal; }
139
+
140
+ input[type="checkbox"],
141
+ input[type="radio"] {
142
+ box-sizing: border-box;
143
+ padding: 0; }
144
+
145
+ input[type="number"]::-webkit-inner-spin-button,
146
+ input[type="number"]::-webkit-outer-spin-button {
147
+ height: auto; }
148
+
149
+ input[type="search"] {
150
+ -webkit-appearance: textfield;
151
+ -moz-box-sizing: content-box;
152
+ -webkit-box-sizing: content-box;
153
+ box-sizing: content-box; }
154
+
155
+ input[type="search"]::-webkit-search-cancel-button,
156
+ input[type="search"]::-webkit-search-decoration {
157
+ -webkit-appearance: none; }
158
+
159
+ fieldset {
160
+ border: 1px solid #c0c0c0;
161
+ margin: 0 2px;
162
+ padding: 0.35em 0.625em 0.75em; }
163
+
164
+ legend {
165
+ border: 0;
166
+ padding: 0; }
167
+
168
+ textarea {
169
+ overflow: auto; }
170
+
171
+ optgroup {
172
+ font-weight: bold; }
173
+
174
+ table {
175
+ border-collapse: collapse;
176
+ border-spacing: 0; }
177
+
178
+ td,
179
+ th {
180
+ padding: 0; }
181
+
182
+ .u-disabled {
183
+ color: rgba(0, 0, 0, 0.3) !important; }
184
+
185
+ .u-disabled--light {
186
+ color: rgba(255, 255, 255, 0.5) !important; }
187
+
188
+ .u-pullLeft {
189
+ float: left !important; }
190
+
191
+ .u-pullRight {
192
+ float: right !important; }
193
+
194
+ .u-autoWidth {
195
+ width: auto !important; }
196
+
197
+ .u-fill, .u-fillWidth {
198
+ width: 100% !important; }
199
+
200
+ .u-fill, .u-fillHeight {
201
+ height: 100% !important; }
202
+
203
+ .u-center {
204
+ margin-right: auto !important;
205
+ margin-left: auto !important; }
206
+
207
+ .u-foreground {
208
+ position: relative;
209
+ z-index: 100; }
210
+
211
+ .u-block {
212
+ display: block !important; }
213
+
214
+ .u-inlineBlock {
215
+ display: inline-block !important; }
216
+
217
+ .u-table {
218
+ display: table; }
219
+
220
+ .u-table:before {
221
+ display: inherit;
222
+ height: auto; }
223
+
224
+ .u-table--fixed {
225
+ table-layout: fixed; }
226
+
227
+ .u-tableRow {
228
+ display: table-row; }
229
+
230
+ .u-tableCell {
231
+ display: table-cell; }
232
+
233
+ .u-clearfix:before, .u-clearfix:after {
234
+ display: table;
235
+ content: " "; }
236
+
237
+ .u-clearfix:after {
238
+ clear: both; }
239
+
240
+ .u-textAlignCenter {
241
+ text-align: center !important; }
242
+
243
+ .u-textAlignRight {
244
+ text-align: right !important; }
245
+
246
+ .u-textAlignLeft {
247
+ text-align: left !important; }
248
+
249
+ .u-verticalAlignTop {
250
+ vertical-align: top !important; }
251
+
252
+ .u-verticalAlignBottom {
253
+ vertical-align: bottom !important; }
254
+
255
+ .u-verticalAlignMiddle {
256
+ vertical-align: middle !important; }
257
+
258
+ .u-capitalize {
259
+ text-transform: capitalize !important; }
260
+
261
+ .u-underline {
262
+ text-decoration: underline !important; }
263
+
264
+ .u-hyphenate {
265
+ word-break: break-word;
266
+ -webkit-hyphens: auto;
267
+ -webkit-hyphenate-limit-before: 2;
268
+ -webkit-hyphenate-limit-after: 3;
269
+ -webkit-hyphenate-limit-lines: 2; }
270
+
271
+ .u-antialiased {
272
+ -webkit-font-smoothing: antialiased;
273
+ -moz-osx-font-smoothing: grayscale; }
274
+
275
+ .u-fontThin {
276
+ font-weight: 100 !important; }
277
+
278
+ .u-fontLight {
279
+ font-weight: 300 !important; }
280
+
281
+ .u-fontRegular {
282
+ font-weight: 400 !important; }
283
+
284
+ .u-fontSemibold {
285
+ font-weight: 600 !important; }
286
+
287
+ .u-fontBold {
288
+ font-weight: 700 !important; }
289
+
290
+ .u-fontExtraBold {
291
+ font-weight: 800 !important; }
292
+
293
+ .u-fontBlack {
294
+ font-weight: 900 !important; }
295
+
296
+ .u-hide {
297
+ display: none !important; }
298
+
299
+ .u-opaque {
300
+ opacity: 1 !important; }
301
+
302
+ @media screen and (max-width: 480px) {
303
+ .u-hideOnMobile {
304
+ display: none !important; } }
305
+ @media screen and (max-width: 600px) {
306
+ .u-hideOnMiniTablet {
307
+ display: none !important; } }
308
+ @media screen and (min-width: 768px) {
309
+ .u-showOnTablet {
310
+ display: none !important; } }
311
+ @media screen and (max-width: 768px) {
312
+ .u-hideOnTablet {
313
+ display: none !important; } }
314
+ @media screen and (min-width: 1024px) {
315
+ .u-showOnTablet--landscape {
316
+ display: none !important; } }
317
+ @media screen and (max-width: 1024px) {
318
+ .u-hideOnTablet--landscape {
319
+ display: none !important; } }
320
+ .u-overflowHidden {
321
+ overflow: hidden !important; }
322
+
323
+ .u-hidePointerEvents {
324
+ pointer-events: none !important; }
325
+
326
+ /*# sourceMappingURL=aesthetics.css.map */