Skip to content

Commit 473fb3e

Browse files
bencodezenbencodezen
committed
feature (#86): update custom container styles
1 parent a206ac7 commit 473fb3e

File tree

1 file changed

+112
-85
lines changed

1 file changed

+112
-85
lines changed

‎src/.vuepress/styles/index.styl

Lines changed: 112 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -1,99 +1,126 @@
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
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+
}
1011

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
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+
background-color: #f8f8f8;
18+
position: relative;
19+
border-bottom-right-radius: 2px;
20+
border-top-right-radius: 2px;
21+
max-width: 80%;
22+
margin: 1rem 0;
2123

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
24+
&::before {
25+
position: absolute;
26+
top: 14px;
27+
left: -14px;
28+
color: #fff;
29+
width: 20px;
30+
height: 20px;
31+
border-radius: 100%;
32+
text-align: center;
33+
line-height: 20px;
34+
font-weight: bold;
35+
font-family: 'Dosis', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
36+
font-size: 14px;
37+
}
3538

36-
.custom-block-title
37-
font-weight 600
38-
margin-bottom -0.4rem
39+
.custom-block-title {
40+
font-weight: 600;
41+
margin-bottom: -0.4rem;
42+
}
43+
&.info {
44+
border-color: #007bff;
3945

40-
&.info
41-
border-color #007bff
46+
&::before {
47+
content: 'i';
48+
background-color: #007bff;
49+
}
50+
}
51+
&.tip {
52+
border-color: #42b983;
4253

43-
&.tip
44-
border-color #42b983
54+
&::before {
55+
content: '✓';
56+
background-color: #42b983;
57+
}
58+
}
59+
&.warning {
60+
border-color: #dcbc1e;
61+
background-color: #f8f8f8;
4562

46-
&.warning
47-
border-color #dcbc1e
48-
background-color #f8f8f8
4963

50-
&.danger
51-
border-color #f66
52-
background-color #f8f8f8
64+
&::before {
65+
content: '⚠';
66+
background-color: #dcbc1e;
67+
}
68+
}
69+
&.danger {
70+
border-color: #f66;
71+
background-color: #f8f8f8;
5372

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
6873

74+
&::before {
75+
content: '!';
76+
background-color: #f66;
77+
}
78+
}
79+
&.details {
80+
display: block;
81+
position: relative;
82+
border-radius: 2px;
83+
margin: 1.6em 0;
84+
padding: 1.6em;
85+
background-color: #eee;
86+
h4 {
87+
margin-top: 0;
88+
}
6989
figure,
70-
p
71-
&:last-child
72-
margin-bottom 0
73-
padding-bottom 0
74-
75-
summary
76-
outline none
77-
cursor pointer
90+
p {
91+
&:last-child {
92+
margin-bottom: 0;
93+
padding-bottom: 0;
94+
}
95+
}
96+
summary {
97+
outline: none;
98+
cursor: pointer;
99+
}
100+
}
101+
}
78102

79103
.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
104+
.vueschool {
105+
background-color: #e7ecf3;
106+
padding: 1em 1.25em;
107+
border-radius: 2px;
108+
color: #486491;
109+
position: relative;
110+
margin: 24px 0;
87111

88-
a
89-
color: #486491
90-
position relative
91-
padding-left 16px
112+
a {
113+
color: #486491;
114+
position: relative;
115+
padding-left :16px;
116+
}
92117

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
118+
&::before {
119+
content: "\f144";
120+
font-family: 'Font Awesome 5 Free';
121+
font-size: 2em;
122+
display: inline-block;
123+
color: #73abfe;
124+
vertical-align: middle;
125+
}
126+
}

0 commit comments

Comments
 (0)