Experiments page.
[wolnelektury.git] / src / wolnelektury / static / 2022 / styles / utils / bourbon / library / _buttons.scss
1 @charset "UTF-8";
2
3 ////
4 /// @type list
5 ///
6 /// @require {function} _assign-inputs
7 ///
8 /// @require {variable} $_buttons-list
9 ////
10
11 /// A list of all HTML button elements. Please note that you must interpolate
12 /// the variable (`#{}`) to use it as a selector.
13 ///
14 /// @example scss
15 ///   #{$all-buttons} {
16 ///     background-color: #f00;
17 ///   }
18 ///
19 ///   // CSS Output
20 ///   button,
21 ///   [type='button'],
22 ///   [type='reset'],
23 ///   [type='submit'] {
24 ///     background-color: #f00;
25 ///   }
26
27 $all-buttons: _assign-inputs($_buttons-list);
28
29 /// A list of all HTML button elements with the `:active` pseudo-class applied.
30 /// Please note that you must interpolate the variable (`#{}`) to use it as a
31 /// selector.
32 ///
33 /// @example scss
34 ///   #{$all-buttons-active} {
35 ///     background-color: #00f;
36 ///   }
37 ///
38 ///   // CSS Output
39 ///   button:active,
40 ///   [type='button']:active,
41 ///   [type='reset']:active,
42 ///   [type='submit']:active {
43 ///     background-color: #00f;
44 ///   }
45
46 $all-buttons-active: _assign-inputs($_buttons-list, active);
47
48 /// A list of all HTML button elements with the `:focus` pseudo-class applied.
49 /// Please note that you must interpolate the variable (`#{}`) to use it as a
50 /// selector.
51 ///
52 /// @example scss
53 ///   #{$all-buttons-focus} {
54 ///     background-color: #0f0;
55 ///   }
56 ///
57 ///   // CSS Output
58 ///   button:focus,
59 ///   [type='button']:focus,
60 ///   [type='reset']:focus,
61 ///   [type='submit']:focus {
62 ///     background-color: #0f0;
63 ///   }
64
65 $all-buttons-focus: _assign-inputs($_buttons-list, focus);
66
67 /// A list of all HTML button elements with the `:hover` pseudo-class applied.
68 /// Please note that you must interpolate the variable (`#{}`) to use it as a
69 /// selector.
70 ///
71 /// @example scss
72 ///   #{$all-buttons-hover} {
73 ///     background-color: #0f0;
74 ///   }
75 ///
76 ///   // CSS Output
77 ///   button:hover,
78 ///   [type='button']:hover,
79 ///   [type='reset']:hover,
80 ///   [type='submit']:hover {
81 ///     background-color: #0f0;
82 ///   }
83
84 $all-buttons-hover: _assign-inputs($_buttons-list, hover);