1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 | #themes {
|
9 | button i {
|
10 | font-style: normal;
|
11 | }
|
12 | }
|
13 |
|
14 |
|
15 |
|
16 |
|
17 | #customization {
|
18 |
|
19 | figure {
|
20 | display: grid;
|
21 | grid-template-columns: repeat(9, 1fr);
|
22 | grid-template-rows: repeat(2, 1fr);
|
23 | margin-bottom: 0;
|
24 | overflow: hidden;
|
25 |
|
26 | @media (min-width: map-get($breakpoints, "sm")) {
|
27 | grid-template-columns: repeat(18, 1fr);
|
28 | grid-template-rows: 1fr;
|
29 | border-top-right-radius: $round;
|
30 | border-top-left-radius: $round;
|
31 | }
|
32 |
|
33 | ~ article {
|
34 | margin-top: 0;
|
35 | border-top-right-radius: 0;
|
36 | border-top-left-radius: 0;
|
37 | }
|
38 |
|
39 | button {
|
40 | margin-bottom: 0;
|
41 | padding: 0;
|
42 | padding-top: 100%;
|
43 | border:none;
|
44 | border-radius: 0;
|
45 |
|
46 | &:focus {
|
47 | box-shadow: none;
|
48 | }
|
49 |
|
50 | &.picked {
|
51 |
|
52 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
53 | background-position: center;
|
54 | background-repeat: no-repeat;
|
55 | background-size: .66rem auto;
|
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 |
|
63 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232c4049' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
64 | }
|
65 | }
|
66 | }
|
67 | }
|
68 |
|
69 | h4 {
|
70 | transition: color $transition;
|
71 | }
|
72 |
|
73 | pre[data-theme="generated"] {
|
74 | border-color: var(--primary);
|
75 | }
|
76 | }
|
77 |
|
78 |
|
79 |
|
80 |
|
81 |
|
82 | #grids {
|
83 |
|
84 | button {
|
85 | display: block;
|
86 | width: 100%;
|
87 | margin-bottom: $spacing-typography/2;
|
88 |
|
89 | @media (min-width: map-get($breakpoints, "sm")) {
|
90 | display: inline-block;
|
91 | width: auto;
|
92 | margin-right: .5rem;
|
93 | }
|
94 |
|
95 | svg {
|
96 | stroke: var(--secondary);
|
97 | margin-right: .5rem;
|
98 | border: 3px solid currentColor;
|
99 | border-radius: 1rem;
|
100 | background: currentColor;
|
101 | }
|
102 | }
|
103 |
|
104 | .grid > * {
|
105 | padding: ($spacing-gutter/2) 0;
|
106 | background: var(--code-background);
|
107 | text-align: center;
|
108 | }
|
109 |
|
110 | details {
|
111 | margin-top: $spacing-typography*2;
|
112 | }
|
113 | }
|
114 |
|
115 |
|
116 |
|
117 |
|
118 | #forms div.grid {
|
119 | grid-row-gap: 0;
|
120 | }
|