@rolemodel/optics 0.3.1 → 0.4.1

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.
Files changed (37) hide show
  1. package/.babelrc.json +14 -0
  2. package/.github/pull_request_template.md +1 -0
  3. package/.github/workflows/publish-storybook.yml +1 -1
  4. package/.prettierignore +2 -0
  5. package/README.md +10 -14
  6. package/dist/css/optics.css +961 -446
  7. package/dist/css/optics.css.map +1 -1
  8. package/dist/scss/addons/tom-select.scss +1 -4
  9. package/dist/scss/components/alert.scss +56 -38
  10. package/dist/scss/components/avatar.scss +96 -0
  11. package/dist/scss/components/badge.scss +8 -3
  12. package/dist/scss/components/button.scss +168 -97
  13. package/dist/scss/components/button_group.scss +23 -5
  14. package/dist/scss/components/confirm-dialog.scss +88 -0
  15. package/dist/scss/components/divider.scss +59 -0
  16. package/dist/scss/components/form.scss +180 -49
  17. package/dist/scss/components/index.scss +6 -1
  18. package/dist/scss/components/modal.scss +156 -0
  19. package/dist/scss/components/pagination.scss +28 -0
  20. package/dist/scss/components/sidebar.scss +83 -159
  21. package/dist/scss/components/table.scss +22 -17
  22. package/dist/scss/components/tooltip.scss +136 -0
  23. package/dist/scss/core/tokens/base_tokens.scss +10 -5
  24. package/dist/scss/recipes/16six-sidebar.scss +32 -61
  25. package/dist/scss/recipes/domains-sidebar.scss +24 -44
  26. package/dist/tokens/tokens.json +9 -8
  27. package/package.json +30 -24
  28. package/.storybook/ModeSwitcher.jsx +0 -98
  29. package/.storybook/documentation.scss +0 -93
  30. package/.storybook/main.js +0 -11
  31. package/.storybook/manager.js +0 -22
  32. package/.storybook/preview.js +0 -12
  33. package/.storybook/rolemodelTheme.js +0 -10
  34. package/dist/scss/addons/rails-modal-and-panel/index.scss +0 -2
  35. package/dist/scss/addons/rails-modal-and-panel/modal.scss +0 -111
  36. package/dist/scss/components/flash.scss +0 -58
  37. /package/dist/scss/addons/{rails-modal-and-panel/panel.scss → panel.scss} +0 -0
package/dist/scss/components/button.scss CHANGED
@@ -1,8 +1,3 @@
1
- %btn-focus-state {
2
- box-shadow: var(--op-input-focus);
3
- outline: none;
4
- }
5
-
6
1
  %btn-global {
7
2
  // Public API (allowed to be overridden)
8
3
  --_op-btn-height-small: var(--op-input-height-small);
@@ -10,22 +5,26 @@
10
5
  --_op-btn-height-large: var(--op-input-height-large);
11
6
  --_op-btn-font-small: var(--op-font-x-small);
12
7
  --_op-btn-font-medium: var(--op-font-small);
13
- --_op-btn-font-large: var(--op-font-medium);
8
+ --_op-btn-font-large: var(--op-font-small);
9
+ --_op-btn-padding-small: 0 var(--op-space-x-small);
10
+ --_op-btn-padding-medium: 0 var(--op-space-small);
11
+ --_op-btn-padding-large: 0 var(--op-space-small);
14
12
 
15
13
  // Private API (don't touch these)
16
- --__op-btn-height: var(--_op-btn-height-medium);
17
- --__op-btn-font-size: var(--_op-btn-font-medium);
14
+ --__op-btn-height: var(--_op-btn-height-large);
15
+ --__op-btn-font-size: var(--_op-btn-font-large);
16
+ --__op-btn-padding: var(--_op-btn-padding-large);
18
17
 
19
18
  display: inline-flex;
20
- height: var(--__op-btn-height);
19
+ min-height: var(--__op-btn-height);
21
20
  align-items: center;
22
21
  justify-content: center;
23
- padding: 0 var(--op-space-medium);
24
- border-radius: var(--op-radius-large);
22
+ padding: var(--__op-btn-padding);
23
+ border-radius: var(--op-radius-medium);
25
24
  appearance: none;
26
25
  cursor: pointer;
27
26
  font-size: var(--__op-btn-font-size);
28
- font-weight: var(--op-font-weight-medium);
27
+ font-weight: var(--op-font-weight-normal);
29
28
  gap: var(--op-space-x-small);
30
29
  text-align: center;
31
30
  text-decoration: none;
@@ -42,30 +41,41 @@
42
41
  width: var(--__op-btn-height);
43
42
  min-width: var(--__op-btn-height);
44
43
  padding: 0;
45
- border-radius: var(--op-radius-circle);
44
+ }
45
+
46
+ // Icon With Label Modifier
47
+ &.btn--icon-with-label {
48
+ flex-direction: column;
49
+ padding: var(--op-space-small);
50
+ gap: var(--op-space-3x-small);
46
51
  }
