megatron 0.1.89 → 0.2.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.
- checksums.yaml +4 -4
- data/app/assets/javascripts/megatron/index.js +34 -94
- data/app/assets/javascripts/megatron/utils/activate-nav-items.js +20 -0
- data/app/assets/javascripts/megatron/utils/auto-navigate.js +11 -14
- data/app/assets/javascripts/megatron/utils/clipboard.js +9 -1
- data/app/assets/javascripts/megatron/utils/form-flash.js +14 -0
- data/app/assets/javascripts/megatron/utils/form-notify.js +50 -38
- data/app/assets/javascripts/megatron/utils/highlight-code.js +46 -0
- data/app/assets/javascripts/megatron/utils/messages.js +10 -6
- data/app/assets/javascripts/megatron/utils/progress-bar.js +9 -0
- data/app/assets/javascripts/megatron/utils/text-helpers.js +17 -7
- data/app/assets/stylesheets/megatron/modules/forms/_range-input.scss +37 -37
- data/app/helpers/megatron/application_helper.rb +9 -7
- data/app/helpers/megatron/form_helper.rb +6 -4
- data/app/views/layouts/megatron/application.html.slim +1 -1
- data/lib/megatron/helper.rb +27 -29
- data/lib/megatron/version.rb +1 -1
- data/public/assets/megatron/{megatron-0.1.89.css → megatron-0.2.0.css} +2 -2
- data/public/assets/megatron/megatron-0.2.0.css.gz +0 -0
- data/public/assets/megatron/{megatron-0.1.89.css.map → megatron-0.2.0.css.map} +2 -2
- data/public/assets/megatron/{megatron-0.1.89.js → megatron-0.2.0.js} +105 -134
- data/public/assets/megatron/megatron-0.2.0.js.gz +0 -0
- data/public/assets/megatron/megatron-0.2.0.map.json +1 -0
- data/public/assets/megatron/{megatron-error-pages-0.1.89.css → megatron-error-pages-0.2.0.css} +0 -0
- data/public/assets/megatron/{megatron-error-pages-0.1.89.css.gz → megatron-error-pages-0.2.0.css.gz} +0 -0
- metadata +14 -22
- data/app/assets/javascripts/megatron/form.js +0 -36
- data/app/assets/javascripts/megatron/link.js +0 -58
- data/app/assets/javascripts/megatron/utils/index.js +0 -81
- data/app/assets/javascripts/megatron/utils/range-input-helper.js +0 -280
- data/app/assets/javascripts/megatron/utils/time/date-to-html.js +0 -59
- data/app/assets/javascripts/megatron/utils/time/time-switch.js +0 -84
- data/app/assets/javascripts/megatron/utils/time/timeago.js +0 -95
- data/app/assets/javascripts/megatron/utils/toggler.js +0 -274
- data/app/assets/stylesheets/_example.scss +0 -76
- data/app/assets/stylesheets/_grid.scss +0 -41
- data/app/assets/stylesheets/_typography.scss +0 -38
- data/app/assets/stylesheets/application.scss +0 -19
- data/public/assets/megatron/megatron-0.1.89.css.gz +0 -0
- data/public/assets/megatron/megatron-0.1.89.js.gz +0 -0
- data/public/assets/megatron/megatron-0.1.89.map.json +0 -1
@@ -1,95 +0,0 @@
|
|
1
|
-
// Timeago by Brandon Mathis, based on JavaScript Pretty Date Copyright (c) 2011 John Resig
|
2
|
-
// Returns relative time
|
3
|
-
|
4
|
-
let Timeago = {
|
5
|
-
// setup HTML templates
|
6
|
-
setup: function timeagoSetup() {
|
7
|
-
|
8
|
-
var timeEls = document.querySelectorAll('.timeago[datetime]')
|
9
|
-
|
10
|
-
Array.prototype.forEach.call(timeEls, function(el) {
|
11
|
-
var datetime = el.attributes.datetime.value
|
12
|
-
var style = el.dataset.timeagoStyle
|
13
|
-
el.innerHTML = Timeago.parse(datetime, style)
|
14
|
-
})
|
15
|
-
},
|
16
|
-
|
17
|
-
// If a browser can't handle dates, bail.
|
18
|
-
browserSupport: function timeagoBrowserSupport() {
|
19
|
-
return !isNaN(new Date("2014-01-29T18:14:29+00:00").getDate())
|
20
|
-
},
|
21
|
-
|
22
|
-
parse: function timeagoParse(time, style) {
|
23
|
-
|
24
|
-
style = style || "normal"
|
25
|
-
if (typeof(time) == 'string') {
|
26
|
-
time = new Date(time)
|
27
|
-
}
|
28
|
-
|
29
|
-
if (style === 'short')
|
30
|
-
var say = {
|
31
|
-
just_now: "now",
|
32
|
-
minute_ago: "1m",
|
33
|
-
minutes_ago: "m",
|
34
|
-
hour_ago: "1h",
|
35
|
-
hours_ago: "h",
|
36
|
-
yesterday: "1d",
|
37
|
-
days_ago: "d",
|
38
|
-
last_week: "1w",
|
39
|
-
weeks_ago: "w"
|
40
|
-
}
|
41
|
-
|
42
|
-
if (style === 'normal')
|
43
|
-
var say = {
|
44
|
-
just_now: "just now",
|
45
|
-
minute_ago: "1 minute",
|
46
|
-
minutes_ago: " minutes",
|
47
|
-
hour_ago: "1 hour",
|
48
|
-
hours_ago: " hours",
|
49
|
-
yesterday: "1 day",
|
50
|
-
days_ago: " days",
|
51
|
-
last_week: "1 week",
|
52
|
-
weeks_ago: " weeks"
|
53
|
-
}
|
54
|
-
|
55
|
-
if (style === 'long')
|
56
|
-
var say = {
|
57
|
-
just_now: "just now",
|
58
|
-
minute_ago: "1 minute ago",
|
59
|
-
minutes_ago: " minutes ago",
|
60
|
-
hour_ago: "1 hour ago",
|
61
|
-
hours_ago: " hours ago",
|
62
|
-
yesterday: "1 day ago",
|
63
|
-
days_ago: " days ago",
|
64
|
-
last_week: "1 week ago",
|
65
|
-
weeks_ago: " weeks ago"
|
66
|
-
}
|
67
|
-
|
68
|
-
var secs = ((new Date().getTime() - new Date(time).getTime()) / 1000)
|
69
|
-
var mins = Math.floor(secs / 60)
|
70
|
-
var hours = Math.floor(secs / 3600)
|
71
|
-
var days = Math.floor(secs / 86400)
|
72
|
-
var weeks = Math.floor(days / 7)
|
73
|
-
var months = Math.floor(days / 30)
|
74
|
-
|
75
|
-
if(isNaN(secs) || days < 0) {
|
76
|
-
return false
|
77
|
-
}
|
78
|
-
|
79
|
-
if(days === 0) {
|
80
|
-
if (secs < 60) return say.just_now
|
81
|
-
else if(secs < 120) return say.minute_ago
|
82
|
-
else if(secs < 3600) return mins + say.minutes_ago
|
83
|
-
else if(secs < 7200) return say.hour_ago
|
84
|
-
else return hours + say.hours_ago
|
85
|
-
} else {
|
86
|
-
if(days === 1) return say.yesterday
|
87
|
-
else if(days < 7) return days + say.days_ago
|
88
|
-
else if(weeks === 1) return say.last_week
|
89
|
-
else return weeks + say.weeks_ago
|
90
|
-
}
|
91
|
-
}
|
92
|
-
}
|
93
|
-
|
94
|
-
module.exports = Timeago
|
95
|
-
|
@@ -1,274 +0,0 @@
|
|
1
|
-
var bean = require('bean')
|
2
|
-
|
3
|
-
require('compose-tap-event')
|
4
|
-
|
5
|
-
var Toggler = {
|
6
|
-
checkboxSelector: "[type=checkbox][data-toggle], [type=checkbox][data-show], [type=checkbox][data-hide]",
|
7
|
-
radioSelector: "input[type=radio][data-show], input[type=radio][data-add-class]",
|
8
|
-
selectSelector: "option[data-show]",
|
9
|
-
|
10
|
-
listen: function togglerListen(){
|
11
|
-
bean.on(document, "click", "[data-toggle], [data-show], [data-hide], [data-toggle-class], [data-add-class], [data-remove-class]", Toggler.trigger)
|
12
|
-
bean.on(document, "change", ".select-toggler", Toggler.trigger)
|
13
|
-
},
|
14
|
-
|
15
|
-
refresh: function togglerRefresh(){
|
16
|
-
Toggler.toggleRadios()
|
17
|
-
Toggler.toggleCheckboxes()
|
18
|
-
Toggler.setupSelects()
|
19
|
-
},
|
20
|
-
|
21
|
-
trigger: function togglerTrigger(event) {
|
22
|
-
var target = event.currentTarget
|
23
|
-
|
24
|
-
if (target.tagName.toLowerCase() == 'a' && target.getAttribute('href') == "#") {
|
25
|
-
event.preventDefault()
|
26
|
-
event.stop()
|
27
|
-
}
|
28
|
-
|
29
|
-
if (target.type == 'radio') {
|
30
|
-
Toggler.toggleRadios(document.querySelectorAll('input[name="'+ target.name +'"]'))
|
31
|
-
Toggler.dispatch(target, 'addClass')
|
32
|
-
} else if (target.type == 'checkbox') {
|
33
|
-
Toggler.toggleCheckbox(target)
|
34
|
-
} else if (target.tagName.toLowerCase() == 'select') {
|
35
|
-
Toggler.toggleSelect(target)
|
36
|
-
} else {
|
37
|
-
Toggler.dispatch(target, 'hide')
|
38
|
-
Toggler.dispatch(target, 'toggle')
|
39
|
-
Toggler.dispatch(target, 'show')
|
40
|
-
Toggler.dispatch(target, 'removeClass')
|
41
|
-
Toggler.dispatch(target, 'toggleClass')
|
42
|
-
Toggler.dispatch(target, 'addClass')
|
43
|
-
}
|
44
|
-
},
|
45
|
-
|
46
|
-
dispatch: function togglerDispatch(el, type, force) {
|
47
|
-
var dispatchedElements
|
48
|
-
|
49
|
-
if (el.dataset[type]){
|
50
|
-
if (type.match(/class/i)){
|
51
|
-
Toggler.setClass(el.dataset[type], type, el)
|
52
|
-
} else {
|
53
|
-
Toggler.setState(el.dataset[type], type)
|
54
|
-
}
|
55
|
-
}
|
56
|
-
},
|
57
|
-
|
58
|
-
// Add, remove, or toggle classnames, triggered by elements with:
|
59
|
-
// data-hide-class, data-show-class, and data-toggle-class values
|
60
|
-
//
|
61
|
-
// Data value examples:
|
62
|
-
// - "classname" - add/remove/toggle classname on current element
|
63
|
-
// - "foo bar" - multiple classnames, separated by spaces (like html class property)
|
64
|
-
// - "foo bar; selector" - change classnames on elements matched by selector
|
65
|
-
// - "foo bar; selector, selector" - match multiple selectors
|
66
|
-
//
|
67
|
-
|
68
|
-
setClass: function (selectors, action, el){
|
69
|
-
if (typeof(action) == 'boolean') {
|
70
|
-
action = (action ? 'add' : 'remove')
|
71
|
-
}
|
72
|
-
|
73
|
-
// Get selector and classnames, format: "classname classname; selector,selector"
|
74
|
-
var settings = selectors.split(';')
|
75
|
-
var classnames = settings[0].trim()
|
76
|
-
var matches = []
|
77
|
-
selectors = settings[1]
|
78
|
-
|
79
|
-
// If no slectors are present, use the current el for classnames
|
80
|
-
if (selectors) {
|
81
|
-
matches = document.querySelectorAll(selectors)
|
82
|
-
} else {
|
83
|
-
matches = [el]
|
84
|
-
}
|
85
|
-
|
86
|
-
Array.prototype.forEach.call(matches, function(match){
|
87
|
-
Array.prototype.forEach.call(classnames.split(' '), function(classname) {
|
88
|
-
match.classList[action.replace(/Class/,'')](classname)
|
89
|
-
})
|
90
|
-
|
91
|
-
Toggler.triggerTogglerEventsOnChildren(match, 'class')
|
92
|
-
})
|
93
|
-
},
|
94
|
-
|
95
|
-
setState: function(selectors, state) {
|
96
|
-
var matches = document.querySelectorAll(selectors)
|
97
|
-
|
98
|
-
Array.prototype.forEach.call(matches, function(match){
|
99
|
-
var action = Toggler.toggleAction(match, state)
|
100
|
-
|
101
|
-
Toggler[action](match)
|
102
|
-
Toggler.triggerTogglerEventsOnChildren(match, action)
|
103
|
-
})
|
104
|
-
},
|
105
|
-
|
106
|
-
toggleAction: function(el, action) {
|
107
|
-
|
108
|
-
if (typeof(action) == 'boolean') {
|
109
|
-
action = (action ? 'show' : 'hide')
|
110
|
-
}
|
111
|
-
|
112
|
-
if (action == 'toggle') {
|
113
|
-
if (el.offsetParent === null) {
|
114
|
-
action = 'show'
|
115
|
-
} else {
|
116
|
-
action = 'hide'
|
117
|
-
}
|
118
|
-
}
|
119
|
-
|
120
|
-
return action
|
121
|
-
|
122
|
-
},
|
123
|
-
|
124
|
-
show: function(el) {
|
125
|
-
el.classList.remove('hidden')
|
126
|
-
el.classList.add('visible')
|
127
|
-
|
128
|
-
// Focus on key element if an element expects focus
|
129
|
-
var focusEl = el.querySelector('[data-focus]')
|
130
|
-
if (focusEl) { focusEl.focus() }
|
131
|
-
|
132
|
-
// Trigger input event on ranges that have been hidden
|
133
|
-
var ranges = el.querySelectorAll('[type=range]')
|
134
|
-
},
|
135
|
-
|
136
|
-
hide: function togglerHide(el) {
|
137
|
-
el.classList.remove('visible')
|
138
|
-
el.classList.add('hidden')
|
139
|
-
},
|
140
|
-
|
141
|
-
getLeafNodes: function (parent) {
|
142
|
-
// is the parent itself a leaf node?
|
143
|
-
if (!parent.hasChildNodes()) return [parent]
|
144
|
-
|
145
|
-
var nodes = Array.prototype.slice.call(parent.getElementsByTagName("*"), 0)
|
146
|
-
|
147
|
-
return nodes.filter(function(elem) {
|
148
|
-
return elem.children && elem.children.length === 0
|
149
|
-
})
|
150
|
-
},
|
151
|
-
|
152
|
-
triggerTogglerEventsOnChildren: function(el, eventName){
|
153
|
-
// we care about leaf nodes since the event will bubble to
|
154
|
-
// non-leaf nodes from the leaf nodes
|
155
|
-
var leafChildNodes = Toggler.getLeafNodes(el)
|
156
|
-
|
157
|
-
Array.prototype.forEach.call(leafChildNodes, function(node) {
|
158
|
-
// 'toggler:show', 'toggler:hide', etc
|
159
|
-
bean.fire(node, "toggler:" + eventName)
|
160
|
-
})
|
161
|
-
},
|
162
|
-
|
163
|
-
toggleRadios: function togglerToggleRadio(radios) {
|
164
|
-
radios = radios || document.querySelectorAll('input[type=radio][data-show], input[type=radio][data-add-class]')
|
165
|
-
|
166
|
-
var checked = []
|
167
|
-
var process = function(radio) {
|
168
|
-
if (radio.dataset.show)
|
169
|
-
Toggler.setState(radio.dataset.show, radio.checked)
|
170
|
-
|
171
|
-
if (radio.dataset.addClass)
|
172
|
-
Toggler.setClass(radio.dataset.addClass, radio.checked)
|
173
|
-
}
|
174
|
-
|
175
|
-
Array.prototype.forEach.call(radios, function(radio){
|
176
|
-
if (radio.checked) {
|
177
|
-
checked.push(radio)
|
178
|
-
} else {
|
179
|
-
process(radio)
|
180
|
-
}
|
181
|
-
})
|
182
|
-
|
183
|
-
Array.prototype.forEach.call(checked, process)
|
184
|
-
},
|
185
|
-
|
186
|
-
toggleCheckbox: function togglerToggeCheckbox(checkbox) {
|
187
|
-
// Visibility toggling
|
188
|
-
if (checkbox.dataset.hide)
|
189
|
-
Toggler.setState(checkbox.dataset.hide, !checkbox.checked)
|
190
|
-
if (checkbox.dataset.toggle)
|
191
|
-
Toggler.setState(checkbox.dataset.toggle, 'toggle')
|
192
|
-
if (checkbox.dataset.show)
|
193
|
-
Toggler.setState(checkbox.dataset.show, checkbox.checked)
|
194
|
-
|
195
|
-
// Class toggling
|
196
|
-
if (checkbox.dataset.removeClass)
|
197
|
-
Toggler.setClass(checkbox.dataset.removeClass, !checkbox.checked, checkbox)
|
198
|
-
if (checkbox.dataset.toggleClass)
|
199
|
-
Toggler.setClass(checkbox.dataset.toggleClass, 'toggle', checkbox)
|
200
|
-
if (checkbox.dataset.addClass)
|
201
|
-
Toggler.setClass(checkbox.dataset.addClass, checkbox.checked, checkbox)
|
202
|
-
},
|
203
|
-
|
204
|
-
toggleSelect: function togglerToggleSelect(select) {
|
205
|
-
var option = select.selectedOptions[0]
|
206
|
-
Toggler.dispatch(option, 'hide')
|
207
|
-
Toggler.dispatch(option, 'show')
|
208
|
-
Toggler.dispatch(option, 'addClass')
|
209
|
-
Toggler.dispatch(option, 'removeClass')
|
210
|
-
},
|
211
|
-
|
212
|
-
toggleCheckboxes: function togglerToggleCheckboxes(checkboxes) {
|
213
|
-
checkboxes = checkboxes || document.querySelectorAll(Toggler.checkboxSelector)
|
214
|
-
|
215
|
-
Array.prototype.forEach.call(checkboxes, Toggler.toggleCheckbox)
|
216
|
-
},
|
217
|
-
|
218
|
-
// Add data-hide to each <option> containing the selectors from other
|
219
|
-
// option's data-show. This makes the toggling of elements exclusive.
|
220
|
-
//
|
221
|
-
setupSelects: function togglerSetupSelects(selects){
|
222
|
-
selects = selects || document.querySelectorAll(Toggler.selectSelector)
|
223
|
-
|
224
|
-
Array.prototype.forEach.call(selects, function(option){
|
225
|
-
if (!option.dataset.hide) {
|
226
|
-
|
227
|
-
var select = Toggler.getSelectFromOption(option)
|
228
|
-
select.classList.add('select-toggler')
|
229
|
-
var options = select.querySelectorAll('option')
|
230
|
-
var selectors = Toggler.showAttributes(options)
|
231
|
-
|
232
|
-
Array.prototype.forEach.call(options, function(o) {
|
233
|
-
option.dataset.hide = selectors.filter(function(selector){
|
234
|
-
return option.dataset.show != selector && selector != ""
|
235
|
-
}).join(',')
|
236
|
-
})
|
237
|
-
|
238
|
-
// Ensure that currently selected option is toggled properly
|
239
|
-
//
|
240
|
-
Toggler.toggleSelect(select)
|
241
|
-
}
|
242
|
-
})
|
243
|
-
},
|
244
|
-
|
245
|
-
// Find parent <select> for an option (accounts for option groups)
|
246
|
-
//
|
247
|
-
getSelectFromOption: function togglerGetSelectFromOption(el) {
|
248
|
-
var p = el.parentElement
|
249
|
-
|
250
|
-
if (p.tagName.toLowerCase() == 'select') {
|
251
|
-
return p
|
252
|
-
} else {
|
253
|
-
return Toggler.getSelectFromOption(p)
|
254
|
-
}
|
255
|
-
},
|
256
|
-
|
257
|
-
// Return an array of all data-show values from elements
|
258
|
-
//
|
259
|
-
showAttributes: function togglerShowAttributes(elements) {
|
260
|
-
return Array.prototype.map.call(elements, function(el) {
|
261
|
-
return el.dataset.show
|
262
|
-
})
|
263
|
-
},
|
264
|
-
|
265
|
-
toggleSelects: function togglerToggleSelects(selects) {
|
266
|
-
var selects = selects || 'option[data-show]'
|
267
|
-
|
268
|
-
Array.prototype.forEach.call(document.querySelectorAll(radios), function(radio) {
|
269
|
-
Toggler.setState(radio.dataset.show, radio.checked)
|
270
|
-
})
|
271
|
-
}
|
272
|
-
}
|
273
|
-
|
274
|
-
module.exports = Toggler
|
@@ -1,76 +0,0 @@
|
|
1
|
-
.demo {
|
2
|
-
margin: 1.6em 0;
|
3
|
-
}
|
4
|
-
.demo-header {
|
5
|
-
overflow: hidden;
|
6
|
-
margin: 1.2em 0;
|
7
|
-
}
|
8
|
-
|
9
|
-
.demo-heading {
|
10
|
-
display: inline-block;
|
11
|
-
font-weight: normal;
|
12
|
-
vertical-align: bottom;
|
13
|
-
float: left;
|
14
|
-
margin: 0;
|
15
|
-
}
|
16
|
-
|
17
|
-
.demo-source-toggle {
|
18
|
-
float: right;
|
19
|
-
vertical-align: bottom;
|
20
|
-
}
|
21
|
-
|
22
|
-
.demo-box {
|
23
|
-
list-style: none;
|
24
|
-
position: relative;
|
25
|
-
margin-bottom: $block-margin;
|
26
|
-
border: 1px solid $page-border;
|
27
|
-
background: #fafafa;
|
28
|
-
margin-top: $block-margin + 2em;
|
29
|
-
|
30
|
-
&-row {
|
31
|
-
padding: 10px;
|
32
|
-
border-bottom: 1px solid #e5e5e5;
|
33
|
-
position: relative;
|
34
|
-
|
35
|
-
&:last-child {
|
36
|
-
border-bottom: 0;
|
37
|
-
}
|
38
|
-
}
|
39
|
-
|
40
|
-
&.padded {
|
41
|
-
@include pad_box;
|
42
|
-
pre {
|
43
|
-
padding: 0;
|
44
|
-
}
|
45
|
-
}
|
46
|
-
|
47
|
-
.heading-anchor:after {
|
48
|
-
top: -.8em;
|
49
|
-
left: -.8em;
|
50
|
-
}
|
51
|
-
|
52
|
-
.demo-header {
|
53
|
-
position: absolute;
|
54
|
-
top: -30px;
|
55
|
-
left: -1px;
|
56
|
-
right: -1px;
|
57
|
-
padding: 0 1em;
|
58
|
-
margin: 0;
|
59
|
-
border: 1px solid #e5e5e5;
|
60
|
-
background: #f5f5f5;
|
61
|
-
font-family: Helvetica, Arial, sans-serif;
|
62
|
-
line-height: 30px;
|
63
|
-
font-size: 13px;
|
64
|
-
z-index: 2;
|
65
|
-
color: $light-text-color;
|
66
|
-
}
|
67
|
-
|
68
|
-
.demo-heading {
|
69
|
-
font-size: 1em;
|
70
|
-
}
|
71
|
-
|
72
|
-
pre {
|
73
|
-
border: none;
|
74
|
-
margin: 0;
|
75
|
-
}
|
76
|
-
}
|
@@ -1,41 +0,0 @@
|
|
1
|
-
.grid-demo .grid-cell {
|
2
|
-
|
3
|
-
code {
|
4
|
-
display: inline-block;
|
5
|
-
color: #fff;
|
6
|
-
background: hsl(200, 65%, 72%);
|
7
|
-
width: 100%;
|
8
|
-
border: none;
|
9
|
-
border-radius: 0px;
|
10
|
-
line-height: 1.8em;
|
11
|
-
margin-bottom: 1px;
|
12
|
-
}
|
13
|
-
.grid {
|
14
|
-
code {
|
15
|
-
background: hsl(160, 45%, 72%);
|
16
|
-
}
|
17
|
-
}
|
18
|
-
}
|
19
|
-
|
20
|
-
.cell-size-demo {
|
21
|
-
.grid-cell:nth-child(even) {
|
22
|
-
code {
|
23
|
-
background: hsl(200, 12%, 90%);
|
24
|
-
color: #444;
|
25
|
-
}
|
26
|
-
}
|
27
|
-
}
|
28
|
-
|
29
|
-
.gutter-demo {
|
30
|
-
.grid-cell:nth-child(2) code {
|
31
|
-
background: hsl(160, 45%, 72%);
|
32
|
-
}
|
33
|
-
|
34
|
-
.grid-cell:nth-child(3) code {
|
35
|
-
background: hsl(0, 45%, 72%);
|
36
|
-
}
|
37
|
-
|
38
|
-
.grid-cell:nth-child(4) code {
|
39
|
-
background: hsl(240, 45%, 72%);
|
40
|
-
}
|
41
|
-
}
|