Skip to content

Commit ca388db

Browse files
fbacallfbacall
committed
Experimenting with multiple UI "themes"
Allow icons to be re-coloured per-theme. Allow theme to be selected on space
1 parent 1487fe3 commit ca388db

32 files changed

Lines changed: 1898 additions & 111 deletions

‎app/assets/config/manifest.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
//= link_tree ../images
2-
//= link application.css
2+
//= link_directory ../stylesheets/themes .css
33
//= link application.js

‎app/assets/images/themes/blue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
../modern

‎app/assets/images/themes/dark‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
../modern/

‎app/assets/images/themes/default‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
../modern

‎app/assets/images/themes/green‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
../modern

‎app/assets/images/themes/space‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
../modern

‎app/assets/stylesheets/application.scss‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,7 @@
1313
*/
1414
// "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables"
1515
@import "bootstrap-sprockets";
16-
@import "mixins/variables";
17-
// *** Colour changes can be done here! ***
16+
@import "bootstrap/variables";
1817
@import "bootstrap";
1918
@import "font-awesome-sprockets";
2019
@import "font-awesome";
@@ -123,7 +122,7 @@ div.wrapper {
123122
flex-shrink: 0;
124123

125124
.sidebar-group {
126-
background: #FFFFFF;
125+
background: $panel-bg;
127126
@include floating-card;
128127
border-radius: 6px;
129128
> ul {
@@ -144,8 +143,8 @@ div.wrapper {
144143
width: calc(100% - 40px);
145144
position: absolute;
146145
z-index: $zindex-modal;
147-
background: white;
148-
border-bottom: 1px solid #ccc;
146+
background: $panel-bg;
147+
border-bottom: 1px solid $panel-default-border;
149148
border-radius: $border-radius-large;
150149
top: 0;
151150
left: 20px;

‎app/assets/stylesheets/bootstrap-tweaks.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -41,25 +41,25 @@ a.btn {
4141

4242
li.prev {
4343
span, a {
44-
background-image: image-url("modern/icons/chevron-left-icon.svg");
44+
background-image: image-url("#{$theme-base}/icons/chevron-left-icon.svg");
4545
}
4646
}
4747

4848
li.next {
4949
span, a {
50-
background-image: image-url("modern/icons/chevron-right-icon.svg");
50+
background-image: image-url("#{$theme-base}/icons/chevron-right-icon.svg");
5151
}
5252
}
5353

5454
li.first {
5555
span, a {
56-
background-image: image-url("modern/icons/double-left-icon.svg");
56+
background-image: image-url("#{$theme-base}/icons/double-left-icon.svg");
5757
}
5858
}
5959

6060
li.last {
6161
span, a {
62-
background-image: image-url("modern/icons/double-right-icon.svg");
62+
background-image: image-url("#{$theme-base}/icons/double-right-icon.svg");
6363
}
6464
}
6565

‎app/assets/stylesheets/icons.scss‎

Lines changed: 41 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -61,165 +61,165 @@
6161

6262
.api-icon {
6363
// image-url
64-
background-image: image-url("modern/icons/api-icon.svg");
64+
background-image: image-url("#{$theme-base}/icons/api-icon.svg");
6565
}
6666

6767
.star-icon {
68-
background-image: image-url("modern/icons/star-icon.svg");
68+
background-image: image-url("#{$theme-base}/icons/star-icon.svg");
6969
}
7070

7171
.star-fill-icon {
72-
background-image: image-url("modern/icons/star-fill-icon.svg");
72+
background-image: image-url("#{$theme-base}/icons/star-fill-icon.svg");
7373
}
7474

7575
.star-primary-icon {
76-
background-image: image-url("modern/icons/star-primary-icon.svg");
76+
background-image: image-url("#{$theme-base}/icons/star-primary-icon.svg");
7777
}
7878

7979
.star-primary-fill-icon {
80-
background-image: image-url("modern/icons/star-primary-fill-icon.svg");
80+
background-image: image-url("#{$theme-base}/icons/star-primary-fill-icon.svg");
8181
}
8282

8383
.search-icon {
84-
background-image: image-url("modern/icons/search-icon.svg");
84+
background-image: image-url("#{$theme-base}/icons/search-icon.svg");
8585
}
8686

8787
.arrow-right-icon {
88-
background-image: image-url("modern/icons/arrow-right-icon.svg");
88+
background-image: image-url("#{$theme-base}/icons/arrow-right-icon.svg");
8989
}
9090

9191
.arrow-top-right-icon {
92-
background-image: image-url("modern/icons/arrow-top-right-icon.svg");
92+
background-image: image-url("#{$theme-base}/icons/arrow-top-right-icon.svg");
9393
}
9494

9595
.arrow-top-right-white-icon {
96-
background-image: image-url("modern/icons/arrow-top-right-white-icon.svg");
96+
background-image: image-url("#{$theme-base}/icons/arrow-top-right-white-icon.svg");
9797
}
9898

9999
.chevron-left-icon {
100-
background-image: image-url("modern/icons/chevron-left-icon.svg");
100+
background-image: image-url("#{$theme-base}/icons/chevron-left-icon.svg");
101101
}
102102

103103
.chevron-right-icon {
104-
background-image: image-url("modern/icons/modern/icons/chevron-right-icon.svg");
104+
background-image: image-url("#{$theme-base}/icons/chevron-right-icon.svg");
105105
}
106106

107107
.circle-xmark-icon {
108-
background-image: image-url("modern/icons/circle-xmark-icon.svg");
108+
background-image: image-url("#{$theme-base}/icons/circle-xmark-icon.svg");
109109
}
110110

111111
.class-icon {
112-
background-image: image-url("modern/icons/class-icon.svg");
112+
background-image: image-url("#{$theme-base}/icons/class-icon.svg");
113113
}
114114

115115
.clear-filters-icon {
116-
background-image: image-url("modern/icons/clear-filters-icon.svg");
116+
background-image: image-url("#{$theme-base}/icons/clear-filters-icon.svg");
117117
}
118118

119119
.community-icon {
120-
background-image: image-url("modern/icons/community-icon.svg");
120+
background-image: image-url("#{$theme-base}/icons/community-icon.svg");
121121
}
122122

123123
.cross-icon {
124-
background-image: image-url("modern/icons/cross-icon.svg");
124+
background-image: image-url("#{$theme-base}/icons/cross-icon.svg");
125125
}
126126

127127
.developer-icon {
128-
background-image: image-url("modern/icons/developer-icon.svg");
128+
background-image: image-url("#{$theme-base}/icons/developer-icon.svg");
129129
}
130130

131131
.double-left-icon {
132-
background-image: image-url("modern/icons/double-left-icon.svg");
132+
background-image: image-url("#{$theme-base}/icons/double-left-icon.svg");
133133
}
134134

135135
.double-right-icon {
136-
background-image: image-url("modern/icons/double-right-icon.svg");
136+
background-image: image-url("#{$theme-base}/icons/double-right-icon.svg");
137137
}
138138

139139
.events-icon {
140-
background-image: image-url("modern/icons/events-icon.svg");
140+
background-image: image-url("#{$theme-base}/icons/events-icon.svg");
141141
}
142142

143143
.filter-icon {
144-
background-image: image-url("modern/icons/filter-icon.svg");
144+
background-image: image-url("#{$theme-base}/icons/filter-icon.svg");
145145
}
146146

147147
.hourglass-icon {
148-
background-image: image-url("modern/icons/hourglass-icon.svg");
148+
background-image: image-url("#{$theme-base}/icons/hourglass-icon.svg");
149149
}
150150

151151
.hybrid-event-icon {
152-
background-image: image-url("modern/icons/hybrid-event-icon.svg");
152+
background-image: image-url("#{$theme-base}/icons/hybrid-event-icon.svg");
153153
}
154154

155155
.materials-icon {
156-
background-image: image-url("modern/icons/materials-icon.svg");
156+
background-image: image-url("#{$theme-base}/icons/materials-icon.svg");
157157
}
158158

159159
.microscope-icon {
160-
background-image: image-url("modern/icons/microscope-icon.svg");
160+
background-image: image-url("#{$theme-base}/icons/microscope-icon.svg");
161161
}
162162

163163
.minus-icon {
164-
background-image: image-url("modern/icons/minus-icon.svg");
164+
background-image: image-url("#{$theme-base}/icons/minus-icon.svg");
165165
}
166166

167167
.nonprofit-icon {
168-
background-image: image-url("modern/icons/nonprofit-icon.svg");
168+
background-image: image-url("#{$theme-base}/icons/nonprofit-icon.svg");
169169
}
170170

171171
.onsite-event-icon {
172-
background-image: image-url("modern/icons/onsite-event-icon.svg");
172+
background-image: image-url("#{$theme-base}/icons/onsite-event-icon.svg");
173173
}
174174

175175
.plus-icon {
176-
background-image: image-url("modern/icons/plus-icon.svg");
176+
background-image: image-url("#{$theme-base}/icons/plus-icon.svg");
177177
}
178178

179179
.search-icon {
180-
background-image: image-url("modern/icons/search-icon.svg");
180+
background-image: image-url("#{$theme-base}/icons/search-icon.svg");
181181
}
182182

183183
.search-icon-blue {
184-
background-image: image-url("modern/icons/search-icon-blue.svg");
184+
background-image: image-url("#{$theme-base}/icons/search-icon-blue.svg");
185185
}
186186

187187
.sort-icon {
188-
background-image: image-url("modern/icons/sort-icon.svg");
188+
background-image: image-url("#{$theme-base}/icons/sort-icon.svg");
189189
}
190190

191191
.source-code-icon {
192-
background-image: image-url("modern/icons/source-code-icon.svg");
192+
background-image: image-url("#{$theme-base}/icons/source-code-icon.svg");
193193
}
194194

195195
.star-icon {
196-
background-image: image-url("modern/icons/star-icon.svg");
196+
background-image: image-url("#{$theme-base}/icons/star-icon.svg");
197197
}
198198

199199
.sustainable-icon {
200-
background-image: image-url("modern/icons/sustainable-icon.svg");
200+
background-image: image-url("#{$theme-base}/icons/sustainable-icon.svg");
201201
}
202202

203203
.trainers-icon {
204-
background-image: image-url("modern/icons/trainers-icon.svg");
204+
background-image: image-url("#{$theme-base}/icons/trainers-icon.svg");
205205
}
206206

207207
.online-event-icon {
208-
background-image: image-url("modern/icons/virtual-event-icon.svg");
208+
background-image: image-url("#{$theme-base}/icons/virtual-event-icon.svg");
209209
}
210210

211211
.workflows-icon {
212-
background-image: image-url("modern/icons/workflows-icon.svg");
212+
background-image: image-url("#{$theme-base}/icons/workflows-icon.svg");
213213
}
214214

215215
.expand-icon {
216-
background-image: image-url("modern/icons/expand-icon.svg");
216+
background-image: image-url("#{$theme-base}/icons/expand-icon.svg");
217217
}
218218

219219
.collapse-icon {
220-
background-image: image-url("modern/icons/collapse-icon.svg");
220+
background-image: image-url("#{$theme-base}/icons/collapse-icon.svg");
221221
}
222222

223223
.information-icon {
224-
background-image: image-url("modern/icons/info-icon.svg");
224+
background-image: image-url("#{$theme-base}/icons/info-icon.svg");
225225
}

‎app/assets/stylesheets/learning-paths.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -51,17 +51,17 @@
5151
}
5252

5353
.learning-path-bg-1 {
54-
border-image-source: image-url("modern/learning_paths/learning-path-bg-1.svg");
54+
border-image-source: image-url("#{$theme-base}/learning_paths/learning-path-bg-1.svg");
5555
}
5656

5757
.learning-path-bg-2 {
58-
border-image-source: image-url("modern/learning_paths/learning-path-bg-2.svg");
58+
border-image-source: image-url("#{$theme-base}/learning_paths/learning-path-bg-2.svg");
5959
}
6060

6161
.learning-path-bg-3 {
62-
border-image-source: image-url("modern/learning_paths/learning-path-bg-3.svg");
62+
border-image-source: image-url("#{$theme-base}/learning_paths/learning-path-bg-3.svg");
6363
}
6464

6565
.learning-path-bg-4 {
66-
border-image-source: image-url("modern/learning_paths/learning-path-bg-4.svg");
66+
border-image-source: image-url("#{$theme-base}/learning_paths/learning-path-bg-4.svg");
6767
}

0 commit comments

Comments
 (0)