47
52
 
48
53
  // Size Modifiers
49
54
  &.btn--small {
50
55
  --__op-btn-height: var(--_op-btn-height-small);
51
56
  --__op-btn-font-size: var(--_op-btn-font-small);
57
+ --__op-btn-padding: var(--_op-btn-padding-small);
52
58
  }
53
59
 
54
60
  &.btn--medium {
55
61
  --__op-btn-height: var(--_op-btn-height-medium);
56
62
  --__op-btn-font-size: var(--_op-btn-font-medium);
63
+ --__op-btn-padding: var(--_op-btn-padding-medium);
57
64
  }
58
65
 
59
66
  &.btn--large {
60
67
  --__op-btn-height: var(--_op-btn-height-large);
61
68
  --__op-btn-font-size: var(--_op-btn-font-large);
69
+ --__op-btn-padding: var(--_op-btn-padding-large);
62
70
  }
63
71
 
64
72
  // Disabled Modifier
65
73
  &.btn--disabled,
66
74
  &:disabled {
67
- cursor: not-allowed;
68
- opacity: 0.65;
75
+ opacity: 0.44;
76
+ pointer-events: none;
77
+ -webkit-user-select: none; /* stylelint-disable property-no-vendor-prefix */
78
+ user-select: none;
69
79
  }
70
80
 
71
81
  // Button with notification style badge
@@ -77,23 +87,7 @@
77
87
  &:focus,
78
88
  &:focus-within,
79
89
  &:focus-visible {
80
- @extend %btn-focus-state;
81
- }
82
-
83
- &.btn--no-border {
84
- &:focus,
85
- &:focus-within,
86
- &:focus-visible {
87
- @extend %btn-focus-state;
88
- }
89
- }
90
-
91
- &.btn--outline {
92
- &:focus,
93
- &:focus-within,
94
- &:focus-visible {
95
- @extend %btn-focus-state;
96
- }
90
+ outline: none;
97
91
  }
98
92
 
99
93
  // https://uxmovement.com/mobile/optimal-size-and-spacing-for-mobile-buttons/
@@ -106,6 +100,7 @@
106
100
  &.btn--large {
107
101
  --__op-btn-height: var(--_op-btn-height-large);
108
102
  --__op-btn-font-size: var(--_op-btn-font-large);
103
+ --__op-btn-padding: var(--_op-btn-padding-large);
109
104
  }
110
105
  }
111
106
  }
@@ -113,21 +108,56 @@
113
108
  .btn {
114
109
  @extend %btn-global;
115
110
 
116
- background-color: transparent;
117
- box-shadow: var(--op-border-all) var(--op-border-color);
118
- color: var(--op-color-neutral-minus-max);
111
+ background-color: var(--op-color-neutral-plus-eight);
112
+ box-shadow: inset var(--op-border-all) var(--op-color-neutral-plus-four);
113
+ color: var(--op-color-neutral-on-plus-eight);
114
+
115
+ // Active State
116
+ &.btn--active {
117
+ background-color: var(--op-color-primary-plus-five);
118
+ box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-three);
119
+ color: var(--op-color-primary-on-plus-five);
120
+ }
119
121
 
120
- &:not(:disabled, .btn--disabled):hover {
121
- background-color: var(--op-color-neutral-plus-seven);
122
- color: var(--op-color-neutral-on-plus-seven);
122
+ // Hover State
123
+ &:hover {
124
+ background-color: var(--op-color-primary-plus-eight);
125
+ box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-three);
126
+ color: var(--op-color-primary-on-plus-eight);
123
127
  }
