mirror of
https://github.com/jgthms/bulma.git
synced 2025-01-09 15:44:25 +00:00
Clean docs css
This commit is contained in:
Jeremy Thomas
parent
d2a3f10c9d
commit
fbd9483e89
@ -2,408 +2,13 @@
|
||||
|
||||
@import "../bulma"
|
||||
@import "./sass/highlight"
|
||||
|
||||
// Override
|
||||
.button
|
||||
+tablet
|
||||
small
|
||||
color: $text
|
||||
left: 0
|
||||
margin-top: 10px
|
||||
position: absolute
|
||||
top: 100%
|
||||
width: 100%
|
||||
|
||||
body.page-grid .column > .notification
|
||||
padding-left: 0
|
||||
padding-right: 0
|
||||
text-align: center
|
||||
|
||||
+tablet
|
||||
.header-item .button + .button
|
||||
margin-left: 0.75rem
|
||||
|
||||
// Additional
|
||||
svg
|
||||
max-height: 100%
|
||||
max-width: 100%
|
||||
|
||||
$carbon-space: 15px
|
||||
|
||||
#carbon
|
||||
max-width: 340px
|
||||
min-height: 100px + ($carbon-space * 2)
|
||||
padding: 0
|
||||
position: relative
|
||||
&:hover
|
||||
box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px $primary
|
||||
+tablet
|
||||
margin-left: auto
|
||||
margin-right: auto
|
||||
width: 340px
|
||||
|
||||
#carbonads
|
||||
text-align: left
|
||||
a,
|
||||
span
|
||||
display: block
|
||||
.carbon-wrap
|
||||
position: relative
|
||||
.carbon-img
|
||||
float: left
|
||||
height: 130px
|
||||
padding: 15px 0 15px 15px
|
||||
width: 145px
|
||||
img
|
||||
display: block
|
||||
height: 100px
|
||||
width: 130px
|
||||
.carbon-text
|
||||
display: block
|
||||
color: $text-strong
|
||||
line-height: 20px
|
||||
padding: 15px 15px 35px 160px
|
||||
.carbon-poweredby
|
||||
bottom: 0
|
||||
color: $text-light
|
||||
font-size: $size-small
|
||||
left: 160px
|
||||
line-height: 20px
|
||||
padding: 0 15px 10px 0
|
||||
position: absolute
|
||||
right: 0
|
||||
|
||||
$github: #333333
|
||||
$twitter: #55acee
|
||||
|
||||
#github
|
||||
color: $github
|
||||
border-color: $github
|
||||
&:hover
|
||||
background: $github
|
||||
border-color: $github
|
||||
color: $white
|
||||
|
||||
#twitter
|
||||
color: $twitter
|
||||
border-color: $twitter
|
||||
&:hover
|
||||
background: $twitter
|
||||
border-color: $twitter
|
||||
color: $white
|
||||
|
||||
@keyframes floatUp
|
||||
0%
|
||||
box-shadow: 0 0 0 rgba($black, 0), 0 0 0 rgba($black, 0), 0 0 0 rgba($black, 0)
|
||||
transform: scale(0.86)
|
||||
67%
|
||||
box-shadow: 0 0 0 rgba($black, 0), 0 5px 10px rgba($black, 0.1), 0 1px 1px rgba($black, 0.2)
|
||||
transform: scale(1)
|
||||
100%
|
||||
box-shadow: 0 20px 60px rgba($black, 0.05), 0 5px 10px rgba($black, 0.1), 0 1px 1px rgba($black, 0.2)
|
||||
transform: scale(1)
|
||||
|
||||
@keyframes strokePath
|
||||
from
|
||||
stroke-dashoffset: 880
|
||||
to
|
||||
stroke-dashoffset: 0
|
||||
|
||||
@keyframes fadeIn
|
||||
from
|
||||
opacity: 0
|
||||
transform: scale(0.86)
|
||||
to
|
||||
opacity: 1
|
||||
transform: scale(1)
|
||||
|
||||
@keyframes fadeOut
|
||||
0%
|
||||
opacity: 1
|
||||
transform: scale(0.86)
|
||||
67%
|
||||
opacity: 1
|
||||
transform: scale(0.86)
|
||||
100%
|
||||
opacity: 0
|
||||
transform: scale(1)
|
||||
|
||||
@keyframes slideDown
|
||||
0%
|
||||
opacity: 0
|
||||
transform: translateY(-10px)
|
||||
100%
|
||||
opacity: 1
|
||||
transform: translateY(0)
|
||||
|
||||
@keyframes slideUp
|
||||
0%
|
||||
opacity: 0
|
||||
transform: translateY(10px)
|
||||
100%
|
||||
opacity: 1
|
||||
transform: translateY(0)
|
||||
|
||||
$curve: cubic-bezier(0, 0.71, 0.29, 1)
|
||||
|
||||
#b
|
||||
animation-delay: 1s
|
||||
animation-duration: 1.5s
|
||||
animation-fill-mode: both
|
||||
animation-name: floatUp
|
||||
animation-timing-function: $curve
|
||||
border-radius: 24px
|
||||
display: inline-block
|
||||
height: 240px
|
||||
margin-bottom: 40px
|
||||
position: relative
|
||||
vertical-align: top
|
||||
width: 240px
|
||||
svg
|
||||
+overlay
|
||||
display: block
|
||||
height: 240px
|
||||
width: 240px
|
||||
&:first-child
|
||||
animation-duration: 1.5s
|
||||
animation-fill-mode: both
|
||||
animation-name: fadeOut
|
||||
animation-timing-function: $curve
|
||||
g
|
||||
animation-duration: 1s
|
||||
animation-fill-mode: both
|
||||
animation-name: strokePath
|
||||
animation-timing-function: $curve
|
||||
fill: none
|
||||
stroke: $turquoise
|
||||
stroke-dasharray: 880
|
||||
stroke-width: 2px
|
||||
&:last-child
|
||||
animation-delay: 1s
|
||||
animation-duration: 1s
|
||||
animation-fill-mode: both
|
||||
animation-name: fadeIn
|
||||
animation-timing-function: $curve
|
||||
g
|
||||
fill: $turquoise
|
||||
|
||||
+mobile
|
||||
border-radius: 16px
|
||||
height: 160px
|
||||
width: 160px
|
||||
|
||||
#bulma
|
||||
animation: slideDown 500ms both
|
||||
animation-delay: 1s
|
||||
|
||||
#modern-framework
|
||||
animation: slideUp 500ms both
|
||||
animation-delay: 1.2s
|
||||
|
||||
#npm
|
||||
align-items: center
|
||||
animation: fadeIn 500ms both
|
||||
animation-delay: 1.4s
|
||||
background: none
|
||||
display: flex
|
||||
justify-content: center
|
||||
margin: -10px 0 20px
|
||||
code
|
||||
background: $background
|
||||
border-radius: $radius
|
||||
color: $primary
|
||||
display: inline-block
|
||||
font-size: 16px
|
||||
padding: 16px 32px
|
||||
|
||||
#ghbtns
|
||||
animation: slideDown 500ms both
|
||||
animation-delay: 1.6s
|
||||
|
||||
html.route-index #carbon
|
||||
animation: slideUp 500ms both
|
||||
animation-delay: 1.8s
|
||||
|
||||
#download
|
||||
animation: fadeIn 500ms both
|
||||
animation-delay: 2s
|
||||
|
||||
#grid
|
||||
.notification
|
||||
padding-left: 0
|
||||
padding-right: 0
|
||||
|
||||
#message
|
||||
display: none
|
||||
|
||||
#tweet
|
||||
background: $white
|
||||
border-radius: $radius-large
|
||||
box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
|
||||
padding: 1.5rem
|
||||
|
||||
#mc_embed_signup
|
||||
.control
|
||||
margin-bottom: 0
|
||||
.notification
|
||||
margin-top: 0.75rem
|
||||
|
||||
#social
|
||||
align-items: center
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
margin-bottom: 1em
|
||||
justify-content: center
|
||||
a
|
||||
display: inline-block
|
||||
font-size: 11px
|
||||
height: 20px
|
||||
line-height: 20px
|
||||
margin: 5px
|
||||
iframe
|
||||
margin: 5px
|
||||
|
||||
#images
|
||||
tr
|
||||
td:nth-child(2)
|
||||
width: 320px
|
||||
|
||||
.color
|
||||
display: inline-block
|
||||
float: left
|
||||
height: 18px
|
||||
margin-right: 5px
|
||||
width: 18px
|
||||
|
||||
.example,
|
||||
.structure
|
||||
border: 1px solid $warning
|
||||
border-top-right-radius: $radius
|
||||
color: $warning-invert
|
||||
padding: 1.25rem 1.5rem
|
||||
position: relative
|
||||
&:not(:first-child)
|
||||
margin-top: 2rem
|
||||
&:not(:last-child)
|
||||
margin-bottom: 1.5rem
|
||||
&:before
|
||||
background: $warning
|
||||
border-radius: $radius $radius 0 0
|
||||
bottom: 100%
|
||||
content: "Example"
|
||||
display: inline-block
|
||||
font-size: 7px
|
||||
font-weight: bold
|
||||
left: -1px
|
||||
letter-spacing: 1px
|
||||
padding: 3px 5px
|
||||
position: absolute
|
||||
text-transform: uppercase
|
||||
vertical-align: top
|
||||
+tablet
|
||||
&.is-fullwidth
|
||||
border-left: none
|
||||
border-right: none
|
||||
padding: 0
|
||||
|
||||
.example
|
||||
& + .highlight
|
||||
border: 1px solid $warning
|
||||
border-radius: 0 0 $radius $radius
|
||||
border-top: none
|
||||
margin-top: -1.5rem
|
||||
pre
|
||||
max-height: 50vh
|
||||
&:not(:last-child)
|
||||
margin-bottom: 1.5rem
|
||||
|
||||
$structure: $danger
|
||||
$structure-invert: $danger-invert
|
||||
|
||||
.structure
|
||||
border-color: $structure
|
||||
border-radius: $radius
|
||||
padding: 1.5rem
|
||||
&:before
|
||||
background: $structure
|
||||
color: $structure-invert
|
||||
content: "Structure"
|
||||
|
||||
.structure-item
|
||||
position: relative
|
||||
&:before
|
||||
+overlay
|
||||
background: rgba($black, 0.7)
|
||||
background: $background
|
||||
border: 1px solid $border
|
||||
content: ""
|
||||
display: block
|
||||
z-index: 1
|
||||
&:after
|
||||
+overlay
|
||||
align-items: center
|
||||
content: attr(title)
|
||||
display: flex
|
||||
font-family: $family-monospace
|
||||
font-size: 11px
|
||||
justify-content: center
|
||||
padding: 3px 5px
|
||||
z-index: 2
|
||||
&.is-structure-container
|
||||
padding: 1.5rem 0.75rem 0.75rem
|
||||
&:after
|
||||
align-items: flex-start
|
||||
justify-content: flex-start
|
||||
padding: 0.5rem 0.75rem
|
||||
|
||||
.highlight
|
||||
position: relative
|
||||
.copy,
|
||||
.expand
|
||||
+unselectable
|
||||
background: $white
|
||||
border: solid $border
|
||||
border-width: 0 0 1px 1px
|
||||
color: $text-light
|
||||
cursor: pointer
|
||||
outline: none
|
||||
position: absolute
|
||||
right: 0
|
||||
top: 0
|
||||
&:hover
|
||||
border-color: $code
|
||||
color: $code
|
||||
.expand
|
||||
border-right-width: 1px
|
||||
right: 50px
|
||||
+tablet
|
||||
pre
|
||||
white-space: pre-wrap
|
||||
|
||||
+tablet
|
||||
.section:not(.is-fullwidth) > .example:not(.is-fullwidth)
|
||||
margin-left: 1.5rem
|
||||
margin-right: 1.5rem
|
||||
& + .highlight
|
||||
margin-left: 1.5rem
|
||||
margin-right: 1.5rem
|
||||
|
||||
.section.is-fullwidth
|
||||
padding: 0 !important
|
||||
.example
|
||||
border-left: none
|
||||
border-radius: 0
|
||||
border-right: none
|
||||
padding: 0
|
||||
& + .highlight
|
||||
border-left: none
|
||||
border-radius: 0
|
||||
border-right: none
|
||||
|
||||
#newsletter
|
||||
.input
|
||||
border-color: $white
|
||||
box-shadow: none
|
||||
@import "./sass/override"
|
||||
@import "./sass/global"
|
||||
@import "./sass/index"
|
||||
@import "./sass/header"
|
||||
@import "./sass/footer"
|
||||
@import "./sass/specific"
|
||||
@import "./sass/example"
|
||||
|
||||
html
|
||||
\::-moz-selection
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
/*! bulma.io v0.3.0 | MIT License | github.com/jgthms/bulma */
|
||||
/*! bulma.io v0.3.1 | MIT License | github.com/jgthms/bulma */
|
||||
@-webkit-keyframes spinAround {
|
||||
from {
|
||||
-webkit-transform: rotate(0deg);
|
||||
@ -801,6 +801,10 @@ a.box:active {
|
||||
color: #0a0a0a;
|
||||
}
|
||||
|
||||
.button.is-white.is-outlined.is-loading:after {
|
||||
border-color: transparent transparent white white !important;
|
||||
}
|
||||
|
||||
.button.is-white.is-inverted.is-outlined {
|
||||
background-color: transparent;
|
||||
border-color: #0a0a0a;
|
||||
@ -862,6 +866,10 @@ a.box:active {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.button.is-black.is-outlined.is-loading:after {
|
||||
border-color: transparent transparent #0a0a0a #0a0a0a !important;
|
||||
}
|
||||
|
||||
.button.is-black.is-inverted.is-outlined {
|
||||
background-color: transparent;
|
||||
border-color: white;
|
||||
@ -923,6 +931,10 @@ a.box:active {
|
||||
color: #363636;
|
||||
}
|
||||
|
||||
.button.is-light.is-outlined.is-loading:after {
|
||||
border-color: transparent transparent whitesmoke whitesmoke !important;
|
||||
}
|
||||
|
||||
.button.is-light.is-inverted.is-outlined {
|
||||
background-color: transparent;
|
||||
border-color: #363636;
|
||||
@ -984,6 +996,10 @@ a.box:active {
|
||||
color: whitesmoke;
|
||||
}
|
||||
|
||||
.button.is-dark.is-outlined.is-loading:after {
|
||||
border-color: transparent transparent #363636 #363636 !important;
|
||||
}
|
||||
|
||||
.button.is-dark.is-inverted.is-outlined {
|
||||
background-color: transparent;
|
||||
border-color: whitesmoke;
|
||||
@ -1045,6 +1061,10 @@ a.box:active {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.button.is-primary.is-outlined.is-loading:after {
|
||||
border-color: transparent transparent #00d1b2 #00d1b2 !important;
|
||||
}
|
||||
|
||||
.button.is-primary.is-inverted.is-outlined {
|
||||
background-color: transparent;
|
||||
border-color: #fff;
|
||||
@ -1106,6 +1126,10 @@ a.box:active {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.button.is-info.is-outlined.is-loading:after {
|
||||
border-color: transparent transparent #3273dc #3273dc !important;
|
||||
}
|
||||
|
||||
.button.is-info.is-inverted.is-outlined {
|
||||
background-color: transparent;
|
||||
border-color: #fff;
|
||||
@ -1167,6 +1191,10 @@ a.box:active {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.button.is-success.is-outlined.is-loading:after {
|
||||
border-color: transparent transparent #23d160 #23d160 !important;
|
||||
}
|
||||
|
||||
.button.is-success.is-inverted.is-outlined {
|
||||
background-color: transparent;
|
||||
border-color: #fff;
|
||||
@ -1228,6 +1256,10 @@ a.box:active {
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
.button.is-warning.is-outlined.is-loading:after {
|
||||
border-color: transparent transparent #ffdd57 #ffdd57 !important;
|
||||
}
|
||||
|
||||
.button.is-warning.is-inverted.is-outlined {
|
||||
background-color: transparent;
|
||||
border-color: rgba(0, 0, 0, 0.7);
|
||||
@ -1289,6 +1321,10 @@ a.box:active {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.button.is-danger.is-outlined.is-loading:after {
|
||||
border-color: transparent transparent #ff3860 #ff3860 !important;
|
||||
}
|
||||
|
||||
.button.is-danger.is-inverted.is-outlined {
|
||||
background-color: transparent;
|
||||
border-color: #fff;
|
||||
@ -7059,28 +7095,6 @@ svg {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
#github {
|
||||
color: #333333;
|
||||
border-color: #333333;
|
||||
}
|
||||
|
||||
#github:hover {
|
||||
background: #333333;
|
||||
border-color: #333333;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#twitter {
|
||||
color: #55acee;
|
||||
border-color: #55acee;
|
||||
}
|
||||
|
||||
#twitter:hover {
|
||||
background: #55acee;
|
||||
border-color: #55acee;
|
||||
color: white;
|
||||
}
|
||||
|
||||
@-webkit-keyframes floatUp {
|
||||
0% {
|
||||
box-shadow: 0 0 0 rgba(10, 10, 10, 0), 0 0 0 rgba(10, 10, 10, 0), 0 0 0 rgba(10, 10, 10, 0);
|
||||
@ -7250,8 +7264,6 @@ svg {
|
||||
}
|
||||
|
||||
#b {
|
||||
-webkit-animation-delay: 1s;
|
||||
animation-delay: 1s;
|
||||
-webkit-animation-duration: 1.5s;
|
||||
animation-duration: 1.5s;
|
||||
-webkit-animation-fill-mode: both;
|
||||
@ -7334,15 +7346,13 @@ svg {
|
||||
#bulma {
|
||||
-webkit-animation: slideDown 500ms both;
|
||||
animation: slideDown 500ms both;
|
||||
-webkit-animation-delay: 1s;
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
#modern-framework {
|
||||
-webkit-animation: slideUp 500ms both;
|
||||
animation: slideUp 500ms both;
|
||||
-webkit-animation-delay: 1.2s;
|
||||
animation-delay: 1.2s;
|
||||
-webkit-animation-delay: 0.2s;
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
#npm {
|
||||
@ -7351,8 +7361,8 @@ svg {
|
||||
align-items: center;
|
||||
-webkit-animation: fadeIn 500ms both;
|
||||
animation: fadeIn 500ms both;
|
||||
-webkit-animation-delay: 1.4s;
|
||||
animation-delay: 1.4s;
|
||||
-webkit-animation-delay: 0.4s;
|
||||
animation-delay: 0.4s;
|
||||
background: none;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
@ -7375,22 +7385,22 @@ svg {
|
||||
#ghbtns {
|
||||
-webkit-animation: slideDown 500ms both;
|
||||
animation: slideDown 500ms both;
|
||||
-webkit-animation-delay: 1.6s;
|
||||
animation-delay: 1.6s;
|
||||
-webkit-animation-delay: 0.6s;
|
||||
animation-delay: 0.6s;
|
||||
}
|
||||
|
||||
html.route-index #carbon {
|
||||
-webkit-animation: slideUp 500ms both;
|
||||
animation: slideUp 500ms both;
|
||||
-webkit-animation-delay: 1.8s;
|
||||
animation-delay: 1.8s;
|
||||
-webkit-animation-delay: 0.8s;
|
||||
animation-delay: 0.8s;
|
||||
}
|
||||
|
||||
#download {
|
||||
-webkit-animation: fadeIn 500ms both;
|
||||
animation: fadeIn 500ms both;
|
||||
-webkit-animation-delay: 2s;
|
||||
animation-delay: 2s;
|
||||
-webkit-animation-delay: 1s;
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
#grid .notification {
|
||||
@ -7409,6 +7419,28 @@ html.route-index #carbon {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
#github {
|
||||
color: #333333;
|
||||
border-color: #333333;
|
||||
}
|
||||
|
||||
#github:hover {
|
||||
background: #333333;
|
||||
border-color: #333333;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#twitter {
|
||||
color: #55acee;
|
||||
border-color: #55acee;
|
||||
}
|
||||
|
||||
#twitter:hover {
|
||||
background: #55acee;
|
||||
border-color: #55acee;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#mc_embed_signup .control {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@ -7649,11 +7681,6 @@ html.route-index #carbon {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
#newsletter .input {
|
||||
border-color: white;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
html ::-moz-selection {
|
||||
background: #00d1b2;
|
||||
color: #fff;
|
||||
|
||||
124
docs/sass/example.sass
Normal file
124
docs/sass/example.sass
Normal file
@ -0,0 +1,124 @@
|
||||
.example,
|
||||
.structure
|
||||
border: 1px solid $warning
|
||||
border-top-right-radius: $radius
|
||||
color: $warning-invert
|
||||
padding: 1.25rem 1.5rem
|
||||
position: relative
|
||||
&:not(:first-child)
|
||||
margin-top: 2rem
|
||||
&:not(:last-child)
|
||||
margin-bottom: 1.5rem
|
||||
&:before
|
||||
background: $warning
|
||||
border-radius: $radius $radius 0 0
|
||||
bottom: 100%
|
||||
content: "Example"
|
||||
display: inline-block
|
||||
font-size: 7px
|
||||
font-weight: bold
|
||||
left: -1px
|
||||
letter-spacing: 1px
|
||||
padding: 3px 5px
|
||||
position: absolute
|
||||
text-transform: uppercase
|
||||
vertical-align: top
|
||||
+tablet
|
||||
&.is-fullwidth
|
||||
border-left: none
|
||||
border-right: none
|
||||
padding: 0
|
||||
|
||||
.example
|
||||
& + .highlight
|
||||
border: 1px solid $warning
|
||||
border-radius: 0 0 $radius $radius
|
||||
border-top: none
|
||||
margin-top: -1.5rem
|
||||
pre
|
||||
max-height: 50vh
|
||||
&:not(:last-child)
|
||||
margin-bottom: 1.5rem
|
||||
|
||||
$structure: $danger
|
||||
$structure-invert: $danger-invert
|
||||
|
||||
.structure
|
||||
border-color: $structure
|
||||
border-radius: $radius
|
||||
padding: 1.5rem
|
||||
&:before
|
||||
background: $structure
|
||||
color: $structure-invert
|
||||
content: "Structure"
|
||||
|
||||
.structure-item
|
||||
position: relative
|
||||
&:before
|
||||
+overlay
|
||||
background: rgba($black, 0.7)
|
||||
background: $background
|
||||
border: 1px solid $border
|
||||
content: ""
|
||||
display: block
|
||||
z-index: 1
|
||||
&:after
|
||||
+overlay
|
||||
align-items: center
|
||||
content: attr(title)
|
||||
display: flex
|
||||
font-family: $family-monospace
|
||||
font-size: 11px
|
||||
justify-content: center
|
||||
padding: 3px 5px
|
||||
z-index: 2
|
||||
&.is-structure-container
|
||||
padding: 1.5rem 0.75rem 0.75rem
|
||||
&:after
|
||||
align-items: flex-start
|
||||
justify-content: flex-start
|
||||
padding: 0.5rem 0.75rem
|
||||
|
||||
.highlight
|
||||
position: relative
|
||||
.copy,
|
||||
.expand
|
||||
+unselectable
|
||||
background: $white
|
||||
border: solid $border
|
||||
border-width: 0 0 1px 1px
|
||||
color: $text-light
|
||||
cursor: pointer
|
||||
outline: none
|
||||
position: absolute
|
||||
right: 0
|
||||
top: 0
|
||||
&:hover
|
||||
border-color: $code
|
||||
color: $code
|
||||
.expand
|
||||
border-right-width: 1px
|
||||
right: 50px
|
||||
+tablet
|
||||
pre
|
||||
white-space: pre-wrap
|
||||
|
||||
+tablet
|
||||
.section:not(.is-fullwidth) > .example:not(.is-fullwidth)
|
||||
margin-left: 1.5rem
|
||||
margin-right: 1.5rem
|
||||
& + .highlight
|
||||
margin-left: 1.5rem
|
||||
margin-right: 1.5rem
|
||||
|
||||
.section.is-fullwidth
|
||||
padding: 0 !important
|
||||
.example
|
||||
border-left: none
|
||||
border-radius: 0
|
||||
border-right: none
|
||||
padding: 0
|
||||
& + .highlight
|
||||
border-left: none
|
||||
border-radius: 0
|
||||
border-right: none
|
||||
20
docs/sass/footer.sass
Normal file
20
docs/sass/footer.sass
Normal file
@ -0,0 +1,20 @@
|
||||
#mc_embed_signup
|
||||
.control
|
||||
margin-bottom: 0
|
||||
.notification
|
||||
margin-top: 0.75rem
|
||||
|
||||
#social
|
||||
align-items: center
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
margin-bottom: 1em
|
||||
justify-content: center
|
||||
a
|
||||
display: inline-block
|
||||
font-size: 11px
|
||||
height: 20px
|
||||
line-height: 20px
|
||||
margin: 5px
|
||||
iframe
|
||||
margin: 5px
|
||||
48
docs/sass/global.sass
Normal file
48
docs/sass/global.sass
Normal file
@ -0,0 +1,48 @@
|
||||
svg
|
||||
max-height: 100%
|
||||
max-width: 100%
|
||||
|
||||
$carbon-space: 15px
|
||||
|
||||
#carbon
|
||||
max-width: 340px
|
||||
min-height: 100px + ($carbon-space * 2)
|
||||
padding: 0
|
||||
position: relative
|
||||
&:hover
|
||||
box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px $primary
|
||||
+tablet
|
||||
margin-left: auto
|
||||
margin-right: auto
|
||||
width: 340px
|
||||
|
||||
#carbonads
|
||||
text-align: left
|
||||
a,
|
||||
span
|
||||
display: block
|
||||
.carbon-wrap
|
||||
position: relative
|
||||
.carbon-img
|
||||
float: left
|
||||
height: 130px
|
||||
padding: 15px 0 15px 15px
|
||||
width: 145px
|
||||
img
|
||||
display: block
|
||||
height: 100px
|
||||
width: 130px
|
||||
.carbon-text
|
||||
display: block
|
||||
color: $text-strong
|
||||
line-height: 20px
|
||||
padding: 15px 15px 35px 160px
|
||||
.carbon-poweredby
|
||||
bottom: 0
|
||||
color: $text-light
|
||||
font-size: $size-small
|
||||
left: 160px
|
||||
line-height: 20px
|
||||
padding: 0 15px 10px 0
|
||||
position: absolute
|
||||
right: 0
|
||||
18
docs/sass/header.sass
Normal file
18
docs/sass/header.sass
Normal file
@ -0,0 +1,18 @@
|
||||
$github: #333333
|
||||
$twitter: #55acee
|
||||
|
||||
#github
|
||||
color: $github
|
||||
border-color: $github
|
||||
&:hover
|
||||
background: $github
|
||||
border-color: $github
|
||||
color: $white
|
||||
|
||||
#twitter
|
||||
color: $twitter
|
||||
border-color: $twitter
|
||||
&:hover
|
||||
background: $twitter
|
||||
border-color: $twitter
|
||||
color: $white
|
||||
148
docs/sass/index.sass
Normal file
148
docs/sass/index.sass
Normal file
@ -0,0 +1,148 @@
|
||||
@keyframes floatUp
|
||||
0%
|
||||
box-shadow: 0 0 0 rgba($black, 0), 0 0 0 rgba($black, 0), 0 0 0 rgba($black, 0)
|
||||
transform: scale(0.86)
|
||||
67%
|
||||
box-shadow: 0 0 0 rgba($black, 0), 0 5px 10px rgba($black, 0.1), 0 1px 1px rgba($black, 0.2)
|
||||
transform: scale(1)
|
||||
100%
|
||||
box-shadow: 0 20px 60px rgba($black, 0.05), 0 5px 10px rgba($black, 0.1), 0 1px 1px rgba($black, 0.2)
|
||||
transform: scale(1)
|
||||
|
||||
@keyframes strokePath
|
||||
from
|
||||
stroke-dashoffset: 880
|
||||
to
|
||||
stroke-dashoffset: 0
|
||||
|
||||
@keyframes fadeIn
|
||||
from
|
||||
opacity: 0
|
||||
transform: scale(0.86)
|
||||
to
|
||||
opacity: 1
|
||||
transform: scale(1)
|
||||
|
||||
@keyframes fadeOut
|
||||
0%
|
||||
opacity: 1
|
||||
transform: scale(0.86)
|
||||
67%
|
||||
opacity: 1
|
||||
transform: scale(0.86)
|
||||
100%
|
||||
opacity: 0
|
||||
transform: scale(1)
|
||||
|
||||
@keyframes slideDown
|
||||
0%
|
||||
opacity: 0
|
||||
transform: translateY(-10px)
|
||||
100%
|
||||
opacity: 1
|
||||
transform: translateY(0)
|
||||
|
||||
@keyframes slideUp
|
||||
0%
|
||||
opacity: 0
|
||||
transform: translateY(10px)
|
||||
100%
|
||||
opacity: 1
|
||||
transform: translateY(0)
|
||||
|
||||
$curve: cubic-bezier(0, 0.71, 0.29, 1)
|
||||
|
||||
#b
|
||||
// animation-delay: 1s
|
||||
animation-duration: 1.5s
|
||||
animation-fill-mode: both
|
||||
animation-name: floatUp
|
||||
animation-timing-function: $curve
|
||||
border-radius: 24px
|
||||
display: inline-block
|
||||
height: 240px
|
||||
margin-bottom: 40px
|
||||
position: relative
|
||||
vertical-align: top
|
||||
width: 240px
|
||||
svg
|
||||
+overlay
|
||||
display: block
|
||||
height: 240px
|
||||
width: 240px
|
||||
&:first-child
|
||||
animation-duration: 1.5s
|
||||
animation-fill-mode: both
|
||||
animation-name: fadeOut
|
||||
animation-timing-function: $curve
|
||||
g
|
||||
animation-duration: 1s
|
||||
animation-fill-mode: both
|
||||
animation-name: strokePath
|
||||
animation-timing-function: $curve
|
||||
fill: none
|
||||
stroke: $turquoise
|
||||
stroke-dasharray: 880
|
||||
stroke-width: 2px
|
||||
&:last-child
|
||||
animation-delay: 1s
|
||||
animation-duration: 1s
|
||||
animation-fill-mode: both
|
||||
animation-name: fadeIn
|
||||
animation-timing-function: $curve
|
||||
g
|
||||
fill: $turquoise
|
||||
+mobile
|
||||
border-radius: 16px
|
||||
height: 160px
|
||||
width: 160px
|
||||
|
||||
#bulma
|
||||
animation: slideDown 500ms both
|
||||
// animation-delay: 1s
|
||||
|
||||
#modern-framework
|
||||
animation: slideUp 500ms both
|
||||
animation-delay: 0.2s
|
||||
|
||||
#npm
|
||||
align-items: center
|
||||
animation: fadeIn 500ms both
|
||||
animation-delay: 0.4s
|
||||
background: none
|
||||
display: flex
|
||||
justify-content: center
|
||||
margin: -10px 0 20px
|
||||
code
|
||||
background: $background
|
||||
border-radius: $radius
|
||||
color: $primary
|
||||
display: inline-block
|
||||
font-size: 16px
|
||||
padding: 16px 32px
|
||||
|
||||
#ghbtns
|
||||
animation: slideDown 500ms both
|
||||
animation-delay: 0.6s
|
||||
|
||||
html.route-index #carbon
|
||||
animation: slideUp 500ms both
|
||||
animation-delay: 0.8s
|
||||
|
||||
#download
|
||||
animation: fadeIn 500ms both
|
||||
animation-delay: 1s
|
||||
|
||||
#grid
|
||||
.notification
|
||||
padding-left: 0
|
||||
padding-right: 0
|
||||
|
||||
#message
|
||||
display: none
|
||||
|
||||
#tweet
|
||||
background: $white
|
||||
border-radius: $radius-large
|
||||
box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
|
||||
padding: 1.5rem
|
||||
18
docs/sass/override.sass
Normal file
18
docs/sass/override.sass
Normal file
@ -0,0 +1,18 @@
|
||||
.button
|
||||
+tablet
|
||||
small
|
||||
color: $text
|
||||
left: 0
|
||||
margin-top: 10px
|
||||
position: absolute
|
||||
top: 100%
|
||||
width: 100%
|
||||
|
||||
body.page-grid .column > .notification
|
||||
padding-left: 0
|
||||
padding-right: 0
|
||||
text-align: center
|
||||
|
||||
+tablet
|
||||
.header-item .button + .button
|
||||
margin-left: 0.75rem
|
||||
11
docs/sass/specific.sass
Normal file
11
docs/sass/specific.sass
Normal file
@ -0,0 +1,11 @@
|
||||
#images
|
||||
tr
|
||||
td:nth-child(2)
|
||||
width: 320px
|
||||
|
||||
.color
|
||||
display: inline-block
|
||||
float: left
|
||||
height: 18px
|
||||
margin-right: 5px
|
||||
width: 18px
|
||||
Loading…
Reference in New Issue
Block a user