Skip to content

Commit f7f8fb5

Browse files
100stacks100stacks
authored
Merge pull request #607 from lalithkarikelli/surf1912
Layout: convert Light DOM LESS to SCSS
2 parents 7933838 + 5ccc375 commit f7f8fb5

File tree

4 files changed

+59
-62
lines changed

4 files changed

+59
-62
lines changed

‎src/less/components.less‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,6 @@
3030
@import 'components/dropdown-select/index';
3131
@import 'components/file/index';
3232
@import 'components/form/index';
33-
@import 'components/layout/index';
3433
@import 'components/list/index';
3534
@import 'components/menu/index';
3635
@import 'components/modal/index';

‎src/less/components/modal/index.less‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
@import (reference) 'vars';
2-
@import (reference) 'components/layout/index';
32

43
hx-modal:extend(.hxComponent) {
54
display: none;

‎src/scss/components/_index.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66
@import "form/index";
77
@import "grid/index";
88
@import "icon/index";
9+
@import "layout/index";
910
@import "loader/index";
10-
@import "navigation/index";
1111
@import "pagination/index";
1212
@import "panel/index";
1313
@import "pill/index";

‎src/less/components/layout/index.less‎ renamed to ‎src/scss/components/layout/_index.scss‎

Lines changed: 58 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,49 @@
1-
@import (reference) 'vars';
2-
@import (reference) 'components/box/index';
1+
@import 'vars';
32

43
// NOTE: be aware of changes needed in the base/typography.less
5-
@header-height: 3.5rem; // 56px
6-
@footer-height: 2.5rem; // 40px
7-
8-
/* ======================================= *\
9-
+-----------------------+
10-
| "header" area |
11-
| |
12-
| +-(#head)-----------+ |
13-
| | global nav | |
14-
| +-------------------+ |
15-
+-----------------------+
16-
| "app" area |
17-
| |
18-
| +-(#stage)----------+ |
19-
| | +-(#nav)--------+ | |
20-
| | | product nav | | |
21-
| | +---------------+ | |
22-
| | | |
23-
| | +-(#content)----+ | |
24-
| | | ... | | |
25-
| | +---------------+ | |
26-
| | | |
27-
| | +-(.hxSiderail)-+ | |
28-
| | | ... | | |
29-
| | +---------------+ | |
30-
| +-------------------+ |
31-
| |
32-
+-----------------------+
33-
| "footer" area |
34-
| |
35-
| +-(#foot)-----------+ |
36-
| | #foot | |
37-
| +-------------------+ |
38-
+-----------------------+
39-
\* ======================================= */
40-
41-
/* ---------- Base/Common Styling ---------- */
4+
$header-height: 3.5rem; // 56px
5+
$footer-height: 2.5rem; // 40px
6+
7+
/// =======================================
8+
/// +-----------------------+
9+
/// | "header" area |
10+
/// | |
11+
/// | +-(#head)-----------+ |
12+
/// | | global nav | |
13+
/// | +-------------------+ |
14+
/// +-----------------------+
15+
/// | "app" area |
16+
/// | |
17+
/// | +-(#stage)----------+ |
18+
/// | | +-(#nav)--------+ | |
19+
/// | | | product nav | | |
20+
/// | | +---------------+ | |
21+
/// | | | |
22+
/// | | +-(#content)----+ | |
23+
/// | | | ... | | |
24+
/// | | +---------------+ | |
25+
/// | | | |
26+
/// | | +-(.hxSiderail)-+ | |
27+
/// | | | ... | | |
28+
/// | | +---------------+ | |
29+
/// | +-------------------+ |
30+
/// | |
31+
/// +-----------------------+
32+
/// | "footer" area |
33+
/// | |
34+
/// | +-(#foot)-----------+ |
35+
/// | | #foot | |
36+
/// | +-------------------+ |
37+
/// +-----------------------+
38+
/// =======================================
39+
40+
// ---------- Base/Common Styling ----------
4241
html {
4342
height: 100%;
4443
}
4544

4645
body {
47-
background-color: @gray-25;
46+
background-color: $gray-25;
4847
height: 100%;
4948
margin: 0;
5049
}
@@ -57,20 +56,20 @@ a[href="#content"] {
5756
top: -100px;
5857

5958
&:focus {
60-
background-color: @orange-100;
61-
border: 1px solid @orange-700;
62-
color: @gray-1000;
59+
background-color: $orange-100;
60+
border: 1px solid $orange-700;
61+
color: $gray-1000;
6362
left: 50%;
6463
padding: 0.5rem;
6564
top: 0.5rem;
66-
transform: tranlateX(-50%);
65+
transform: translateX(-50%);
6766
}
6867
}
6968

7069
#head {
71-
background-color: @gray-1000;
70+
background-color: $gray-1000;
7271
flex-shrink: 0;
73-
height: @header-height;
72+
height: $header-height;
7473
}
7574

7675
#app {
@@ -88,7 +87,7 @@ a[href="#content"] {
8887

8988
#nav { // Left Nav
9089
flex-shrink: 0;
91-
width: @app-nav-width;
90+
width: $app-nav-width;
9291
}
9392

9493
#content {
@@ -98,18 +97,18 @@ a[href="#content"] {
9897
}
9998

10099
.hxSiderail {
101-
background-color: @gray-100;
100+
background-color: $gray-100;
102101
flex-shrink: 0;
103102
width: 25%; // 3 of 12 columns
104103
}
105104

106105
#foot {
107106
align-items: center;
108-
background-color: @gray-950;
109-
color: @gray-300;
107+
background-color: $gray-950;
108+
color: $gray-300;
110109
display: flex;
111110
flex-shrink: 0;
112-
height: @footer-height;
111+
height: $footer-height;
113112
padding: 0 20px;
114113

115114
nav {
@@ -121,31 +120,31 @@ a[href="#content"] {
121120
}
122121

123122
a[href] {
124-
color: @cyan-500;
123+
color: $cyan-500;
125124
}
126125
}//#foot
127126

128-
/* ========== VERTICAL LAYOUT ========== */
127+
// ========== VERTICAL LAYOUT ==========
129128
body.hxVertical {
130129
display: flex;
131130
flex-direction: column;
132131
}
133132

134-
/* ========== HORIZONTAL LAYOUT ========== */
133+
// ========== HORIZONTAL LAYOUT ==========
135134
body.hxHorizontal {
136-
/* Legacy Grid Implementation */
135+
// Legacy Grid Implementation
137136
display: -ms-grid;
138137
-ms-grid-columns: 1fr;
139-
-ms-grid-rows: @header-height 1fr @footer-height;
138+
-ms-grid-rows: $header-height 1fr $footer-height;
140139

141-
/* Modern Grid Implementation */
140+
// Modern Grid Implementation
142141
display: grid;
143142
grid-template-areas:
144143
'header'
145144
'app'
146145
'footer';
147146
grid-template-columns: 1fr;
148-
grid-template-rows: @header-height 1fr @footer-height;
147+
grid-template-rows: $header-height 1fr $footer-height;
149148

150149
#head {
151150
// Legacy Grid
@@ -184,7 +183,7 @@ body.hxHorizontal {
184183

185184
> hx-panel + hx-panel, // DEPRECATED, remove in v1.0.0
186185
> .hxPanel + .hxPanel {
187-
border-left: 1px solid @gray-300;
186+
border-left: 1px solid $gray-300;
188187
}
189188
}
190189

0 commit comments

Comments
 (0)