-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathnocsscolorvars.html
258 lines (258 loc) · 11.4 KB
/
nocsscolorvars.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./reset.css">
<link rel="stylesheet" href="./nocsscolorvars.css">
<style id="stateTheme"></style>
<!-- <link href="https://fonts.googleapis.com/css?family=Poppins:300,300i,500,500i,700" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Poppins:300,300i,500,500i,700" rel="stylesheet"> -->
<title>Sin la implementación de una herramienta interactiva</title>
</head>
<body>
<input class="variation" id="bluepurple" type="radio" value="1" name="color" checked="checked" onclick="bluepurple()"/>
<label for="bluepurple"></label>
<input class="variation" id="sunset" type="radio" value="2" name="color" onclick="sunset()" />
<label for="sunset"></label>
<input class="variation" id="godiva" type="radio" value="3" name="color" onclick="godiva()"/>
<label for="godiva"></label>
<input class="variation" id="dark" type="radio" value="4" name="color" onclick="dark()"/>
<label for="dark"></label>
<input class="variation" id="pinkaru" type="radio" value="5" name="color" onclick="pinkaru()"/>
<label for="pinkaru"></label>
<main>
<section class="colors">
<h6>colors</h6>
<div class="palette main">
<div class="palette__main"></div>
<div class="palette__shade"></div>
<div class="palette__shade"></div>
<div class="palette__shade"></div>
<div class="palette__shade"></div>
<div class="palette__shade"></div>
<div class="palette__shade"></div>
<h5>Primary</h5>
</div>
<div class="palette secondary">
<div class="palette__main"></div>
<div class="palette__shade"></div>
<div class="palette__shade"></div>
<div class="palette__shade"></div>
<div class="palette__shade"></div>
<div class="palette__shade"></div>
<div class="palette__shade"></div>
<h5>Secondary</h5>
</div>
<div class="palette accent1">
<div class="palette__main"></div>
<div class="palette__shade"></div>
<div class="palette__shade"></div>
<div class="palette__shade"></div>
<div class="palette__shade"></div>
<div class="palette__shade"></div>
<div class="palette__shade"></div>
<h5>Accent #1</h5>
</div>
<div class="palette accent2">
<div class="palette__main"></div>
<div class="palette__shade"></div>
<div class="palette__shade"></div>
<div class="palette__shade"></div>
<div class="palette__shade"></div>
<div class="palette__shade"></div>
<div class="palette__shade"></div>
<h5>Accent #2</h5>
</div>
<div class="palette accent3">
<div class="palette__main"></div>
<div class="palette__shade"></div>
<div class="palette__shade"></div>
<div class="palette__shade"></div>
<div class="palette__shade"></div>
<div class="palette__shade"></div>
<div class="palette__shade"></div>
<h5>Accent #3</h5>
</div>
<div class="palette neutrals">
<div class="palette__shade"></div>
<div class="palette__shade"></div>
<div class="palette__shade"></div>
<div class="palette__shade"></div>
<div class="palette__shade"></div>
<div class="palette__shade"></div>
<div class="palette__shade"></div>
<div class="palette__shade"></div>
<h5>Neutrals</h5>
</div>
</section>
<section class="buttons-wrapper">
<h6>Buttons</h6>
<div class="buttons"><a class="button">Default Button</a>
<input class="button hover" type="button" value="Hovered Button"/>
<button class="button active">Active Button</button><a class="button disabled">Disabled Button</a><a class="button secondary">Secondary Button</a><a class="button accent">Other Button</a><a class="button accent2">Other Button</a><a class="button accent3">Another Button</a>
<div><a class="button medium">Medium Button</a><a class="button small">Smol Button</a></div>
</div>
</section>
<section class="links">
<h6>Links</h6>
<div class="links__sec"><a class="link">Sample Link</a><br/><a class="link hover">Hovered Link</a></div>
<div class="links__sec"><a class="link primary">Sample Link</a><br/><a class="link primary hover">Hovered Link</a></div>
<div class="links__sec"><a class="link secondary">Sample Link</a><br/><a class="link secondary hover">Hovered Link</a></div>
</section>
<section class="typography">
<h6>typography</h6>
<div class="font-family">
<div class="font-family-bold">
<h1>Aa</h1>
<h4>Poppins Bold</h4>
</div>
<div class="font-family-medium">
<h1>Aa</h1>
<h4>Poppins Medium</h4>
</div>
<div class="font-family-light">
<h1>Aa</h1>
<h4>Poppins Light</h4>
</div>
</div>
<div class="font-example">
<div class="font-example__headline">
<h6 class="subheader">Headlines</h6>
<h1>h1 headline</h1>
<h2>h2 headline</h2>
<h3>h3 headline</h3>
<h4>h4 headline</h4>
<h5>h5 headline</h5>
<h6>h6 headline</h6>
</div>
<div class="font-example__bodytext">
<h6 class="subheader">Body Text</h6>
<p>I think we need to start from scratch. Jazz it up a little bit- use a funky color like purple.</p>
<p><strong> Can you add a bit of pastel pink and baby blue because the purple alone looks too fancy.</strong></p>
<p><em> Make the purple more well, purple-er. Try a more powerful colour, it needs to be the same, but totally different.</em></p>
</div>
</div>
</section>
<section class="inputs-selects">
<h6>Inputs & Selects</h6>
<div class="inputs">
<div class="input__wrapper">
<label class="label-form">A Normal Input</label>
<input class="input-form" type="text" placeholder="Placeholder"/>
<p class="feedback-form">A message here.</p>
</div>
<div class="input__wrapper">
<label class="label-form">An Active Input</label>
<input class="input-form active" type="text" placeholder="Placeholder" value="Typing Here..."/>
</div>
<div class="input__wrapper">
<label class="label-form">A Disabled Input</label>
<input class="input-form" type="text" placeholder="Placeholder" disabled="disabled"/>
</div>
<div class="input__wrapper">
<label class="label-form">A Normal Select</label>
<select type="text" placeholder="Placeholder">
<option value="1">Option 1</option>
<option value="2">Option 2 </option>
</select>
</div>
</div>
<div class="textarea-select">
<div class="input__wrapper input-success">
<label class="label-form">A Right Input</label>
<div class="input__validator">
<input class="input-form" type="text" placeholder="Placeholder"/>
<div class="input__validator__status"></div>
</div>
<p class="feedback-form">Awesome job.</p>
</div>
<div class="input__wrapper input-error">
<label class="label-form">A Left Input</label>
<div class="input__validator">
<input class="input-form" type="text" placeholder="Placeholder"/>
<div class="input__validator__status"></div>
</div>
<p class="feedback-form">You shall not pass.</p>
</div>
<div class="input__wrapper">
<label class="label-form">Textarea</label>
<textarea type="text" placeholder="Placeholder"></textarea>
</div>
</div>
<div class="toggle-buttons">
<h6 class="subheader">Toggle Buttons</h6>
<div class="checkbox-toggle">
<input id="toggle-checkbox" type="checkbox"/>
<label for="toggle-checkbox"></label>
</div>
<div class="checkbox-toggle">
<input id="toggle-checkbox-1" type="checkbox" checked="checked"/>
<label for="toggle-checkbox-1"></label>
</div>
<div class="checkbox-toggle">
<input id="toggle-checkbox-2" type="checkbox" disabled="disabled"/>
<label for="toggle-checkbox-2"></label>
</div>
</div>
<div class="checkboxes">
<h6 class="subheader">Checkboxes</h6>
<div class="checkbox">
<input id="checkbox-1" type="checkbox"/>
<label for="checkbox-1">Checkbox<span class="box"></span></label>
</div>
<div class="checkbox">
<input id="checkbox-2" type="checkbox" checked="checked"/>
<label for="checkbox-2">Checked Box<span class="box"></span></label>
</div>
</div>
<div class="radio-buttons">
<h6 class="subheader">Radio Buttons</h6>
<div class="radio">
<input id="radio-1" type="radio" name="radio-test" value="1" checked="checked"/>
<label for="radio-1">Radio Button</label>
</div>
<div class="radio">
<input id="radio-2" type="radio" name="radio-test" value="1"/>
<label for="radio-2">Selected Radio Button</label>
</div>
</div>
</section>
<section class="badges">
<h6>Badges</h6><span class="badge status-primary">Received</span><span class="badge status-secondary">Pending</span><span class="badge status-info">Pending</span><span class="badge status-success">Approved</span><span class="badge status-error">Rejected</span>
</section>
<section class="tooltips">
<h6>Tooltips</h6>
<div>
<div class="tooltip top hovered" data-tooltip="Show a helpful tooltip here 😄"> <span>Light Tooltip</span></div>
<div class="tooltip top dark hovered" data-tooltip="Show a helpful tooltip here 😄"> <span>Dark Tooltip</span></div>
<div class="tooltip bottom" data-tooltip="Hello 👋"> <span>Bottom Tooltip</span></div>
</div>
</section>
<section class="alerts">
<h6>Alerts</h6>
<div class="alert status-primary">A normal alert here.</div>
<div class="alert status-secondary">A normal alert here.</div>
<div class="alert status-info">A normal alert here.</div>
<div class="alert status-success">A happy alert here.</div>
<div class="alert status-error">A sad alert here.</div>
</section>
<section class="loading">
<h6>loading indicators</h6>
<div class="spinner-1">
<div class="spinner" data-loading="Loading..."></div>
<label>Please wait...</label>
</div>
<div class="spinner-2">
<div class="spinner" data-loading="Loading..."></div>
<label>Loading...</label>
</div>
</section>
</main>
<footer>
<div class="explanation">Part of the <a href="https://codepen.io/collection/DQvYpQ" target="_blank">CSS Grid collection here</a>.</div>
<div class="social"><a href="https://twitter.com/meowlivia_" target="_blank"><i class="icon-social-twitter icons"></i></a><a href="https://github.com/oliviale" target="_blank"><i class="icon-social-github icons"></i></a><a href="https://dribbble.com/oliviale" target="_blank"><i class="icon-social-dribbble icons"></i></a></div>
</footer>
<script src="./nocsscolorvars.js"></script>
</body>
</html>