Skip to content

Commit 69ce338

Browse files
bencodezenbencodezen
authored
feat (#86): update custom containers (#120)
* feature (#86): update custom container styles * refactor (#86): remove icons from containers except for danger * feature: update styles and icons on custom containers * fix: standardize text color
1 parent a206ac7 commit 69ce338

File tree

5 files changed

+192
-95
lines changed

5 files changed

+192
-95
lines changed

‎src/.vuepress/public/images/icons/bulb.svg

+10
Loading

‎src/.vuepress/public/images/icons/danger.svg

+13
Loading

‎src/.vuepress/public/images/icons/info.svg

+11
Loading

‎src/.vuepress/public/images/icons/stop.svg

+10
Loading

‎src/.vuepress/styles/index.styl

+148-95
Original file line numberDiff line numberDiff line change
@@ -1,99 +1,152 @@
1-
.demo
2-
font-family sans-serif
3-
border 1px solid #eee
4-
border-radius 2px
5-
padding 20px 30px
6-
margin-top 1em
7-
margin-bottom 40px
8-
user-select none
9-
overflow-x auto
10-
11-
.custom-block
12-
padding 0.1rem 1.5rem
13-
margin 2em 0
14-
border-left-width 0.5rem
15-
border-left-style solid
16-
background-color #f8f8f8
17-
position relative
18-
border-bottom-right-radius 2px
19-
border-top-right-radius 2px
20-
margin 1rem 0
21-
22-
&::before
23-
position absolute
24-
top 14px
25-
left -14px
26-
color #fff
27-
width 20px
28-
height 20px
29-
border-radius 100%
30-
text-align center
31-
line-height 20px
32-
font-weight bold
33-
font-family 'Dosis', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif
34-
font-size 14px
35-
36-
.custom-block-title
37-
font-weight 600
38-
margin-bottom -0.4rem
39-
40-
&.info
41-
border-color #007bff
42-
43-
&.tip
44-
border-color #42b983
45-
46-
&.warning
47-
border-color #dcbc1e
48-
background-color #f8f8f8
49-
50-
&.danger
51-
border-color #f66
52-
background-color #f8f8f8
53-
54-
&::before
55-
content '!'
56-
background-color #f66
57-
58-
&.details
59-
display block
60-
position relative
61-
border-radius 2px
62-
margin 1.6em 0
63-
padding 1.6em
64-
background-color #eee
65-
66-
h4
67-
margin-top 0
1+
.demo {
2+
font-family: sans-serif;
3+
border: 1px solid #eee;
4+
border-radius: 2px;
5+
padding: 20px 30px;
6+
margin-top: 1em;
7+
margin-bottom: 40px;
8+
user-select: none;
9+
overflow-x: auto;
10+
}
6811

69-
figure,
70-
p
71-
&:last-child
72-
margin-bottom 0
73-
padding-bottom 0
12+
.custom-block {
13+
padding: 0.1rem 1.5rem;
14+
margin: 2em 0;
15+
border-left-width: 0.5rem;
16+
border-left-style: solid;
17+
position: relative;
18+
border-bottom-right-radius: 2px;
19+
border-top-right-radius: 2px;
20+
max-width: 80%;
21+
margin: 1rem 0;
22+
23+
&::before {
24+
position: absolute;
25+
top: 14px;
26+
left: -14px;
27+
color: #fff;
28+
width: 20px;
29+
height: 20px;
30+
border-radius: 100%;
31+
text-align: center;
32+
line-height: 20px;
33+
font-weight: bold;
34+
font-family: 'Dosis', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
35+
font-size: 14px;
36+
}
37+
38+
p {
39+
color: #222;
40+
}
41+
42+
.custom-block-title {
43+
font-weight: 600;
44+
margin-bottom: -0.4rem;
45+
}
46+
47+
&.info {
48+
border-color: #007bff;
49+
background-color: #f8f8f8;
50+
51+
&::before {
52+
content: url('/images/icons/info.svg');
53+
width: 25px;
54+
height: 25px;
55+
left: -16px;
56+
box-sizing: border-box;
57+
}
58+
}
59+
60+
&.tip {
61+
border-color: #42b983;
62+
background-color: #f8f8f8;
63+
64+
&::before {
65+
content: url('/images/icons/bulb.svg');
66+
width: 25px;
67+
height: 25px;
68+
left: -16px;
69+
}
70+
}
71+
72+
&.warning {
73+
border-color: #f4cd00;
74+
background-color: #f8f8f8;
7475

75-
summary
76-
outline none
77-
cursor pointer
76+
.custom-block-title {
77+
color: #222;
78+
}
79+
80+
&::before {
81+
content: url('/images/icons/danger.svg');
82+
width: 25px;
83+
height: 25px;
84+
left: -16px;
85+
box-sizing: border-box;
86+
}
87+
}
88+
89+
&.danger {
90+
border-color: #f66;
91+
background-color: #f8f8f8;
92+
93+
.custom-block-title {
94+
color: #222;
95+
}
96+
97+
&::before {
98+
content: url('/images/icons/stop.svg');
99+
width: 25px;
100+
height: 25px;
101+
left: -16px;
102+
}
103+
}
104+
105+
&.details {
106+
display: block;
107+
position: relative;
108+
border-radius: 2px;
109+
margin: 1.6em 0;
110+
padding: 1.6em;
111+
background-color: #eee;
112+
h4 {
113+
margin-top: 0;
114+
}
115+
figure,
116+
p {
117+
&:last-child {
118+
margin-bottom: 0;
119+
padding-bottom: 0;
120+
}
121+
}
122+
summary {
123+
outline: none;
124+
cursor: pointer;
125+
}
126+
}
127+
}
78128

79129
.scrimba,
80-
.vueschool
81-
background-color #e7ecf3
82-
padding 1em 1.25em
83-
border-radius 2px
84-
color #486491
85-
position relative
86-
margin 24px 0
87-
88-
a
89-
color: #486491
90-
position relative
91-
padding-left 16px
92-
93-
&::before
94-
content "\f144"
95-
font-family 'Font Awesome 5 Free'
96-
font-size 2em
97-
display inline-block
98-
color #73abfe
99-
vertical-align middle
130+
.vueschool {
131+
background-color: #e7ecf3;
132+
padding: 1em 1.25em;
133+
border-radius: 2px;
134+
color: #486491;
135+
position: relative;
136+
margin: 24px 0;
137+
138+
a {
139+
color: #486491;
140+
position: relative;
141+
padding-left :16px;
142+
}
143+
144+
&::before {
145+
content: "\f144";
146+
font-family: 'Font Awesome 5 Free';
147+
font-size: 2em;
148+
display: inline-block;
149+
color: #73abfe;
150+
vertical-align: middle;
151+
}
152+
}

0 commit comments

Comments
 (0)