Skip to content

Commit ba6dc99

Browse files
mansonamansona
committed
removing all use of row and col
1 parent 98a5801 commit ba6dc99

File tree

5 files changed

+29
-88
lines changed

5 files changed

+29
-88
lines changed

‎addon/styles/helpers.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -321,3 +321,7 @@
321321
.padding-right-xlarge {
322322
padding-right: var(--spacing-5);
323323
}
324+
325+
.max-width {
326+
max-width: 100%;
327+
}

‎addon/styles/layout.css

Lines changed: 0 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,6 @@
1414
grid-column: span 6/span 6;
1515
}
1616

17-
.max-width {
18-
max-width: 100%;
19-
}
20-
2117
.col-1 {
2218
grid-column: span 1/span 1;
2319
}
@@ -121,46 +117,3 @@
121117
grid-column: span 4/span 4;
122118
}
123119
}
124-
125-
126-
.row {
127-
display: flex;
128-
margin-left: -2rem;
129-
margin-right: -2rem;
130-
flex-wrap: wrap;
131-
margin-bottom: 4rem;
132-
}
133-
134-
.row >.col {
135-
margin: 0 2rem;
136-
flex-grow: 1;
137-
flex-basis: 0;
138-
}
139-
140-
.justify-center {
141-
justify-content: center;
142-
}
143-
144-
.align-end {
145-
align-items: flex-end;
146-
}
147-
148-
.col-one-half {
149-
width: 50%;
150-
margin: 0 2rem;
151-
}
152-
153-
.col-one-third {
154-
width: 30.3%;
155-
margin: 0 2rem;
156-
}
157-
158-
.cards {
159-
160-
}
161-
162-
@media (max-width: 576px) {
163-
.row {
164-
flex-direction: column;
165-
}
166-
}

‎docs/concepts/colours.md

Lines changed: 17 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -7,46 +7,29 @@ The primary palette is applied across every page of the website and contains the
77

88
The following swatches contain a sample of each of the primary palette colours, along with recommendations for its usage and the acceptable contrast guidelines when coupled with text.
99

10-
<div class="row">
11-
<div class="col">
12-
<ColorPallet @color="#1A1A1A" @name="Dark Gray" @variable="--color-dark" @class-name="bg-dark"/>
13-
</div>
14-
<div class="col">
15-
<ColorPallet @color="#E04E39" @name="Orange" @variable="--color-orange" @class-name="bg-orange"/>
16-
</div>
17-
<div class="col">
18-
<ColorPallet @color="#F4F6F8" @name="Muted Gray" @variable="--color-muted" @class-name="bg-muted"/>
19-
</div>
20-
</div>
21-
<div class="row">
22-
<div class="col">
23-
<ColorPallet @color="#FFFFFF" @name="Light" @variable="--color-light" @class-name="bg-light"/>
24-
</div>
25-
</div>
10+
<div class="layout-grid">
11+
<ColorPallet class="col-2-large" @color="#1A1A1A" @name="Dark Gray" @variable="--color-dark" @class-name="bg-dark" />
12+
13+
<ColorPallet class="col-2-large" @color="#E04E39" @name="Orange" @variable="--color-orange" @class-name="bg-orange"/>
2614

15+
<ColorPallet class="col-2-large" @color="#F4F6F8" @name="Muted Gray" @variable="--color-muted" @class-name="bg-muted"/>
2716

17+
<ColorPallet class="col-2-large" @color="#FFFFFF" @name="Light" @variable="--color-light" @class-name="bg-light"/>
18+
</div>
2819

2920
## Secondary Colours
3021
The secondary palette is applied to UI elements and it's not part of the base colors. The purpose of the secondary palette is to ensure the readability, usability, and accessibility of all UI elements and enhance the communication of actions, changes in state, or errors.
3122

32-
<div class="row">
33-
<div class="col">
34-
<ColorPallet @color="#A2A3A8" @name="Light" @variable="--color-gray" @class-name="bg-gray"/>
35-
</div>
36-
<div class="col">
37-
<ColorPallet @color="#E3EEFC" @name="Color Info" @variable="--color-info" @class-name="bg-info"/>
38-
</div>
39-
<div class="col">
40-
<ColorPallet @color="#FFD8E1" @name="Color Danger" @variable="--color-danger" @class-name="bg-danger"/>
41-
</div>
42-
</div>
43-
<div class="row">
44-
<div class="col">
45-
<ColorPallet @color="#FCFFC9" @name="Color Warning" @variable="--color-warning" @class-name="bg-warning"/>
46-
</div>
47-
<div class="col">
48-
<ColorPallet @color="#D9F9E3" @name="Color Success" @variable="--color-success" @class-name="bg-success"/>
49-
</div>
23+
<div class="layout-grid">
24+
<ColorPallet class="col-2-large" @color="#A2A3A8" @name="Light" @variable="--color-gray" @class-name="bg-gray"/>
25+
26+
<ColorPallet class="col-2-large" @color="#E3EEFC" @name="Color Info" @variable="--color-info" @class-name="bg-info"/>
27+
28+
<ColorPallet class="col-2-large" @color="#FFD8E1" @name="Color Danger" @variable="--color-danger" @class-name="bg-danger"/>
29+
30+
<ColorPallet class="col-2-large" @color="#FCFFC9" @name="Color Warning" @variable="--color-warning" @class-name="bg-warning"/>
31+
32+
<ColorPallet class="col-2-large" @color="#D9F9E3" @name="Color Success" @variable="--color-success" @class-name="bg-success"/>
5033
</div>
5134

5235
### Examples

‎docs/concepts/layout.md

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -87,40 +87,41 @@ Example of a centered half column. A column class is used to limit its width.
8787
</div>
8888
</div>
8989
```
90+
9091
## Spacing Scale
9192
The spacing scale is used to manage spacing a white-space within layouts and components.
9293
The spacing scale can be applied to both margin and padding properties.
9394

94-
<div class="row">
95-
<div class="card col">
95+
<div class="layout-grid">
96+
<div class="card col-1">
9697
<div class="spacer-xsmall bg-orange">
9798
</div>
9899
<div class="card-content">
99100
<h4>Extra Small Offset</h4>
100101
</div>
101102
</div>
102-
<div class="card col">
103+
<div class="card col-1">
103104
<div class="spacer-small bg-orange">
104105
</div>
105106
<div class="card-content">
106107
<h4>Small Offset</h4>
107108
</div>
108109
</div>
109-
<div class="card col">
110+
<div class="card col-1">
110111
<div class="spacer-medium bg-orange">
111112
</div>
112113
<div class="card-content">
113114
<h4>Medium Offset</h4>
114115
</div>
115116
</div>
116-
<div class="card col">
117+
<div class="card col-1">
117118
<div class="spacer-large bg-orange">
118119
</div>
119120
<div class="card-content">
120121
<h4>Large Offset</h4>
121122
</div>
122123
</div>
123-
<div class="card col">
124+
<div class="card col-1">
124125
<div class="spacer-xlarge bg-orange">
125126
</div>
126127
<div class="card-content">

‎tests/dummy/app/templates/components/color-pallet.hbs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{{! template-lint-disable no-inline-styles style-concatenation }}
22

3-
<div class="color-pallet">
3+
<div class="color-pallet" ...attributes>
44
<div class="color-pallet__example" style="background-color: {{@color}}">
55
<div class="color-pallet__example-text-row" style="grid-template-columns: repeat({{textClasses.length}}, 1fr)">
66
{{#each textClasses as |textClass|}}

0 commit comments

Comments
 (0)