this repo has no description
styling crc card: better shadow, better inputs
+29
-6
+25
src/assets/base.scss
+25
src/assets/base.scss
···
20
20
--vt-c-text-light-2: rgba(60, 60, 60, 0.66);
21
21
--vt-c-text-dark-1: var(--vt-c-white);
22
22
--vt-c-text-dark-2: rgba(235, 235, 235, 0.9);
23
+
24
+
--shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px,
25
+
rgba(0, 0, 0, 0.16) 0px 2px 4px,
26
+
rgba(0, 0, 0, 0.12) 0px 4px 8px,
27
+
rgba(0, 0, 0, 0.08) 0px 8px 16px,
28
+
rgba(0, 0, 0, 0.07) 0px 16px 32px;
23
29
}
24
30
25
31
/* semantic color variables for this project */
···
102
108
103
109
h1 {
104
110
font-size: 1.8em;
111
+
font-weight: bold;
105
112
}
106
113
107
114
h2 {
···
138
145
width: 100%;
139
146
height: 500px;
140
147
max-height: 35vh;
148
+
}
149
+
150
+
input {
151
+
box-shadow: inset 0 .0625em .125em rgba(10, 10, 10, .05);
152
+
max-width: 100%;
153
+
154
+
background-color: #fff;
155
+
border-color: #dbdbdb;
156
+
border-radius: .375em;
157
+
color: #363636;
158
+
border: 1px solid transparent;
159
+
align-items: center;
160
+
display: inline-flex;
161
+
height: 2rem;
162
+
justify-content: flex-start;
163
+
line-height: 1.5;
164
+
margin: 0;
165
+
padding: 0 0.5rem;
141
166
}
+4
-6
src/components/architecture/crc-card.vue
+4
-6
src/components/architecture/crc-card.vue
···
142
142
<style scoped lang="scss">
143
143
.crc-card {
144
144
min-height: 200px;
145
-
background-color: #561b00;
145
+
background-color: var(--vt-c-black-mute);
146
146
padding: 1rem;
147
147
margin: 1rem 0;
148
148
border-radius: 0.3em;
149
149
font-family: var(--code-font-family);
150
+
box-shadow: var(--shadow);
150
151
151
152
hr {
152
153
margin-bottom: 1rem;
···
164
165
165
166
.responsabilities {
166
167
hr {
167
-
margin: 0 1rem;
168
+
margin-right: 1rem;
168
169
}
169
170
}
170
171
···
179
180
}
180
181
181
182
input.component-name {
182
-
background-color: rgb(76, 71, 71);
183
-
padding: 0 0.5rem;
184
-
border-radius: 0.5rem;
185
-
color: white;
183
+
margin-bottom: 0.5rem;
186
184
}
187
185
</style>