From 1dce18a6585b45e185ab4fa5fd685c079bc9c97f Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Sun, 2 Jul 2017 23:49:54 +0100 Subject: [PATCH] Add underscore sass --- docs/.gitignore | 1 - docs/_sass/bsa.sass | 73 +++++++++++++++++++ docs/_sass/callout.sass | 13 ++++ docs/_sass/example.sass | 129 +++++++++++++++++++++++++++++++++ docs/_sass/footer.sass | 66 +++++++++++++++++ docs/_sass/global.sass | 50 +++++++++++++ docs/_sass/header.sass | 24 +++++++ docs/_sass/highlight.sass | 126 ++++++++++++++++++++++++++++++++ docs/_sass/index.sass | 148 ++++++++++++++++++++++++++++++++++++++ docs/_sass/override.sass | 18 +++++ docs/_sass/route.sass | 36 ++++++++++ docs/_sass/specific.sass | 22 ++++++ 12 files changed, 705 insertions(+), 1 deletion(-) create mode 100644 docs/_sass/bsa.sass create mode 100644 docs/_sass/callout.sass create mode 100644 docs/_sass/example.sass create mode 100644 docs/_sass/footer.sass create mode 100644 docs/_sass/global.sass create mode 100644 docs/_sass/header.sass create mode 100644 docs/_sass/highlight.sass create mode 100644 docs/_sass/index.sass create mode 100644 docs/_sass/override.sass create mode 100644 docs/_sass/route.sass create mode 100644 docs/_sass/specific.sass diff --git a/docs/.gitignore b/docs/.gitignore index fb0aa0fde..fd2468e6c 100644 --- a/docs/.gitignore +++ b/docs/.gitignore @@ -9,7 +9,6 @@ npm-debug.log # Folders .sass-cache -/_sass /bulma /fontawesome /styles/node_modules diff --git a/docs/_sass/bsa.sass b/docs/_sass/bsa.sass new file mode 100644 index 000000000..c9ed08540 --- /dev/null +++ b/docs/_sass/bsa.sass @@ -0,0 +1,73 @@ +.bsa + padding: 2rem + +.bsa-cpc + min-height: 1px + +#_default_ + .default-ad + background-color: rgba(black, 0.3) + border-radius: 2px + color: $white + display: inline-block + font-size: 10px + font-weight: bold + padding: 0 4px + text-transform: uppercase + vertical-align: top + & > a + background-color: $white + border-radius: $radius-large + box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) + color: $text + display: block + line-height: 1.375 + margin-top: 15px + min-height: 70px + padding: 15px + padding-left: 70px + position: relative + &:hover, + &:focus + box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px $link + &:active + box-shadow: inset 0 1px 2px rgba($black, 0.2), 0 0 0 1px $link + span + display: block + .default-image + display: block + left: 15px + height: 40px + position: absolute + top: 15px + width: 40px + img + display: block + height: 40px + width: 40px + .default-title + color: $text-strong + display: inline + font-weight: $weight-bold + &:after + content: " — " + .default-description + display: inline + ++tablet + .bsa + .columns + min-height: 120px + #_default_ + display: flex + justify-content: center + position: relative + .default-ad + left: 100% + margin-left: 2rem + position: absolute + top: 0 + & > a + margin: 0 + &:not(:nth-child(2)) + margin-left: 2rem diff --git a/docs/_sass/callout.sass b/docs/_sass/callout.sass new file mode 100644 index 000000000..56807f982 --- /dev/null +++ b/docs/_sass/callout.sass @@ -0,0 +1,13 @@ +.callout + +block + background-color: $background + border-radius: $radius + padding: 1.25rem 2.5rem 1.25rem 1.5rem + position: relative + // Colors + @each $name, $pair in $colors + $color: nth($pair, 1) + $color-invert: nth($pair, 2) + &.is-#{$name} + background-color: $color + color: $color-invert diff --git a/docs/_sass/example.sass b/docs/_sass/example.sass new file mode 100644 index 000000000..909db8162 --- /dev/null +++ b/docs/_sass/example.sass @@ -0,0 +1,129 @@ +.example, +.structure + border: 1px solid $warning + border-top-right-radius: $radius + color: $warning-invert + padding: 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 + &:not(:last-child) + margin-bottom: 1.5rem + +.highlight pre + max-height: 320px + margin-bottom: 0 !important + padding: 1.25em 1.5em + code + padding: 0 + +$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 diff --git a/docs/_sass/footer.sass b/docs/_sass/footer.sass new file mode 100644 index 000000000..8154b8fda --- /dev/null +++ b/docs/_sass/footer.sass @@ -0,0 +1,66 @@ +#about + .twitter-container + display: block + height: 30px + line-height: 30px + margin-top: 5px + small + display: block + margin-top: 5px + +#mc_embed_signup + .field + margin-bottom: 0 + .notification + margin-top: 0.75rem + +#share + form + height: 30px + margin-top: 10px + +#social + align-items: center + display: flex + flex-wrap: wrap + justify-content: flex-start + > iframe, + > a, + > form, + > div + display: inline-block + font-size: 11px + height: 30px + line-height: 30px + margin-top: 5px + .github-btn + width: 160px + .twitter-share-button + margin-right: 10px + min-width: 76px + .paypal-form + min-width: 148px + .fb-like + align-items: center + display: flex + width: 130px + +#newsletter + .input + border-color: $white + box-shadow: none + +#sister + ul + display: flex + flex-wrap: wrap + li + display: flex + height: 30px + margin: 5px 1rem 0 0 + img + height: 30px + +#tsp + small + display: block diff --git a/docs/_sass/global.sass b/docs/_sass/global.sass new file mode 100644 index 000000000..ec2f282ed --- /dev/null +++ b/docs/_sass/global.sass @@ -0,0 +1,50 @@ +svg + max-height: 100% + max-width: 100% + +$carbon-space: 15px + +#carbon + margin-left: auto + margin-right: auto + max-width: 340px + min-height: 120px + ($carbon-space * 2) + padding: 0 + position: relative + &:hover + box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px $primary + +tablet + width: 340px + +#carbonads + font-size: 14px + text-align: left + a, + span + display: block + .carbon-wrap + position: relative + .carbon-img + background: $background + float: left + height: 100px + margin: 15px 0 15px 15px + width: 130px + 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 diff --git a/docs/_sass/header.sass b/docs/_sass/header.sass new file mode 100644 index 000000000..3a765d738 --- /dev/null +++ b/docs/_sass/header.sass @@ -0,0 +1,24 @@ +$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 + ++desktop + #blogDropdown + width: 16rem + .navbar-item + white-space: normal diff --git a/docs/_sass/highlight.sass b/docs/_sass/highlight.sass new file mode 100644 index 000000000..3d7601d00 --- /dev/null +++ b/docs/_sass/highlight.sass @@ -0,0 +1,126 @@ +.highlight + background-color: #f5f5f5 + color: #586e75 + .c + color: #93a1a1 + .err, + .g + color: #586e75 + .k + color: #859900 + .l, + .n + color: #586e75 + .o + color: #859900 + .x + color: #cb4b16 + .p + color: #586e75 + .cm + color: #93a1a1 + .cp + color: #859900 + .c1 + color: #93a1a1 + .cs + color: #859900 + .gd + color: #2aa198 + .ge + color: #586e75 + font-style: italic + .gr + color: #dc322f + .gh + color: #cb4b16 + .gi + color: #859900 + .go, + .gp + color: #586e75 + .gs + color: #586e75 + font-weight: bold + .gu + color: #cb4b16 + .gt + color: #586e75 + .kc + color: #cb4b16 + .kd + color: #268bd2 + .kn, + .kp + color: #859900 + .kr + color: #268bd2 + .kt + color: #dc322f + .ld + color: #586e75 + .m, + .s + color: #2aa198 + .na + color: #B58900 + .nb + color: #586e75 + .nc + color: #268bd2 + .no + color: #cb4b16 + .nd + color: #268bd2 + .ni, + .ne + color: #cb4b16 + .nf + color: #268bd2 + .nl, + .nn, + .nx, + .py + color: #586e75 + .nt, + .nv + color: #268bd2 + .ow + color: #859900 + .w + color: #586e75 + .mf, + .mh, + .mi, + .mo + color: #2aa198 + .sb + color: #93a1a1 + .sc + color: #2aa198 + .sd + color: #586e75 + .s2 + color: #2aa198 + .se + color: #cb4b16 + .sh + color: #586e75 + .si, + .sx + color: #2aa198 + .sr + color: #dc322f + .s1, + .ss + color: #2aa198 + .bp, + .vc, + .vg, + .vi + color: #268bd2 + .il + color: #2aa198 + +.content .highlight + text-align: left \ No newline at end of file diff --git a/docs/_sass/index.sass b/docs/_sass/index.sass new file mode 100644 index 000000000..1bd31ed72 --- /dev/null +++ b/docs/_sass/index.sass @@ -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 diff --git a/docs/_sass/override.sass b/docs/_sass/override.sass new file mode 100644 index 000000000..da3cbdcc7 --- /dev/null +++ b/docs/_sass/override.sass @@ -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 diff --git a/docs/_sass/route.sass b/docs/_sass/route.sass new file mode 100644 index 000000000..7e40335d2 --- /dev/null +++ b/docs/_sass/route.sass @@ -0,0 +1,36 @@ +html.route-index + .title.is-2 + position: relative + + .title.is-2 a + color: #242424 + padding-left: 48px + position: relative + + .title.is-2 a:hover + color: #00d1b2 + + .title.is-2 .icon.is-medium + left: 8px + position: absolute + top: 10px + + .hero .title.is-2 a + color: white + + .hero .title.is-2 a:hover + color: white + + .hero.is-primary a.column, + .hero.is-primary a.column:hover + color: white + + .hero.is-primary a.column:hover .title strong + border-bottom: 1px solid + + @media screen and (max-width: 979px) + .title.is-2 a + padding-left: 0 + + .title.is-2 .icon.is-medium + display: none diff --git a/docs/_sass/specific.sass b/docs/_sass/specific.sass new file mode 100644 index 000000000..e5cfe394b --- /dev/null +++ b/docs/_sass/specific.sass @@ -0,0 +1,22 @@ +#images + tr + td:nth-child(2) + width: 320px + +.color + border-radius: 2px + box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(0, 0, 0, 0.1) + display: inline-block + float: left + height: 24px + margin-right: 8px + width: 24px + +.button.is-rss + background-color: #f26522 + border-color: transparent + color: #fff + &:hover + background-color: darken(#f26522, 5%) + &:active + background-color: darken(#f26522, 10%) -- 2.47.2