124
128
 
129
+ // Focus State
130
+ &:focus-visible {
131
+ background-color: var(--op-color-neutral-plus-eight);
132
+ box-shadow: var(--op-input-focus-primary);
133
+ color: var(--op-color-neutral-on-plus-eight);
134
+ }
135
+
136
+ // Borderless State
125
137
  &.btn--no-border {
126
- box-shadow: var(--op-border-all) transparent;
138
+ background-color: transparent;
139
+ box-shadow: none;
140
+ color: var(--op-color-primary-on-plus-max);
141
+
142
+ // Borderless + Active State.
143
+ &.btn--active {
144
+ background-color: var(--op-color-primary-plus-five);
145
+ box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-three);
146
+ color: var(--op-color-primary-on-plus-five);
147
+ }
148
+
149
+ // Borderless + Hover State
150
+ &:hover {
151
+ background-color: var(--op-color-primary-plus-eight);
152
+ box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-five);
153
+ color: var(--op-color-primary-on-plus-eight);
154
+ }
127
155
 
128
- &:not(:disabled, .btn--disabled):hover {
129
- background-color: transparent;
130
- color: var(--op-color-neutral-minus-three);
156
+ // Borderless + Focus State
157
+ &:focus-visible {
158
+ background-color: var(--op-color-primary-plus-eight);
159
+ box-shadow: var(--op-input-focus-primary);
160
+ color: var(--op-color-primary-on-plus-eight);
131
161
  }
132
162
  }
133
163
  }
@@ -136,100 +166,141 @@
136
166
  @extend %btn-global;
137
167
 
138
168
  background-color: var(--op-color-primary-base);
139
- box-shadow: var(--op-border-all) var(--op-color-primary-base);
169
+ box-shadow: inset var(--op-border-all) var(--op-color-primary-base);
140
170
  color: var(--op-color-primary-on-base);
141
171
 
142
- &:not(:disabled, .btn--disabled):hover {
172
+ // Active State
173
+ &.btn--active {
174
+ background-color: var(--op-color-primary-minus-five);
175
+ box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-two);
176
+ color: var(--op-color-primary-on-minus-five);
177
+ }
178
+
179
+ // Hover State
180
+ &:hover {
143
181
  background-color: var(--op-color-primary-plus-one);
144
- box-shadow: var(--op-border-all) var(--op-color-primary-plus-one);
182
+ box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-one);
145
183
  color: var(--op-color-primary-on-plus-one);
146
184
  }
147
185
 
186
+ // Focus State
187
+ &:focus-visible {
188
+ background-color: var(--op-color-primary-base);
189
+ box-shadow: var(--op-input-focus-primary);
190
+ color: var(--op-color-primary-on-base);
191
+ }
192
+
193
+ // Borderless State
148
194
  &.btn--no-border {
149
195
  background-color: transparent;
150
196
  box-shadow: none;
151
197
  color: var(--op-color-primary-base);
152
198
 
153
- &:not(:disabled, .btn--disabled):hover {
154
- background-color: transparent;
155
- box-shadow: none;
156
- color: var(--op-color-primary-plus-one);
199
+ // Borderless + Active State
200
+ &.btn--active {
201
+ background-color: var(--op-color-primary-plus-five);
202
+ box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-three);
203
+ color: var(--op-color-primary-on-plus-five);
157
204
  }
158
- }
159
205
 
160
- &.btn--outline {
161
- background-color: var(--op-color-primary-plus-seven);
162
- box-shadow: var(--op-border-all) var(--op-color-primary-on-plus-seven);
163
- color: var(--op-color-primary-on-plus-seven);
206
+ // Borderless + Hover State
207
+ &:hover {
208
+ background-color: var(--op-color-primary-plus-eight);
209
+ box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-five);
210
+ color: var(--op-color-primary-on-plus-eight);
211
+ }
164
212
 
165
- &:not(:disabled, .btn--disabled):hover {
166
- background-color: var(--op-color-primary-plus-four);
167
- box-shadow: var(--op-border-all) var(--op-color-primary-on-plus-seven);
168
- color: var(--op-color-primary-on-plus-four);
213
+ // Borderless + Focus State
214
+ &:focus-visible {
215
+ background-color: var(--op-color-primary-plus-eight);
216
+ box-shadow: var(--op-input-focus-primary);
217
+ color: var(--op-color-primary-on-plus-eight);
169
218
  }
170
219
  }
