@inc2734/unitone-css 0.68.4 → 0.69.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.
Files changed (11) hide show
  1. package/dist/app.css +1 -1
  2. package/dist/app.js +1 -1
  3. package/dist/library.js +1 -1
  4. package/package.json +1 -1
  5. package/src/foundation/_foundation.scss +0 -7
  6. package/src/layout-primitives/cluster/_cluster.scss +39 -55
  7. package/src/layout-primitives/responsive-grid/_responsive-grid.scss +47 -47
  8. package/src/layout-primitives/stack/_stack.scss +33 -45
  9. package/src/layout-primitives/vertical-writing/_vertical-writing.scss +1 -1
  10. package/src/layout-primitives/with-sidebar/_with-sidebar.scss +230 -0
  11. package/src/library.js +35 -26
package/src/layout-primitives/cluster/_cluster.scss CHANGED
@@ -22,68 +22,62 @@
22
22
  --unitone--divider-width: 1px;
23
23
  --unitone--divider-style: solid;
24
24
  --unitone--divider-color: var(--unitone--color--gray);
25
- }
26
25
 
27
- &[data-unitone-layout~="-divider\:stripe"] {
28
- column-gap: 0;
29
- align-items: stretch;
26
+ visibility: hidden;
27
+
28
+ &[data-unitone-layout~="divider:initialized"] {
29
+ visibility: visible;
30
+ }
30
31
 
31
32
  > * {
32
33
  position: relative;
33
34
  display: flex;
34
35
  flex-direction: column;
35
36
  justify-content: var(--unitone--align-items);
36
- padding-right: calc(var(--unitone--column-gap) + var(--unitone--divider-width));
37
- padding-left: var(--unitone--column-gap);
38
-
39
- &::before {
40
- content: '';
41
- position: absolute;
42
- inset: 0;
43
- user-select: none;
44
- pointer-events: none;
45
- border-right: var(--unitone--divider-width) var(--unitone--divider-style) var(--unitone--divider-color);
46
- }
47
37
  }
48
38
 
49
- > [data-unitone-layout~="-bol"] {
50
- padding-left: calc(var(--unitone--column-gap) + var(--unitone--divider-width));
51
-
52
- &::before {
53
- border-left: var(--unitone--divider-width) var(--unitone--divider-style) var(--unitone--divider-color);
54
- }
39
+ > ::before {
40
+ content: '';
41
+ position: absolute;
42
+ inset: 0;
43
+ user-select: none;
44
+ pointer-events: none;
45
+ border-width: 0;
46
+ border-style: var(--unitone--divider-style);
47
+ border-color: var(--unitone--divider-color);
55
48
  }
56
49
  }
57
50
 
58
- &[data-unitone-layout~="-divider\:slash"] {
51
+ &[data-unitone-layout~="-divider\:stripe"] {
59
52
  column-gap: 0;
60
53
  align-items: stretch;
61
54
 
62
55
  > * {
63
- position: relative;
64
- display: flex;
65
- flex-direction: column;
66
- justify-content: var(--unitone--align-items);
67
- padding-right: calc(var(--unitone--column-gap) + var(--unitone--divider-width) * 2);
68
- padding-left: calc(var(--unitone--column-gap) + var(--unitone--divider-width) * 2);
56
+ padding: 0 calc(var(--unitone--column-gap) + var(--unitone--divider-width));
69
57
 
70
- > * {
71
- min-width: 0;
58
+ &::before {
59
+ border-width: 0 var(--unitone--divider-width);
72
60
  }
73
61
  }
74
62
 
75
- > [data-unitone-layout~="-bol"] {
76
- padding-left: 0;
63
+ > :not([data-unitone-layout~="-bol"]) {
64
+ padding-left: var(--unitone--column-gap);
65
+
66
+ &::before {
67
+ border-left: 0;
68
+ }
77
69
  }
70
+ }
71
+
72
+ &[data-unitone-layout~="-divider\:slash"] {
73
+ column-gap: calc(var(--unitone--column-gap) * 2 + var(--unitone--divider-width));
74
+ align-items: stretch;
78
75
 
79
76
  > * + :not([data-unitone-layout~="-bol"])::before {
80
- content: '';
81
- position: absolute;
82
- top: 0;
83
77
  right: auto;
84
- bottom: 0;
85
- left: calc(var(--unitone--divider-width) / 2 * -1);
86
- border-left: var(--unitone--divider-width) var(--unitone--divider-style) color-mix(in oklab, var(--unitone--divider-color) 97%, #000);
78
+ left: calc(var(--unitone--column-gap) * -1 - var(--unitone--divider-width));
79
+ border-left-width: var(--unitone--divider-width);
80
+ border-color: color-mix(in oklab, var(--unitone--divider-color) 97%, #000);
87
81
  transform: rotate(22.5deg) scale(.8);
88
82
  }
89
83
  }
@@ -93,30 +87,20 @@
93
87
  align-items: stretch;
94
88
 
95
89
  > * {
96
- position: relative;
97
- display: flex;
98
- flex-direction: column;
99
- justify-content: var(--unitone--align-items);
100
- padding: calc(var(--unitone--row-gap) + var(--unitone--divider-width)) calc(var(--unitone--column-gap) + var(--unitone--divider-width));
101
- padding-left: var(--unitone--column-gap);
90
+ padding:
91
+ calc(var(--unitone--row-gap) + var(--unitone--divider-width))
92
+ calc(var(--unitone--column-gap) + var(--unitone--divider-width));
102
93
 
103
94
  &::before {
104
- content: '';
105
- position: absolute;
106
- inset: 0;
107
- user-select: none;
108
- pointer-events: none;
109
- border-width: var(--unitone--divider-width) var(--unitone--divider-width) var(--unitone--divider-width) 0;
110
- border-style: var(--unitone--divider-style);
111
- border-color: var(--unitone--divider-color);
95
+ border-width: var(--unitone--divider-width);
112
96
  }
113
97
  }
114
98
 
115
- > [data-unitone-layout~="-bol"] {
116
- padding-left: calc(var(--unitone--column-gap) + var(--unitone--divider-width));
99
+ > :not([data-unitone-layout~="-bol"]) {
100
+ padding-left: var(--unitone--column-gap);
117
101
 
118
102
  &::before {
119
- border-left-width: var(--unitone--divider-width);
103
+ border-left-width: 0;
120
104
  }
121
105
  }
122
106
 
package/src/layout-primitives/responsive-grid/_responsive-grid.scss CHANGED
@@ -20,37 +20,47 @@
20
20
  --unitone--divider-width: 1px;
21
21
  --unitone--divider-style: solid;
22
22
  --unitone--divider-color: var(--unitone--color--gray);
23
+
24
+ visibility: hidden;
25
+
26
+ &[data-unitone-layout~="divider:initialized"] {
27
+ visibility: visible;
28
+ }
29
+
30
+ > * {
31
+ position: relative;
32
+ }
33
+
34
+ > ::before {
35
+ content: '';
36
+ position: absolute;
37
+ inset: 0;
38
+ user-select: none;
39
+ pointer-events: none;
40
+ border-width: 0;
41
+ border-style: var(--unitone--divider-style);
42
+ border-color: var(--unitone--divider-color);
43
+ }
23
44
  }
24
45
 
25
46
  &[data-unitone-layout~="-divider\:stripe"] {
26
47
  row-gap: 0;
27
48
 
28
49
  > * {
29
- position: relative;
30
- padding-top: calc(var(--unitone--gap) + var(--unitone--divider-width));
31
- padding-bottom: calc(var(--unitone--gap) + var(--unitone--divider-width));
50
+ padding: calc(var(--unitone--row-gap) + var(--unitone--divider-width)) 0;
32
51
 
33
52
  &::before {
34
- content: '';
35
- position: absolute;
36
- top: 0;
37
- bottom: 0;
38
- right: 0;
39
- left: calc(var(--unitone--gap) * -1);
53
+ left: calc(var(--unitone--column-gap) * -1);
40
54
  border-width: var(--unitone--divider-width) 0;
41
- border-style: var(--unitone--divider-style);
42
- border-color: var(--unitone--divider-color);
43
55
  }
44
56
  }
45
57
 
46
- > [data-unitone-layout~="-bol"] {
47
- &::before {
48
- left: 0;
49
- }
58
+ > [data-unitone-layout~="-bol"]::before {
59
+ left: 0;
50
60
  }
51
61
 
52
62
  > [data-unitone-layout~="-linewrap"] {
53
- padding-top: var(--unitone--column-gap);
63
+ padding-top: var(--unitone--row-gap);
54
64
 
55
65
  &::before {
56
66
  border-top-width: 0;
@@ -62,31 +72,20 @@
62
72
  row-gap: 0;
63
73
 
64
74
  > * {
65
- position: relative;
66
- padding-top: 0;
67
- padding-bottom: calc(var(--unitone--gap) + var(--unitone--divider-width));
75
+ padding: 0 0 calc(var(--unitone--row-gap) + var(--unitone--divider-width));
68
76
 
69
77
  &::before {
70
- content: '';
71
- position: absolute;
72
- top: 0;
73
- bottom: 0;
74
- right: 0;
75
- left: calc(var(--unitone--gap) * -1);
76
- border-width: 0 0 var(--unitone--divider-width) 0;
77
- border-style: var(--unitone--divider-style);
78
- border-color: var(--unitone--divider-color);
78
+ left: calc(var(--unitone--column-gap) * -1);
79
+ border-width: 0 0 var(--unitone--divider-width);
79
80
  }
80
81
  }
81
82
 
82
- > [data-unitone-layout~="-bol"] {
83
- &::before {
84
- left: 0;
85
- }
83
+ > [data-unitone-layout~="-bol"]::before {
84
+ left: 0;
86
85
  }
87
86
 
88
87
  > [data-unitone-layout~="-linewrap"] {
89
- padding-top: var(--unitone--gap);
88
+ padding-top: var(--unitone--row-gap);
90
89
  }
91
90
  }
92
91
 
@@ -94,27 +93,18 @@
94
93
  gap: 0;
95
94
 
96
95
  > * {
97
- position: relative;
98
- padding: calc(var(--unitone--row-gap) + var(--unitone--divider-width)) calc(var(--unitone--column-gap) + var(--unitone--divider-width));
99
- padding-left: var(--unitone--column-gap);
96
+ padding: calc(var(--unitone--column-gap) + var(--unitone--divider-width));
100
97
 
101
98
  &::before {
102
- content: '';
103
- position: absolute;
104
- inset: 0;
105
- user-select: none;
106
- pointer-events: none;
107
- border-width: var(--unitone--divider-width) var(--unitone--divider-width) var(--unitone--divider-width) 0;
108
- border-style: var(--unitone--divider-style);
109
- border-color: var(--unitone--divider-color);
99
+ border-width: var(--unitone--divider-width);
110
100
  }
111
101
  }
112
102
 
113
- > [data-unitone-layout~="-bol"] {
114
- padding-left: calc(var(--unitone--column-gap) + var(--unitone--divider-width));
103
+ > :not([data-unitone-layout~="-bol"]) {
104
+ padding-left: var(--unitone--column-gap);
115
105
 
116
106
  &::before {
117
- border-left-width: var(--unitone--divider-width);
107
+ border-left-width: 0;
118
108
  }
119
109
  }
120
110
 
@@ -125,6 +115,16 @@
125
115
  border-top-width: 0;
126
116
  }
127
117
  }
118
+
119
+ &[data-unitone-layout~="-stack"] {
120
+ > * {
121
+ padding: calc(var(--unitone--row-gap) + var(--unitone--divider-width));
122
+ }
123
+
124
+ > [data-unitone-layout~="-linewrap"] {
125
+ padding-top: var(--unitone--row-gap);
126
+ }
127
+ }
128
128
  }
129
129
 
130
130
  &[data-unitone-layout*="-stairs\:"] {
package/src/layout-primitives/stack/_stack.scss CHANGED
@@ -27,62 +27,62 @@
27
27
  --unitone--divider-width: 1px;
28
28
  --unitone--divider-style: solid;
29
29
  --unitone--divider-color: var(--unitone--color--gray);
30
- }
31
30
 
32
- &[data-unitone-layout~="-divider\:stripe"] {
33
31
  gap: 0;
34
32
 
35
33
  > * {
36
34
  position: relative;
37
- padding-top: var(--unitone--gap);
38
- padding-bottom: calc(var(--unitone--gap) + var(--unitone--divider-width));
35
+ }
36
+
37
+ > ::before {
38
+ content: '';
39
+ position: absolute;
40
+ inset: 0;
41
+ user-select: none;
42
+ pointer-events: none;
43
+ border-width: 0;
44
+ border-style: var(--unitone--divider-style);
45
+ border-color: var(--unitone--divider-color);
46
+ }
47
+ }
48
+
49
+ &[data-unitone-layout~="-divider\:stripe"] {
50
+ > * {
51
+ padding: calc(var(--unitone--gap) + var(--unitone--divider-width)) 0;
39
52
 
40
53
  &::before {
41
- content: '';
42
- position: absolute;
43
- inset: 0;
44
- user-select: none;
45
- pointer-events: none;
46
- border-bottom: var(--unitone--divider-width) var(--unitone--divider-style) var(--unitone--divider-color);
54
+ border-width: var(--unitone--divider-width) 0;
47
55
  }
48
56
  }
49
57
 
50
58
  &:where(:not([data-unitone-layout~="-revert"])) {
51
- > :first-child {
52
- padding-top: calc(var(--unitone--gap) + var(--unitone--divider-width));
59
+ > :not(:first-child) {
60
+ padding-top: var(--unitone--gap);
53
61
 
54
62
  &::before {
55
- border-top: var(--unitone--divider-width) var(--unitone--divider-style) var(--unitone--divider-color);
63
+ border-top-width: 0;
56
64
  }
57
65
  }
58
66
  }
59
67
 
60
68
  &:where([data-unitone-layout~="-revert"]) {
61
- > :last-child {
62
- padding-top: calc(var(--unitone--gap) + var(--unitone--divider-width));
69
+ > :not(:last-child) {
70
+ padding-top: var(--unitone--gap);
63
71
 
64
72
  &::before {
65
- border-top: var(--unitone--divider-width) var(--unitone--divider-style) var(--unitone--divider-color);
73
+ border-top-width: 0;
66
74
  }
67
75
  }
68
76
  }
69
77
  }
70
78
 
71
79
  &[data-unitone-layout~="-divider\:underline"] {
72
- gap: 0;
73
-
74
80
  > * {
75
- position: relative;
76
81
  padding-top: var(--unitone--gap);
77
82
  padding-bottom: calc(var(--unitone--gap) + var(--unitone--divider-width));
78
83
 
79
84
  &::before {
80
- content: '';
81
- position: absolute;
82
- inset: 0;
83
- user-select: none;
84
- pointer-events: none;
85
- border-bottom: var(--unitone--divider-width) var(--unitone--divider-style) var(--unitone--divider-color);
85
+ border-width: 0 0 var(--unitone--divider-width);
86
86
  }
87
87
  }
88
88
 
@@ -100,48 +100,36 @@
100
100
  }
101
101
 
102
102
  &[data-unitone-layout~="-divider\:bordered"] {
103
- gap: 0;
104
-
105
103
  > * {
106
- position: relative;
107
- padding: var(--unitone--gap) calc(var(--unitone--gap) + var(--unitone--divider-width))calc(var(--unitone--gap) + var(--unitone--divider-width));
104
+ padding: calc(var(--unitone--gap) + var(--unitone--divider-width));
108
105
 
109
106
  &::before {
110
- content: '';
111
- position: absolute;
112
- inset: 0;
113
- user-select: none;
114
- pointer-events: none;
115
- border-width: 0 var(--unitone--divider-width) var(--unitone--divider-width) var(--unitone--divider-width);
116
- border-style: var(--unitone--divider-style);
117
- border-color: var(--unitone--divider-color);
107
+ border-width: var(--unitone--divider-width);
118
108
  }
119
109
  }
120
110
 
121
111
  &:where(:not([data-unitone-layout~="-revert"])) {
122
- > :first-child {
123
- padding-top: calc(var(--unitone--gap) + var(--unitone--divider-width));
112
+ > :not(:first-child) {
113
+ padding-top: var(--unitone--gap);
124
114
 
125
115
  &::before {
126
- border-top-width: var(--unitone--divider-width);
116
+ border-top-width: 0;
127
117
  }
128
118
  }
129
119
  }
130
120
 
131
121
  &:where([data-unitone-layout~="-revert"]) {
132
- > :last-child {
133
- padding-top: calc(var(--unitone--gap) + var(--unitone--divider-width));
122
+ > :not(:last-child) {
123
+ padding-top: var(--unitone--gap);
134
124
 
135
125
  &::before {
136
- border-top-width: var(--unitone--divider-width);
126
+ border-top-width: 0;
137
127
  }
138
128
  }
139
129
  }
140
130
  }
141
131
 
142
132
  &[data-unitone-layout~="-negative"] {
143
- gap: 0;
144
-
145
133
  &:where(:not([data-unitone-layout~="-revert"])) {
146
134
  > :not(:first-child) {
147
135
  margin-top: calc(-1 * var(--unitone--gap));
package/src/layout-primitives/vertical-writing/_vertical-writing.scss CHANGED
@@ -16,7 +16,7 @@
16
16
  text-orientation: var(--unitone--text-orientation);
17
17
  visibility: hidden;
18
18
 
19
- &[data-unitone-layout~="-initialized"] {
19
+ &[data-unitone-layout~="vertical-writing\:initialized"] {
20
20
  visibility: visible;
21
21
  }
22
22
 
package/src/layout-primitives/with-sidebar/_with-sidebar.scss CHANGED
@@ -11,6 +11,30 @@
11
11
  max-width: min(100%, var(--unitone--content-max-width));
12
12
  }
13
13
 
14
+ @mixin _aside--stripe--vertical() {
15
+ padding:
16
+ calc(var(--unitone--row-gap) / 2 + var(--unitone--divider-width))
17
+ 0
18
+ calc(var(--unitone--row-gap) / 2);
19
+ }
20
+
21
+ @mixin _main--stripe--vertical() {
22
+ padding:
23
+ calc(var(--unitone--row-gap) + var(--unitone--divider-width))
24
+ 0
25
+ var(--unitone--row-gap);
26
+ }
27
+
28
+ @mixin _main--bordered--vertical() {
29
+ padding: calc(var(--unitone--row-gap) + var(--unitone--divider-width));
30
+ }
31
+
32
+ @mixin _aside--bordered--vertical() {
33
+ padding:
34
+ calc(var(--unitone--row-gap) / 2 + var(--unitone--divider-width))
35
+ calc(var(--unitone--row-gap) + var(--unitone--divider-width));
36
+ }
37
+
14
38
  @mixin abstract-with-sidebar() {
15
39
  --unitone--sidebar-width: auto;
16
40
  --unitone--content-min-width: 50%;
@@ -53,6 +77,212 @@
53
77
  &[data-unitone-layout~="-revert"] {
54
78
  flex-direction: row-reverse;
55
79
  }
80
+
81
+ &:where([data-unitone-layout*="-divider\:"]) {
82
+ --unitone--divider-width: 1px;
83
+ --unitone--divider-style: solid;
84
+ --unitone--divider-color: var(--unitone--color--gray);
85
+
86
+ visibility: hidden;
87
+
88
+ &[data-unitone-layout~="divider:initialized"] {
89
+ visibility: visible;
90
+ }
91
+
92
+ > * {
93
+ position: relative;
94
+ display: flex;
95
+ flex-direction: column;
96
+ justify-content: var(--unitone--align-items);
97
+ }
98
+
99
+ > ::before {
100
+ content: '';
101
+ position: absolute;
102
+ inset: 0;
103
+ user-select: none;
104
+ pointer-events: none;
105
+ border-width: 0;
106
+ border-style: var(--unitone--divider-style);
107
+ border-color: var(--unitone--divider-color);
108
+ }
109
+ }
110
+
111
+ &[data-unitone-layout~="-divider\:stripe"] {
112
+ align-items: stretch;
113
+
114
+ // For vertical layout.
115
+ &[data-unitone-layout~="-stack"] {
116
+ // When -bol / -linewrap is added, the vertical/horizontal layout may switch.
117
+ // This will break the design.
118
+ // This is necessary to prevent this.
119
+ --unitone--content-min-width: 100% !important;
120
+
121
+ row-gap: 0;
122
+
123
+ &:where(
124
+ :not([data-unitone-layout~="-revert"])[data-unitone-layout~="-sidebar\:right"],
125
+ :not([data-unitone-layout~="-revert"]):not([data-unitone-layout~="-sidebar\:left"]),
126
+ [data-unitone-layout~="-revert"][data-unitone-layout~="-sidebar\:left"]
127
+ ) {
128
+ > :first-child {
129
+ @include _main--stripe--vertical();
130
+ }
131
+
132
+ > :nth-child(2) {
133
+ @include _aside--stripe--vertical();
134
+ }
135
+ }
136
+
137
+ &:where(
138
+ :not([data-unitone-layout~="-revert"])[data-unitone-layout~="-sidebar\:left"],
139
+ [data-unitone-layout~="-revert"][data-unitone-layout~="-sidebar\:right"],
140
+ [data-unitone-layout~="-revert"]:not([data-unitone-layout~="-sidebar\:left"])
141
+ ) {
142
+ > :first-child {
143
+ @include _aside--stripe--vertical();
144
+ }
145
+
146
+ > :nth-child(2) {
147
+ @include _main--stripe--vertical();
148
+ }
149
+ }
150
+
151
+ > :first-child::before {
152
+ border-width: var(--unitone--divider-width) 0;
153
+ }
154
+
155
+ > :nth-child(2)::before {
156
+ border-width: 0 0 var(--unitone--divider-width);
157
+ }
158
+ }
159
+
160
+ // For horizontal layout.
161
+ &:not([data-unitone-layout~="-stack"]) {
162
+ column-gap: 0;
163
+
164
+ > * {
165
+ padding: 0 calc(var(--unitone--column-gap) + var(--unitone--divider-width));
166
+ }
167
+
168
+ > :first-child::before {
169
+ border-width: 0 var(--unitone--divider-width);
170
+ }
171
+
172
+ > :nth-child(2)::before {
173
+ border-width: 0 var(--unitone--divider-width) 0 0;
174
+ }
175
+ }
176
+ }
177
+
178
+ &[data-unitone-layout~="-divider\:slash"] {
179
+ --unitone--divider-height: 2rem;
180
+
181
+ gap: 0;
182
+ align-items: stretch;
183
+
184
+ > :first-child::before {
185
+ height: var(--unitone--divider-height);
186
+ border-left-width: var(--unitone--divider-width);
187
+ border-color: color-mix(in oklab, var(--unitone--divider-color) 97%, #000);
188
+ transform: rotate(22.5deg);
189
+ }
190
+
191
+ // For vertical layout.
192
+ &[data-unitone-layout~="-stack"] {
193
+ > :first-child {
194
+ padding-bottom: var(--unitone--row-gap);
195
+
196
+ &::before {
197
+ inset:
198
+ 100%
199
+ auto
200
+ auto
201
+ calc(50% - var(--unitone--divider-width) / 2);
202
+ }
203
+ }
204
+
205
+ > :nth-child(2) {
206
+ padding-top: calc(var(--unitone--row-gap) + var(--unitone--divider-height));
207
+ }
208
+ }
209
+
210
+ // For horizontal layout.
211
+ &:not([data-unitone-layout~="-stack"]) {
212
+ > :first-child {
213
+ padding-right: var(--unitone--column-gap);
214
+
215
+ &::before {
216
+ right: auto;
217
+ bottom: auto;
218
+ left: 100%;
219
+ }
220
+ }
221
+
222
+ > :nth-child(2) {
223
+ padding-left: calc(var(--unitone--column-gap) + var(--unitone--divider-width));
224
+ }
225
+ }
226
+ }
227
+
228
+ &[data-unitone-layout~="-divider\:bordered"] {
229
+ gap: 0;
230
+ align-items: stretch;
231
+
232
+ > ::before {
233
+ border-width: var(--unitone--divider-width);
234
+ }
235
+
236
+ // For vertical layout.
237
+ &[data-unitone-layout~="-stack"] {
238
+ &:where(
239
+ :not([data-unitone-layout~="-revert"])[data-unitone-layout~="-sidebar\:right"],
240
+ :not([data-unitone-layout~="-revert"]):not([data-unitone-layout~="-sidebar\:left"]),
241
+ [data-unitone-layout~="-revert"][data-unitone-layout~="-sidebar\:left"]
242
+ ) {
243
+ > :first-child {
244
+ @include _main--bordered--vertical();
245
+ }
246
+
247
+ > :nth-child(2) {
248
+ @include _aside--bordered--vertical();
249
+ }
250
+ }
251
+
252
+ &:where(
253
+ :not([data-unitone-layout~="-revert"])[data-unitone-layout~="-sidebar\:left"],
254
+ [data-unitone-layout~="-revert"][data-unitone-layout~="-sidebar\:right"],
255
+ [data-unitone-layout~="-revert"]:not([data-unitone-layout~="-sidebar\:left"])
256
+ ) {
257
+ > :first-child {
258
+ @include _aside--bordered--vertical();
259
+ }
260
+
261
+ > :nth-child(2) {
262
+ @include _main--bordered--vertical();
263
+ }
264
+ }
265
+
266
+ > :not(:first-child)::before {
267
+ border-top: 0;
268
+ }
269
+ }
270
+
271
+ // For horizontal layout.
272
+ &:not([data-unitone-layout~="-stack"]) {
273
+ > * {
274
+ padding: calc(var(--unitone--column-gap) + var(--unitone--divider-width));
275
+ }
276
+
277
+ > :not(:first-child) {
278
+ padding-left: var(--unitone--column-gap);
279
+
280
+ &::before {
281
+ border-left: 0;
282
+ }
283
+ }
284
+ }
285
+ }
56
286
  }
57
287
 
58
288
  @mixin with-sidebar() {