slippers-ui 0.14.13 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +17 -108
- package/dist/slippers-core.css +1 -0
- package/dist/slippers-core.umd.min.js +2 -0
- package/package.json +47 -80
- package/src/styles/_variables.scss +247 -0
- package/src/styles/base.scss +116 -0
- package/dist/base.css +0 -552
- package/dist/compiled.css +0 -3160
- package/dist/slippersComponents.common.js +0 -10766
- package/dist/slippersComponents.css +0 -1
|
@@ -0,0 +1,247 @@
|
|
|
1
|
+
$prefix: 'slp'; // For themeing in the future
|
|
2
|
+
$max-columns: 12; // Columns in the grid
|
|
3
|
+
|
|
4
|
+
/*
|
|
5
|
+
_____ _
|
|
6
|
+
/ ____| | |
|
|
7
|
+
| | ___ | | ___ _ __ ___
|
|
8
|
+
| | / _ \| |/ _ \| '__/ __|
|
|
9
|
+
| |___| (_) | | (_) | | \__ \
|
|
10
|
+
\_____\___/|_|\___/|_| |___/
|
|
11
|
+
*/
|
|
12
|
+
|
|
13
|
+
// Primary
|
|
14
|
+
$color-primary-100: #FDC1A7 !default;
|
|
15
|
+
$color-primary-200: #F96424 !default;
|
|
16
|
+
$color-primary-300: #CC3D00 !default;
|
|
17
|
+
|
|
18
|
+
// Secondary
|
|
19
|
+
$color-secondary-100: #D7B9F3 !default;
|
|
20
|
+
$color-secondary-200: #9B51E0 !default;
|
|
21
|
+
$color-secondary-300: #7225BA !default;
|
|
22
|
+
|
|
23
|
+
// Surface
|
|
24
|
+
$color-surface-50: #FFFFFF !default;
|
|
25
|
+
$color-surface-100: #F8F8F8 !default;
|
|
26
|
+
$color-surface-200: #F2F2F2 !default;
|
|
27
|
+
$color-surface-300: #C3C3C3 !default;
|
|
28
|
+
$color-surface-400: #999999 !default;
|
|
29
|
+
$color-surface-500: #5E5E5E !default;
|
|
30
|
+
$color-surface-600: #404040 !default;
|
|
31
|
+
$color-surface-700: #333333 !default;
|
|
32
|
+
|
|
33
|
+
// Text
|
|
34
|
+
$color-text-50: #FFFFFF !default;
|
|
35
|
+
$color-text-100: #C3C3C3 !default;
|
|
36
|
+
$color-text-200: #5E5E5E !default;
|
|
37
|
+
$color-text-300: #333333 !default;
|
|
38
|
+
|
|
39
|
+
$color-text-link-100: #9B51E0 !default;
|
|
40
|
+
$color-text-link-200: #7225BA !default;
|
|
41
|
+
|
|
42
|
+
// Alert
|
|
43
|
+
$color-alert-100: #FFD4D8 !default;
|
|
44
|
+
$color-alert-200: #F24F63 !default;
|
|
45
|
+
$color-alert-300: #CB3446 !default;
|
|
46
|
+
|
|
47
|
+
// Warning
|
|
48
|
+
$color-warning-100: #FFEFC7 !default;
|
|
49
|
+
$color-warning-200: #FFDA7A !default;
|
|
50
|
+
$color-warning-300: #FFB800 !default;
|
|
51
|
+
|
|
52
|
+
// Success
|
|
53
|
+
$color-success-100: #B8E5BC !default;
|
|
54
|
+
$color-success-200: #48A651 !default;
|
|
55
|
+
$color-success-300: #327338 !default;
|
|
56
|
+
|
|
57
|
+
// Info
|
|
58
|
+
$color-info-100: #D6EAFF !default;
|
|
59
|
+
$color-info-200: #70B4FF !default;
|
|
60
|
+
$color-info-300: #3979BF !default;
|
|
61
|
+
|
|
62
|
+
// Accents
|
|
63
|
+
$color-accent-100: #FCA121 !default;
|
|
64
|
+
$color-accent-200: #F96424 !default;
|
|
65
|
+
$color-accent-300: #DB3B21 !default;
|
|
66
|
+
$color-accent-400: #52CDB7 !default;
|
|
67
|
+
$color-accent-500: #9B51E0 !default;
|
|
68
|
+
$color-accent-600: #2F80ED !default;
|
|
69
|
+
$color-accent-700: #D04A81 !default;
|
|
70
|
+
|
|
71
|
+
/*
|
|
72
|
+
_____ _
|
|
73
|
+
/ ____| (_)
|
|
74
|
+
| (___ _ __ __ _ ___ _ _ __ __ _
|
|
75
|
+
\___ \| '_ \ / _` |/ __| | '_ \ / _` |
|
|
76
|
+
____) | |_) | (_| | (__| | | | | (_| |
|
|
77
|
+
|_____/| .__/ \__,_|\___|_|_| |_|\__, |
|
|
78
|
+
| | __/ |
|
|
79
|
+
|_| |___/
|
|
80
|
+
*/
|
|
81
|
+
|
|
82
|
+
$spacing-default: 1rem !default;
|
|
83
|
+
|
|
84
|
+
$spacing-4: $spacing-default * 0.25 !default; // 4px
|
|
85
|
+
$spacing-8: $spacing-default * 0.5 !default; // 8px
|
|
86
|
+
$spacing-16: $spacing-default; // 16px
|
|
87
|
+
$spacing-24: $spacing-default * 1.5 !default; // 24px
|
|
88
|
+
$spacing-32: $spacing-default * 2 !default; // 32px
|
|
89
|
+
$spacing-48: $spacing-default * 3 !default; // 48px
|
|
90
|
+
$spacing-64: $spacing-default * 4 !default; // 64px
|
|
91
|
+
$spacing-96: $spacing-default * 6 !default; // 96px
|
|
92
|
+
$spacing-160: $spacing-default * 10 !default; // 160px
|
|
93
|
+
|
|
94
|
+
$spacing: (
|
|
95
|
+
4: $spacing-4,
|
|
96
|
+
8: $spacing-8,
|
|
97
|
+
16: $spacing-16,
|
|
98
|
+
24: $spacing-24,
|
|
99
|
+
32: $spacing-32,
|
|
100
|
+
48: $spacing-48,
|
|
101
|
+
64: $spacing-64,
|
|
102
|
+
96: $spacing-96,
|
|
103
|
+
160: $spacing-160,
|
|
104
|
+
);
|
|
105
|
+
|
|
106
|
+
$spacing-shortcuts: ("margin": "m", "padding": "p") !default;
|
|
107
|
+
$spacing-directions: ("top": "t", "right": "r", "bottom": "b", "left": "l") !default;
|
|
108
|
+
$spacing-horizontal: "x" !default;
|
|
109
|
+
$spacing-vertical: "y" !default;
|
|
110
|
+
|
|
111
|
+
|
|
112
|
+
/*
|
|
113
|
+
_______ _
|
|
114
|
+
|__ __| | |
|
|
115
|
+
| |_ _ _ __ ___ __ _ _ __ __ _ _ __ | |__ _ _
|
|
116
|
+
| | | | | '_ \ / _ \ / _` | '__/ _` | '_ \| '_ \| | | |
|
|
117
|
+
| | |_| | |_) | (_) | (_| | | | (_| | |_) | | | | |_| |
|
|
118
|
+
|_|\__, | .__/ \___/ \__, |_| \__,_| .__/|_| |_|\__, |
|
|
119
|
+
__/ | | __/ | | | __/ |
|
|
120
|
+
|___/|_| |___/ |_| |___/
|
|
121
|
+
*/
|
|
122
|
+
|
|
123
|
+
$font-size-default: 1rem !default; // 16px
|
|
124
|
+
|
|
125
|
+
// Headings
|
|
126
|
+
$text-heading-1: $font-size-default * 3.75 !default; // 60px
|
|
127
|
+
$text-heading-2: $font-size-default * 2.8125 !default; // 45px
|
|
128
|
+
$text-heading-3: $font-size-default * 2 !default; // 32px
|
|
129
|
+
$text-heading-4: $font-size-default * 1.4375 !default; // 23px
|
|
130
|
+
$text-heading-5: $font-size-default * 1.1875 !default; // 19px
|
|
131
|
+
|
|
132
|
+
$text-heading-1-mobile: $font-size-default * 2.25 !default; // 36px
|
|
133
|
+
$text-heading-2-mobile: $font-size-default * 1.5 !default; // 24px
|
|
134
|
+
$text-heading-3-mobile: $font-size-default * 1.1875 !default; // 19px
|
|
135
|
+
|
|
136
|
+
// Body
|
|
137
|
+
$text-body-1: $font-size-default !default; // 16px
|
|
138
|
+
$text-body-2: $font-size-default * 0.875 !default; // 14px
|
|
139
|
+
$text-body-3: $font-size-default * 0.75 !default; // 12px
|
|
140
|
+
|
|
141
|
+
$text-body-1-bold: $font-size-default !default; // 16px
|
|
142
|
+
$text-body-2-bold: $font-size-default * 0.875 !default; // 14px
|
|
143
|
+
$text-body-3-bold: $font-size-default * 0.75 !default; // 12px
|
|
144
|
+
|
|
145
|
+
// Button
|
|
146
|
+
$text-button-1: $font-size-default * 1.125 !default; // 18px
|
|
147
|
+
|
|
148
|
+
// ALL CAPS
|
|
149
|
+
$text-caps: $font-size-default * 0.625 !default; // 10px
|
|
150
|
+
|
|
151
|
+
// Line Heights
|
|
152
|
+
$line-height-default: 1.5 !default;
|
|
153
|
+
|
|
154
|
+
$line-height-heading-1: 1.0667 !default; // 64px
|
|
155
|
+
$line-height-heading-2: 1.1556 !default; // 52px
|
|
156
|
+
$line-height-heading-3: 1.125 !default; // 36px
|
|
157
|
+
$line-height-heading-4: 1.2174 !default; // 28px
|
|
158
|
+
$line-height-heading-5: 1.2632 !default; // 24px
|
|
159
|
+
|
|
160
|
+
$line-height-heading-1-mobile: 1.2222 !default; // 44px
|
|
161
|
+
$line-height-heading-2-mobile: 1.25 !default; // 30px
|
|
162
|
+
$line-height-heading-3-mobile: 1.5 !default; // 24px
|
|
163
|
+
|
|
164
|
+
$line-height-body-1: 1.5 !default; // 24px
|
|
165
|
+
$line-height-body-2: 1.4286 !default; // 20px
|
|
166
|
+
$line-height-body-3: 1.6667 !default; // 20px
|
|
167
|
+
|
|
168
|
+
$line-height-body-1-bold: 1.5 !default; // 24px
|
|
169
|
+
$line-height-body-2-bold: 1.4286 !default; // 20px
|
|
170
|
+
$line-height-body-3-bold: 1.6667 !default; // 20px
|
|
171
|
+
|
|
172
|
+
$line-height-button-1: 1.1111 !default; // 20px
|
|
173
|
+
|
|
174
|
+
$line-height-caps: 2 !default; // 20px
|
|
175
|
+
|
|
176
|
+
// Font Weight
|
|
177
|
+
$font-weight-light: 300 !default;
|
|
178
|
+
$font-weight-normal: 400 !default;
|
|
179
|
+
$font-weight-bold: 600 !default;
|
|
180
|
+
|
|
181
|
+
/*
|
|
182
|
+
____ _ _ _
|
|
183
|
+
| _ \ | | (_) | |
|
|
184
|
+
| |_) |_ __ ___ __ _| | ___ __ ___ _ _ __ | |_ ___
|
|
185
|
+
| _ <| '__/ _ \/ _` | |/ / '_ \ / _ \| | '_ \| __/ __|
|
|
186
|
+
| |_) | | | __/ (_| | <| |_) | (_) | | | | | |_\__ \
|
|
187
|
+
|____/|_| \___|\__,_|_|\_\ .__/ \___/|_|_| |_|\__|___/
|
|
188
|
+
| |
|
|
189
|
+
|_|
|
|
190
|
+
*/
|
|
191
|
+
|
|
192
|
+
$breakpoint-xs: 0px !default;
|
|
193
|
+
$breakpoint-sm: 576px !default;
|
|
194
|
+
$breakpoint-md: 768px !default;
|
|
195
|
+
$breakpoint-lg: 1025px !default;
|
|
196
|
+
$breakpoint-xl: 1200px !default;
|
|
197
|
+
$breakpoint-2xl: 1400px !default;
|
|
198
|
+
|
|
199
|
+
$breakpoints: (
|
|
200
|
+
xs: $breakpoint-xs,
|
|
201
|
+
sm: $breakpoint-sm,
|
|
202
|
+
md: $breakpoint-md,
|
|
203
|
+
lg: $breakpoint-lg,
|
|
204
|
+
xl: $breakpoint-xl,
|
|
205
|
+
2xl: $breakpoint-2xl,
|
|
206
|
+
);
|
|
207
|
+
|
|
208
|
+
/*
|
|
209
|
+
_ _
|
|
210
|
+
(_) | |
|
|
211
|
+
_____ _ __ __| | _____ __
|
|
212
|
+
|_ / | '_ \ / _` |/ _ \ \/ /
|
|
213
|
+
/ /| | | | | (_| | __/> <
|
|
214
|
+
/___|_|_| |_|\__,_|\___/_/\_\
|
|
215
|
+
|
|
216
|
+
*/
|
|
217
|
+
|
|
218
|
+
$zindex-dropdown: 1000;
|
|
219
|
+
$zindex-sticky: 1020;
|
|
220
|
+
$zindex-fixed: 1030;
|
|
221
|
+
$zindex-modal-backdrop: 1040;
|
|
222
|
+
$zindex-offcanvas: 1050;
|
|
223
|
+
$zindex-modal: 1060;
|
|
224
|
+
$zindex-popover: 1070;
|
|
225
|
+
$zindex-tooltip: 1080;
|
|
226
|
+
|
|
227
|
+
/*
|
|
228
|
+
__ __ _
|
|
229
|
+
| \/ (_)___ ___
|
|
230
|
+
| |\/| | / __|/ __|
|
|
231
|
+
| | | | \__ \ (__
|
|
232
|
+
|_| |_|_|___/\___|
|
|
233
|
+
*/
|
|
234
|
+
|
|
235
|
+
$border-radius-default: 4px;
|
|
236
|
+
$border-width: 1px;
|
|
237
|
+
$border: $border-width solid $color-surface-200;
|
|
238
|
+
|
|
239
|
+
$shadow-surface-primary-1: $color-surface-200 0px 8px 50px -24px;
|
|
240
|
+
$shadow-surface-primary-2: $color-surface-200 0px 16px 50px -24px;
|
|
241
|
+
$shadow-surface-primary-3: $color-surface-200 0px 24px 50px -24px;
|
|
242
|
+
$shadow-surface-primary-4: $color-surface-200 0px 32px 50px -24px;
|
|
243
|
+
|
|
244
|
+
$shadow-surface-secondary-1: $color-surface-300 0px 8px 50px -24px;
|
|
245
|
+
$shadow-surface-secondary-2: $color-surface-300 0px 16px 50px -24px;
|
|
246
|
+
$shadow-surface-secondary-3: $color-surface-300 0px 24px 50px -24px;
|
|
247
|
+
$shadow-surface-secondary-4: $color-surface-300 0px 32px 50px -24px;
|
|
@@ -0,0 +1,116 @@
|
|
|
1
|
+
@import "variables";
|
|
2
|
+
|
|
3
|
+
html {
|
|
4
|
+
scroll-behavior: smooth;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
body {
|
|
8
|
+
color: $color-text-300;
|
|
9
|
+
margin: 0;
|
|
10
|
+
font-family: "Source Sans Pro", "sans-serif";
|
|
11
|
+
font-size: $font-size-default;
|
|
12
|
+
font-weight: $font-weight-normal;
|
|
13
|
+
line-height: $line-height-default;
|
|
14
|
+
-webkit-font-smoothing: antialiased;
|
|
15
|
+
-moz-osx-font-smoothing: grayscale;
|
|
16
|
+
text-rendering: optimizeLegibility;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
a:not(.slp-btn) {
|
|
20
|
+
text-decoration: none;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
h1, h2, h3, h4, h5, h6 {
|
|
24
|
+
color: inherit;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
// Removes the default spacing and border for appropriate elements.
|
|
28
|
+
blockquote,
|
|
29
|
+
dl,
|
|
30
|
+
dd,
|
|
31
|
+
h1,
|
|
32
|
+
h2,
|
|
33
|
+
h3,
|
|
34
|
+
h4,
|
|
35
|
+
h5,
|
|
36
|
+
h6,
|
|
37
|
+
hr,
|
|
38
|
+
ol,
|
|
39
|
+
ul,
|
|
40
|
+
li,
|
|
41
|
+
figure,
|
|
42
|
+
p,
|
|
43
|
+
pre {
|
|
44
|
+
margin: 0;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
button {
|
|
48
|
+
background-color: transparent;
|
|
49
|
+
background-image: none;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
ol,
|
|
53
|
+
ul {
|
|
54
|
+
list-style: none;
|
|
55
|
+
padding: 0;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
@each $property, $shortcut in $spacing-shortcuts {
|
|
59
|
+
@each $name, $value in $spacing {
|
|
60
|
+
// All directions
|
|
61
|
+
.#{$prefix}-#{$shortcut}-#{$name} {
|
|
62
|
+
#{$property}: $value !important;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
// Cardinal directions
|
|
66
|
+
@each $direction, $directional-shortcut in $spacing-directions {
|
|
67
|
+
.#{$prefix}-#{$shortcut}#{$directional-shortcut}-#{$name} {
|
|
68
|
+
#{$property}-#{$direction}: $value !important;
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
// Horizontal axis
|
|
73
|
+
@if $spacing-horizontal != null {
|
|
74
|
+
.#{$prefix}-#{$shortcut}#{$spacing-horizontal}-#{$name} {
|
|
75
|
+
#{$property}-left: $value !important;
|
|
76
|
+
#{$property}-right: $value !important;
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
// Vertical axis
|
|
81
|
+
@if $spacing-vertical != null {
|
|
82
|
+
.#{$prefix}-#{$shortcut}#{$spacing-vertical}-#{$name} {
|
|
83
|
+
#{$property}-top: $value !important;
|
|
84
|
+
#{$property}-bottom: $value !important;
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.#{$prefix}-flex {
|
|
91
|
+
display: flex;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.#{$prefix}-flex-column {
|
|
95
|
+
flex-direction: column;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.#{$prefix}-flex-row {
|
|
99
|
+
flex-direction: row;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.#{$prefix}-justify-content-center {
|
|
103
|
+
justify-content: center;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.#{$prefix}-justify-content-between {
|
|
107
|
+
justify-content: space-between;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.#{$prefix}-align-items-center {
|
|
111
|
+
align-items: center;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.#{$prefix}-text-align-center {
|
|
115
|
+
text-align: center;
|
|
116
|
+
}
|