Skip to content

feat (#86): update custom containers #120

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Jul 7, 2020
Merged

feat (#86): update custom containers #120

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
473fb3e
feature (#86): update custom container styles
bencodezen May 9, 2020
c0f3718
refactor (#86): remove icons from containers except for danger
bencodezen May 12, 2020
c20f3c5
feature: update styles and icons on custom containers
bencodezen Jun 20, 2020
c5757d4
fix: standardize text color
bencodezen Jul 7, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions src/.vuepress/public/images/icons/bulb.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
13 changes: 13 additions & 0 deletions src/.vuepress/public/images/icons/danger.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
11 changes: 11 additions & 0 deletions src/.vuepress/public/images/icons/info.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 10 additions & 0 deletions src/.vuepress/public/images/icons/stop.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
243 changes: 148 additions & 95 deletions src/.vuepress/styles/index.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,99 +1,152 @@
.demo
font-family sans-serif
border 1px solid #eee
border-radius 2px
padding 20px 30px
margin-top 1em
margin-bottom 40px
user-select none
overflow-x auto

.custom-block
padding 0.1rem 1.5rem
margin 2em 0
border-left-width 0.5rem
border-left-style solid
background-color #f8f8f8
position relative
border-bottom-right-radius 2px
border-top-right-radius 2px
margin 1rem 0

&::before
position absolute
top 14px
left -14px
color #fff
width 20px
height 20px
border-radius 100%
text-align center
line-height 20px
font-weight bold
font-family 'Dosis', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif
font-size 14px

.custom-block-title
font-weight 600
margin-bottom -0.4rem

&.info
border-color #007bff

&.tip
border-color #42b983

&.warning
border-color #dcbc1e
background-color #f8f8f8

&.danger
border-color #f66
background-color #f8f8f8

&::before
content '!'
background-color #f66

&.details
display block
position relative
border-radius 2px
margin 1.6em 0
padding 1.6em
background-color #eee

h4
margin-top 0
.demo {
font-family: sans-serif;
border: 1px solid #eee;
border-radius: 2px;
padding: 20px 30px;
margin-top: 1em;
margin-bottom: 40px;
user-select: none;
overflow-x: auto;
}

figure,
p
&:last-child
margin-bottom 0
padding-bottom 0
.custom-block {
padding: 0.1rem 1.5rem;
margin: 2em 0;
border-left-width: 0.5rem;
border-left-style: solid;
position: relative;
border-bottom-right-radius: 2px;
border-top-right-radius: 2px;
max-width: 80%;
margin: 1rem 0;

&::before {
position: absolute;
top: 14px;
left: -14px;
color: #fff;
width: 20px;
height: 20px;
border-radius: 100%;
text-align: center;
line-height: 20px;
font-weight: bold;
font-family: 'Dosis', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
font-size: 14px;
}

p {
color: #222;
}

.custom-block-title {
font-weight: 600;
margin-bottom: -0.4rem;
}

&.info {
border-color: #007bff;
background-color: #f8f8f8;

&::before {
content: url('/images/icons/info.svg');
width: 25px;
height: 25px;
left: -16px;
box-sizing: border-box;
}
}

&.tip {
border-color: #42b983;
background-color: #f8f8f8;

&::before {
content: url('/images/icons/bulb.svg');
width: 25px;
height: 25px;
left: -16px;
}
}

&.warning {
border-color: #f4cd00;
background-color: #f8f8f8;

summary
outline none
cursor pointer
.custom-block-title {
color: #222;
}

&::before {
content: url('/images/icons/danger.svg');
width: 25px;
height: 25px;
left: -16px;
box-sizing: border-box;
}
}

&.danger {
border-color: #f66;
background-color: #f8f8f8;

.custom-block-title {
color: #222;
}

&::before {
content: url('/images/icons/stop.svg');
width: 25px;
height: 25px;
left: -16px;
}
}

&.details {
display: block;
position: relative;
border-radius: 2px;
margin: 1.6em 0;
padding: 1.6em;
background-color: #eee;
h4 {
margin-top: 0;
}
figure,
p {
&:last-child {
margin-bottom: 0;
padding-bottom: 0;
}
}
summary {
outline: none;
cursor: pointer;
}
}
}

.scrimba,
.vueschool
background-color #e7ecf3
padding 1em 1.25em
border-radius 2px
color #486491
position relative
margin 24px 0

a
color: #486491
position relative
padding-left 16px

&::before
content "\f144"
font-family 'Font Awesome 5 Free'
font-size 2em
display inline-block
color #73abfe
vertical-align middle
.vueschool {
background-color: #e7ecf3;
padding: 1em 1.25em;
border-radius: 2px;
color: #486491;
position: relative;
margin: 24px 0;

a {
color: #486491;
position: relative;
padding-left :16px;
}

&::before {
content: "\f144";
font-family: 'Font Awesome 5 Free';
font-size: 2em;
display: inline-block;
color: #73abfe;
vertical-align: middle;
}
}