171
220
  }
172
221
 
173
- .btn-secondary {
222
+ .btn-delete {
174
223
  @extend %btn-global;
175
224
 
176
- background-color: var(--op-color-primary-plus-seven);
177
- box-shadow: var(--op-border-all) var(--op-color-primary-on-plus-seven);
178
- color: var(--op-color-primary-on-plus-seven);
225
+ background-color: var(--op-color-alerts-danger-base);
226
+ box-shadow: inset var(--op-border-all) var(--op-color-alerts-danger-base);
227
+ color: var(--op-color-alerts-danger-on-base);
179
228
 
180
- &:not(:disabled, .btn--disabled):hover {
181
- background-color: var(--op-color-primary-plus-four);
182
- box-shadow: var(--op-border-all) var(--op-color-primary-on-plus-seven);
183
- color: var(--op-color-primary-on-plus-four);
229
+ // Active State
230
+ &.btn--active {
231
+ background-color: var(--op-color-alerts-danger-plus-five);
232
+ box-shadow: inset var(--op-border-all) var(--op-color-alerts-danger-plus-three);
233
+ color: var(--op-color-alerts-danger-on-plus-five);
184
234
  }
185
235
 
186
- &.btn--no-border {
187
- background-color: transparent;
188
- box-shadow: none;
189
- color: var(--op-color-primary-base);
236
+ // Hover State
237
+ &:hover {
238
+ background-color: var(--op-color-alerts-danger-minus-two);
239
+ box-shadow: inset var(--op-border-all) var(--op-color-alerts-danger-minus-two);
240
+ color: var(--op-color-alerts-danger-on-minus-two);
241
+ }
190
242
 
191
- &:not(:disabled, .btn--disabled):hover {
192
- background-color: transparent;
193
- box-shadow: none;
194
- color: var(--op-color-primary-plus-one);
195
- }
243
+ // Focus State
244
+ &:focus-visible {
245
+ background-color: var(--op-color-alerts-danger-base);
246
+ box-shadow: var(--op-input-focus-danger);
247
+ color: var(--op-color-alerts-danger-on-base);
196
248
  }
197
249
  }
198
250
 
199
- .btn-delete {
251
+ .btn-warning {
200
252
  @extend %btn-global;
201
253
 
202
- background-color: var(--op-color-alerts-danger-base);
203
- box-shadow: var(--op-border-all) var(--op-color-alerts-danger-base);
204
- color: var(--op-color-alerts-danger-on-base);
254
+ background-color: var(--op-color-alerts-warning-base);
255
+ box-shadow: inset var(--op-border-all) var(--op-color-alerts-warning-base);
256
+ color: var(--op-color-alerts-warning-on-base);
257
+
258
+ // Active State
259
+ &.btn--active {
260
+ background-color: var(--op-color-alerts-warning-plus-five);
261
+ box-shadow: inset var(--op-border-all) var(--op-color-alerts-warning-plus-three);
262
+ color: var(--op-color-alerts-warning-on-plus-five);
263
+ }
205
264
 
206
- &:not(:disabled, .btn--disabled):hover {
207
- background-color: var(--op-color-alerts-danger-plus-one);
208
- box-shadow: var(--op-border-all) var(--op-color-alerts-danger-plus-one);
209
- color: var(--op-color-alerts-danger-on-plus-one);
265
+ // Hover State
266
+ &:hover {
267
+ background-color: var(--op-color-alerts-warning-minus-two);
268
+ box-shadow: inset var(--op-border-all) var(--op-color-alerts-warning-minus-two);
269
+ color: var(--op-color-alerts-warning-on-minus-two);
210
270
  }
211
271
 
272
+ // Focus State
273
+ &:focus-visible {
274
+ background-color: var(--op-color-alerts-warning-base);
275
+ box-shadow: var(--op-input-focus-warning);
276
+ color: var(--op-color-alerts-warning-on-base);
277
+ }
278
+
279
+ // Borderless State
212
280
  &.btn--no-border {
213
281
  background-color: transparent;
214
282
  box-shadow: none;
215
- color: var(--op-color-alerts-danger-base);
283
+ color: var(--op-color-alerts-warning-on-plus-max);
216
284
 
217
- &:not(:disabled, .btn--disabled):hover {
218
- background-color: transparent;
219
- box-shadow: none;
220
- color: var(--op-color-alerts-danger-plus-one);
285
+ // Borderless + Active State
286
+ &.btn--active {
287
+ background-color: var(--op-color-alerts-warning-plus-five);
288
+ box-shadow: inset var(--op-border-all) var(--op-color-alerts-warning-plus-three);
289
+ color: var(--op-color-alerts-warning-on-plus-five);
221
290
  }
222
- }
223
291
 
224
- &.btn--outline {
225
- background-color: var(--op-color-alerts-danger-plus-seven);
226
- box-shadow: var(--op-border-all) var(--op-color-alerts-danger-on-plus-seven);
227
- color: var(--op-color-alerts-danger-on-plus-seven);
292
+ // Borderless + Hover State
293
+ &:hover {
294
+ background-color: var(--op-color-alerts-warning-plus-eight);
295
+ box-shadow: inset var(--op-border-all) var(--op-color-alerts-warning-plus-five);
296
+ color: var(--op-color-alerts-warning-on-plus-eight);
297
+ }
228
298
 
229
- &:not(:disabled, .btn--disabled):hover {
230
- background-color: var(--op-color-alerts-danger-plus-four);
231
- box-shadow: var(--op-border-all) var(--op-color-alerts-danger-on-plus-seven);
232
- color: var(--op-color-alerts-danger-on-plus-four);
299
+ // Borderless + Focus State
300
+ &:focus-visible {
301
+ background-color: var(--op-color-alerts-warning-plus-eight);
302
+ box-shadow: var(--op-input-focus-warning);
303
+ color: var(--op-color-alerts-warning-on-plus-eight);
233
304
  }
234
305
  }
235
306
  }
package/dist/scss/components/button_group.scss CHANGED
@@ -1,16 +1,34 @@
1
1
  .btn-group {
2
+ --op-btn-group-hover-z-index: 1;
3
+ --op-btn-group-active-z-index: 2;
4
+ --op-btn-group-focus-z-index: 3;
5
+
2
6
  display: inline-flex;
3
7
  align-items: center;
4
8
 
5
9
  .btn,
6
10
  .btn-primary,
7
- .btn-secondary,
8
- .btn-delete {
11
+ .btn-delete,
12
+ .btn-warning {
9
13
  + .btn,
10
14
  + .btn-primary,
11
- + .btn-secondary,
12
- + .btn-delete {
13
- margin-left: 1px;
15
+ + .btn-delete,
16
+ + .btn-warning {
17
+ margin-left: -1px;
18
+ }
19
+
20
+ &:hover {
21
+ z-index: var(--op-btn-group-hover-z-index);
22
+ }
23
+
24
+ &.btn--active {
25
+ z-index: var(--op-btn-group-active-z-index);
26
+ }
27
+
28
+ &:focus,
29
+ &:focus-within,
30
+ &:focus-visible {
31
+ z-index: var(--op-btn-group-focus-z-index);
14
32
  }
15
33
 
16
34
  &:not(:first-child, :last-child) {
package/dist/scss/components/confirm-dialog.scss ADDED
@@ -0,0 +1,88 @@
1
+ %confirm-dialog-wrapper-global {
2
+ position: fixed;
3
+ z-index: var(--op-z-index-dialog);
4
+ top: 0;
5
+ right: 0;
6
+ bottom: 0;
7
+ left: 0;
8
+ display: flex;
9
+ overflow: hidden;
10
+ align-items: center;
11
+ justify-content: center;
12
+ outline: 0;
13
+ visibility: hidden;
14
+
15
+ .confirm-dialog-wrapper__backdrop {
16
+ position: fixed;
17
+ z-index: var(--op-z-index-dialog-backdrop);
18
+ top: 0;
19
+ right: 0;
20
+ bottom: 0;
21
+ left: 0;
22
+ background: var(--op-color-black);
23
+ opacity: 0;
24
+ transition: var(--op-transition-modal);
25
+ visibility: hidden;
26
+ }
27
+
28
+ &.confirm-dialog-wrapper--active {
29
+ visibility: visible;
30
+
31
+ .confirm-dialog {
32
+ opacity: 1;
33
+ transform: scale(1);
34
+ }
35
+
36
+ .confirm-dialog-wrapper__backdrop {
37
+ opacity: 0.5;
38
+ visibility: visible;
39
+ }
40
+ }
41
+ }
42
+
43
+ %confirm-dialog-global {
44
+ // Public API (allowed to be overridden)
45
+ --_op-confirm-dialog-width: 40rem;
46
+
47
+ z-index: var(--op-z-index-dialog-content);
48
+ width: var(--_op-confirm-dialog-width);
49
+ border-radius: var(--op-radius-medium);
50
+ background-color: var(--op-color-background);
51
+ box-shadow: var(--op-border-all) var(--op-border-color);
52
+ color: var(--op-color-on-background);
53
+ contain: paint;
54
+ font-size: var(--op-font-medium);
55
+ line-height: var(--op-line-height-base);
56
+ opacity: 0;
57
+ transform: scale(0.7);
58
+ transition: var(--op-transition-modal);
59
+
60
+ .confirm-dialog__header,
61
+ .confirm-dialog__body,
62
+ .confirm-dialog__footer {
63
+ padding: var(--op-space-medium);
64
+ }
65
+
66
+ .confirm-dialog__header {
67
+ font-size: var(--op-font-large);
68
+ font-weight: var(--op-font-weight-semi-bold);
69
+ }
70
+
71
+ .confirm-dialog__body {
72
+ box-shadow: var(--op-border-all) var(--op-border-color);
73
+ }
74
+
75
+ .confirm-dialog__footer {
76
+ display: flex;
77
+ align-items: center;
78
+ justify-content: space-between;
79
+ }
80
+ }
81
+
82
+ .confirm-dialog-wrapper {
83
+ @extend %confirm-dialog-wrapper-global;
84
+ }
85
+
86
+ .confirm-dialog {
87
+ @extend %confirm-dialog-global;
88
+ }
package/dist/scss/components/divider.scss ADDED
@@ -0,0 +1,59 @@
1
+ %divider-global {
2
+ // Public API (allowed to be overridden)
3
+ --_op-divider-vertical-min-height: var(--op-space-large);
4
+ --_op-divider-height-small: var(--op-border-width);
5
+ --_op-divider-height-medium: var(--op-border-width-large);
6
+ --_op-divider-height-large: var(--op-border-width-x-large);
7
+ --_op-divider-padding-small: var(--op-space-2x-small);
8
+ --_op-divider-padding-medium: var(--op-space-x-small);
9
+ --_op-divider-padding-large: var(--op-space-medium);
10
+
11
+ // Private API (don't touch these)
12
+ --__op-divider-height: var(--_op-divider-height-small);
13
+ --__op-divider-padding: 0;
14
+
15
+ background-color: var(--op-border-color);
16
+
17
+ // Size Modifiers
18
+ &.divider--small {
19
+ --__op-divider-height: var(--_op-divider-height-small);
20
+ }
21
+
22
+ &.divider--medium {
23
+ --__op-divider-height: var(--_op-divider-height-medium);
24
+ }
25
+
26
+ &.divider--large {
27
+ --__op-divider-height: var(--_op-divider-height-large);
28
+ }
29
+
30
+ // Spacing Modifiers
31
+ &.divider--spacing-small {
32
+ --__op-divider-padding: var(--_op-divider-padding-small);
33
+ }
34
+
35
+ &.divider--spacing-medium {
36
+ --__op-divider-padding: var(--_op-divider-padding-medium);
37
+ }
38
+
39
+ &.divider--spacing-large {
40
+ --__op-divider-padding: var(--_op-divider-padding-large);
41
+ }
42
+ }
43
+
44
+ .divider {
45
+ @extend %divider-global;
46
+
47
+ width: 100%;
48
+ height: var(--__op-divider-height);
49
+ margin: var(--__op-divider-padding) 0;
50
+ }
51
+
52
+ .divider-vertical {
53
+ @extend %divider-global;
54
+
55
+ width: var(--__op-divider-height);
56
+ height: 100%;
57
+ min-height: var(--_op-divider-vertical-min-height);
58
+ margin: 0 var(--__op-divider-padding);
59
+ }