source: css/mini/_contextual.scss@ 5c9a606

Last change on this file since 5c9a606 was 5c9a606, checked in by w96k <w96k.ru@…>, on May 5, 2019 at 2:16:42 AM

Delete Hugo; Add basic haunt blog
  • Property mode set to 100644
File size: 15.0 KB
Line 
1/*
2 Definitions for contextual background elements, toasts and tooltips.
3*/
4$mark-back-color: #0277bd !default; // Background color for <mark>
5$mark-fore-color: #fafafa !default; // Text color for <mark>
6$mark-font-size: 0.95em !default; // Font size for <mark>
7$mark-line-height: 1em !default; // Line height for <mark>
8$mark-inline-block-name: 'inline-block' !default;// Class name for inline-block <mark>
9$_include-toast: true !default; // [Hidden] Should toasts be included? (boolean)
10$toast-name: 'toast' !default; // Class name for toast component
11$toast-back-color: #424242 !default; // Background color for toast component
12$toast-fore-color: #fafafa !default; // Text color for toast component
13$_include-tooltip: true !default; // [Hidden] Should tooltips be included? (boolean)
14$tooltip-name: 'tooltip' !default; // Class name for tooltip component
15$tooltip-bottom-name: 'bottom' !default; // Bottom tooltip class name
16$tooltip-back-color: #212121 !default; // Background color for tooltip component
17$tooltip-fore-color: #fafafa !default; // Text color for tooltip component
18$_include-modal: true !default; // [Hidden] Should modal dialogs be included? (boolean)
19$modal-name: 'modal' !default; // Class name for modal dialog component
20$modal-overlay-color: rgba(0, 0, 0, 0.45) !default; // Overlay color for modal dialog component
21$modal-close-name: 'modal-close' !default;// Class name for modal dialog close button
22$modal-close-color: #444 !default; // Text color for the close button of the modal dialog component
23$modal-close-hover-back-color: #f0f0f0 !default; // Background color for the close button of the modal dialog component (on hover/focus)
24$modal-close-size: 1.75rem !default; // Font size for the close button of the modal dialog component
25$_include-collapse: true !default; // [Hidden] Should collapse components be included? (boolean)
26$collapse-name: 'collapse' !default; // Class name for collapse component
27$collapse-label-height: 1.5rem !default; // Height for the labels in the collapse component
28$collapse-content-max-height: 400px !default; // Max height for the content panes in the collapse component
29$collapse-label-back-color: #e8e8e8 !default;// Background color for labels in the collapse component
30$collapse-label-fore-color: #212121 !default;// Text color for labels in the collapse component
31$collapse-label-hover-back-color:#f0f0f0 !default;// Background color for labels in the collapse component (hover)
32$collapse-selected-label-back-color:#ececec !default;// Background color for selected labels in the collapse component
33$collapse-border-color: #ddd !default; // Border color for collapse component
34$collapse-selected-label-border-color: #0277bd !default; // Border color for collapse component's selected labels
35$collapse-content-back-color: #fafafa !default; // Background color for collapse component's content panes
36// CSS variable name definitions [exercise caution if modifying these]
37$mark-back-color-var: '--mark-back-color' !default;
38$mark-fore-color-var: '--mark-fore-color' !default;
39$toast-back-color-var: '--toast-back-color' !default;
40$toast-fore-color-var: '--toast-fore-color' !default;
41$tooltip-back-color-var: '--tooltip-back-color' !default;
42$tooltip-fore-color-var: '--tooltip-fore-color' !default;
43$modal-overlay-color-var: '--modal-overlay-color' !default;
44$modal-close-color-var: '--modal-close-color' !default;
45$modal-close-hover-back-color-var: '--modal-close-hover-color' !default;
46$collapse-label-back-color-var: '--collapse-label-back-color' !default;
47$collapse-label-fore-color-var: '--collapse-label-fore-color' !default;
48$collapse-label-hover-back-color-var: '--collapse-label-hover-back-color' !default;
49$collapse-selected-label-back-color-var: '--collapse-selected-label-back-color' !default;
50$collapse-border-color-var: '--collapse-border-color' !default;
51$collapse-content-back-color-var: '--collapse-content-back-color' !default;
52$collapse-selected-label-border-color-var: '--collapse-selected-label-border-color' !default;
53// == Uncomment below code if this module is used on its own ==
54//
55// $base-line-height: 1.5 !default; // Line height for most elements
56// $universal-margin: 0.5rem !default; // Universal margin for the most elements
57// $universal-padding: 0.5rem !default; // Universal padding for the most elements
58// $universal-border-radius: 0.125rem !default; // Universal border-radius for most elements
59// $universal-box-shadow: none !default; // Universal box-shadow for most elements
60// $universal-margin-var: '--universal-margin' !default;
61// $universal-padding-var: '--universal-padding' !default;
62// $universal-border-radius-var: '--universal-border-radius' !default;
63// $universal-box-shadow-var: '--universal-box-shadow' !default;
64// :root {
65// #{$universal-margin-var}: $universal-margin;
66// #{$universal-padding-var}: $universal-padding;
67// #{$universal-border-radius-var}: $universal-border-radius;
68// @if $universal-box-shadow != none {
69// #{$universal-box-shadow-var}: $universal-box-shadow;
70// }
71// }
72//
73// ============================================================
74// Check the `_contextual_mixins.scss` file to find this module's mixins.
75@import '_contextual_mixins';
76/* Contextual module CSS variable definitions */
77:root {
78 #{$mark-back-color-var}: $mark-back-color;
79 #{$mark-fore-color-var}: $mark-fore-color;
80}
81// Default styling for mark. Use mixins for alternate styles.
82mark {
83 background: var(#{$mark-back-color-var});
84 color: var(#{$mark-fore-color-var});
85 font-size: $mark-font-size;
86 line-height: $mark-line-height;
87 border-radius: var(#{$universal-border-radius-var});
88 padding: calc(var(#{$universal-padding-var}) / 4) calc(var(#{$universal-padding-var}) / 2);
89 @if $universal-box-shadow != none {
90 box-shadow: var(#{$universal-box-shadow-var});
91 }
92 &.#{$mark-inline-block-name} {
93 display: inline-block;
94 // This is hardcoded, as we want inline-block <mark> elements to be styled as normal pieces of text, instead of look small and weird.
95 font-size: 1em;
96 // Line height is reset to the normal line-height from `core`. Also hardcoded for same reasons.
97 line-height: $base-line-height;
98 padding: calc(var(#{$universal-padding-var}) / 2) var(#{$universal-padding-var});
99 }
100}
101// Styling for toasts. - No border styling, I think it's unnecessary anyways.
102@if $_include-toast {
103 :root {
104 #{$toast-back-color-var}: $toast-back-color;
105 #{$toast-fore-color-var}: $toast-fore-color;
106 }
107 .#{$toast-name} {
108 position: fixed;
109 bottom: calc(var(#{$universal-margin-var}) * 3);
110 left: 50%;
111 transform: translate(-50%, -50%);
112 z-index: 1111;
113 color: var(#{$toast-fore-color-var});
114 background: var(#{$toast-back-color-var});
115 border-radius: calc(var(#{$universal-border-radius-var}) * 16);
116 padding: var(#{$universal-padding-var}) calc(var(#{$universal-padding-var}) * 3);
117 @if $universal-box-shadow != none {
118 box-shadow: var(#{$universal-box-shadow-var});
119 }
120 }
121}
122// Styling for tooltips.
123@if $_include-tooltip {
124 :root {
125 #{$tooltip-back-color-var}: $tooltip-back-color;
126 #{$tooltip-fore-color-var}: $tooltip-fore-color;
127 }
128 .#{$tooltip-name} {
129 position: relative;
130 display: inline-block;
131 &:before, &:after {
132 position: absolute;
133 opacity: 0;
134 clip: rect(0 0 0 0);
135 -webkit-clip-path: inset(100%);
136 clip-path: inset(100%);
137 transition: all 0.3s;
138 // Remember to keep this index a lower value than the one used for stickies.
139 z-index: 1010; // Deals with certain problems when combined with cards and tables.
140 left: 50%;
141 }
142 &:not(.#{$tooltip-bottom-name}):before, &:not(.#{$tooltip-bottom-name}):after { // Top (default) tooltip styling
143 bottom: 75%;
144 }
145 &.#{$tooltip-bottom-name}:before, &.#{$tooltip-bottom-name}:after { // Bottom tooltip styling
146 top: 75%;
147 }
148 &:hover, &:focus {
149 &:before, &:after {
150 opacity: 1;
151 clip: auto;
152 -webkit-clip-path: inset(0%);
153 clip-path: inset(0%);
154 }
155 }
156 &:before { // This is the little tooltip triangle
157 content: '';
158 background: transparent;
159 border: var(#{$universal-margin-var}) solid transparent;
160 // Newer browsers will center the tail properly
161 left: calc(50% - var(#{$universal-margin-var}));
162 }
163 &:not(.#{$tooltip-bottom-name}):before { // Top (default) tooltip styling
164 border-top-color: $tooltip-back-color;
165 }
166 &.#{$tooltip-bottom-name}:before { // Bottom tooltip styling
167 border-bottom-color: $tooltip-back-color;
168 }
169 &:after { // This is the actual tooltip's text block
170 content: attr(aria-label);
171 color: var(#{$tooltip-fore-color-var});
172 background: var(#{$tooltip-back-color-var});
173 border-radius: var(#{$universal-border-radius-var});
174 padding: var(#{$universal-padding-var});
175 @if $universal-box-shadow != none {
176 box-shadow: var(#{$universal-box-shadow-var});
177 }
178 white-space: nowrap;
179 transform: translateX(-50%);
180 }
181 &:not(.#{$tooltip-bottom-name}):after { // Top (default) tooltip styling
182 margin-bottom: calc(2 * var(#{$universal-margin-var}));
183 }
184 &.#{$tooltip-bottom-name}:after { // Bottom tooltip styling
185 margin-top: calc(2 * var(#{$universal-margin-var}));
186 }
187 }
188}
189// Styling for modal dialogs.
190@if $_include-modal {
191 :root {
192 #{$modal-overlay-color-var}: $modal-overlay-color;
193 #{$modal-close-color-var}: $modal-close-color;
194 #{$modal-close-hover-back-color-var}: $modal-close-hover-back-color;
195 }
196 [type="checkbox"].#{$modal-name} {
197 height: 1px;
198 width: 1px;
199 margin: -1px;
200 overflow: hidden;
201 position: absolute;
202 clip: rect(0 0 0 0);
203 -webkit-clip-path: inset(100%);
204 clip-path: inset(100%);
205 & + div {
206 position: fixed;
207 top: 0;
208 left: 0;
209 display: none;
210 width: 100vw;
211 height: 100vh;
212 background: var(#{$modal-overlay-color-var});
213 & .card {
214 margin: 0 auto;
215 max-height: 50vh;
216 overflow: auto;
217 & .#{$modal-close-name} {
218 position: absolute;
219 top: 0;
220 right: 0;
221 width: $modal-close-size;
222 height: $modal-close-size;
223 border-radius: var(#{$universal-border-radius-var});
224 padding: var(#{$universal-padding-var});
225 margin: 0;
226 cursor: pointer;
227 transition: background 0.3s;
228 &:before {
229 display: block;
230 content: '\00D7';
231 color: var(#{$modal-close-color-var});
232 position: relative;
233 font-family: sans-serif;
234 font-size: $modal-close-size;
235 line-height: 1;
236 text-align: center;
237 }
238 &:hover, &:focus {
239 background: var(#{$modal-close-hover-back-color-var});
240 }
241 }
242 }
243 }
244 &:checked + div {
245 display: flex;
246 flex: 0 1 auto;
247 z-index: 1200;
248 & .card {
249 & .#{$modal-close-name} {
250 z-index: 1211;
251 }
252 }
253 }
254 }
255}
256// Styling for collapse.
257@if $_include-collapse {
258 :root {
259 #{$collapse-label-back-color-var}: $collapse-label-back-color;
260 #{$collapse-label-fore-color-var}: $collapse-label-fore-color;
261 #{$collapse-label-hover-back-color-var}: $collapse-label-hover-back-color;
262 #{$collapse-selected-label-back-color-var}: $collapse-selected-label-back-color;
263 #{$collapse-border-color-var}: $collapse-border-color;
264 #{$collapse-content-back-color-var} : $collapse-content-back-color;
265 #{$collapse-selected-label-border-color-var}: $collapse-selected-label-border-color;
266 }
267 .#{$collapse-name} {
268 width: calc(100% - 2 * var(#{$universal-margin-var}));
269 opacity: 1;
270 display: flex;
271 flex-direction: column;
272 margin: var(#{$universal-margin-var});
273 border-radius: var(#{$universal-border-radius-var});
274 @if $universal-box-shadow != none {
275 box-shadow: var(#{$universal-box-shadow-var});
276 }
277 & > [type="radio"], & > [type="checkbox"] {
278 height: 1px;
279 width: 1px;
280 margin: -1px;
281 overflow: hidden;
282 position: absolute;
283 clip: rect(0 0 0 0);
284 -webkit-clip-path: inset(100%);
285 clip-path: inset(100%);
286 }
287 & > label {
288 flex-grow: 1;
289 display: inline-block;
290 height: $collapse-label-height;
291 cursor: pointer;
292 transition: background 0.3s;
293 color: var(#{$collapse-label-fore-color-var});
294 background: var(#{$collapse-label-back-color-var});
295 border: $__1px solid var(#{$collapse-border-color-var});
296 padding: calc(1.5 * var(#{$universal-padding-var}));
297 &:hover, &:focus {
298 background: var(#{$collapse-label-hover-back-color-var});
299 }
300 + div {
301 flex-basis: auto;
302 height: 1px;
303 width: 1px;
304 margin: -1px;
305 overflow: hidden;
306 position: absolute;
307 clip: rect(0 0 0 0);
308 -webkit-clip-path: inset(100%);
309 clip-path: inset(100%);
310 transition: max-height 0.3s;
311 max-height: 1px; // for transition
312 }
313 }
314 > :checked + label {
315 background: var(#{$collapse-selected-label-back-color-var});
316 // border: 0.0625rem solid #bdbdbd; // var it
317 border-bottom-color: var(#{$collapse-selected-label-border-color-var});
318 & + div {
319 box-sizing: border-box;
320 position: relative;
321 width: 100%;
322 height: auto;
323 overflow: auto;
324 margin: 0;
325 background: var(#{$collapse-content-back-color-var});
326 border: $__1px solid var(#{$collapse-border-color-var});
327 border-top: 0;
328 padding: var(#{$universal-padding-var});
329 clip: auto;
330 -webkit-clip-path: inset(0%);
331 clip-path: inset(0%);
332 max-height: $collapse-content-max-height;
333 }
334 }
335 & > label:not(:first-of-type) { // Keep these down here, as it overrides some other styles.
336 border-top: 0;
337 }
338 & > label:first-of-type {
339 border-radius: var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var}) 0 0;
340 }
341 & > label:last-of-type:not(:first-of-type) {
342 border-radius: 0 0 var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var});
343 }
344 & > label:last-of-type:first-of-type {
345 border-radius: var(#{$universal-border-radius-var});
346 }
347 & > :checked:last-of-type:not(:first-of-type) + label {
348 border-radius: 0;
349 }
350 & > :checked:last-of-type + label + div {
351 border-radius: 0 0 var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var});
352 }
353 }
354}
Note: See TracBrowser for help on using the repository browser.