1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 | #themes {
|
7 | button.theme-switcher {
|
8 | &:first-of-type {
|
9 | --font-weight: bold;
|
10 | }
|
11 |
|
12 | i {
|
13 | font-style: normal;
|
14 | }
|
15 | }
|
16 | }
|
17 |
|
18 |
|
19 | #customization {
|
20 | figure {
|
21 | display: grid;
|
22 | grid-template-rows: repeat(2, 1fr);
|
23 | grid-template-columns: repeat(9, 1fr);
|
24 | margin-bottom: 0;
|
25 | overflow: hidden;
|
26 |
|
27 | @media (min-width: map-get($breakpoints, "sm")) {
|
28 | grid-template-rows: 1fr;
|
29 | grid-template-columns: repeat(18, 1fr);
|
30 | border-top-right-radius: var(--border-radius);
|
31 | border-top-left-radius: var(--border-radius);
|
32 | }
|
33 |
|
34 | ~ article {
|
35 | margin-top: 0;
|
36 | border-top-right-radius: 0;
|
37 | border-top-left-radius: 0;
|
38 | }
|
39 |
|
40 | button {
|
41 | margin-bottom: 0;
|
42 | padding: 0;
|
43 | padding-top: 100%;
|
44 | border: none;
|
45 | border-radius: 0;
|
46 |
|
47 | &:focus {
|
48 | box-shadow: none;
|
49 | }
|
50 |
|
51 | &.picked {
|
52 | background-image: var(--icon-check);
|
53 | background-position: center;
|
54 | background-size: 0.66rem auto;
|
55 | background-repeat: no-repeat;
|
56 | box-shadow: inset 0 0 1rem 0 rgba(0, 0, 0, 0.25);
|
57 | }
|
58 | &[data-color="lime"],
|
59 | &[data-color="yellow"],
|
60 | &[data-color="amber"] {
|
61 | &.picked {
|
62 | background-image: var(--icon-check-dark);
|
63 | }
|
64 | }
|
65 | }
|
66 | }
|
67 |
|
68 | h4 {
|
69 | transition: color var(--transition);
|
70 | }
|
71 |
|
72 | pre[data-theme="generated"] {
|
73 | border-color: var(--primary);
|
74 | }
|
75 | }
|
76 |
|
77 |
|
78 | #grid {
|
79 | --grid-spacing-vertical: 1rem;
|
80 |
|
81 | button {
|
82 | display: block;
|
83 | width: 100%;
|
84 | margin-bottom: var(--spacing);
|
85 |
|
86 | @media (min-width: map-get($breakpoints, "sm")) {
|
87 | display: inline-block;
|
88 | width: auto;
|
89 | margin-right: 0.5rem;
|
90 | }
|
91 |
|
92 | svg {
|
93 | stroke: var(--secondary);
|
94 | margin-right: 0.5rem;
|
95 | border: 2px solid currentColor;
|
96 | border-radius: 1rem;
|
97 | background: currentColor;
|
98 | }
|
99 | }
|
100 |
|
101 | .grid {
|
102 | > * {
|
103 | padding: calc(var(--spacing) / 2) 0;
|
104 | border-radius: var(--border-radius);
|
105 | background: var(--code-background-color);
|
106 | font-size: 87.5%;
|
107 | text-align: center;
|
108 | }
|
109 | }
|
110 |
|
111 | details {
|
112 | margin-top: calc(var(--typography-spacing-vertical) * 2);
|
113 |
|
114 | svg {
|
115 | vertical-align: bottom;
|
116 | }
|
117 | }
|
118 | }
|
119 |
|
120 |
|
121 | #buttons {
|
122 | a[role="button"] {
|
123 | margin-right: calc(var(--spacing) * 0.5);
|
124 | }
|
125 | }
|
126 |
|
127 |
|
128 | #forms div.grid {
|
129 | grid-row-gap: 0;
|
130 | }
|
131 |
|
132 |
|
133 | #modal {
|
134 | button {
|
135 | --font-weight: bold;
|
136 | }
|
137 | }
|