From 1103f25d4ccc3805941cc1332193203e8fa6b856 Mon Sep 17 00:00:00 2001 From: Martin Schoeler Date: Wed, 23 May 2018 16:42:19 -0300 Subject: [PATCH] Add more improvements to css improve buttons, spacing, inputs and tables --- _layouts/default.html | 11 +- _sass/buttons.scss | 207 +++++++++++++++++++++++++++++++++ _sass/layout.scss | 121 ++++++++++--------- _sass/variables.scss | 4 +- images/icons/github--white.svg | 1 + styles.scss | 36 +----- 6 files changed, 283 insertions(+), 97 deletions(-) create mode 100644 _sass/buttons.scss create mode 100644 images/icons/github--white.svg diff --git a/_layouts/default.html b/_layouts/default.html index e6556db7cd..c95be56f19 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -67,10 +67,13 @@
{{ content }} -
-
- Github - Contribute to this page on GitHub +
+ + + Github + + Contribute to this page on GitHub +
diff --git a/_sass/buttons.scss b/_sass/buttons.scss new file mode 100644 index 0000000000..75a01268da --- /dev/null +++ b/_sass/buttons.scss @@ -0,0 +1,207 @@ +@mixin reset { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + cursor: pointer; + outline: none; + border: 0; + background: none; + text-decoration: none; + color: $brand; + } + + @mixin defaultStyle { + font-weight: 500; + font-size: 0.8em; + line-height: 1.5; + text-align: center; + display: inline-flex; + @include justify-content(space-around); + vertical-align: top; + padding: 0.9em 1.14em; + border-radius: 2px; + transition: all $tranitions; + } + + @mixin disabledStyle { + &.disabled, + &[disabled] { + background: $grey-bg; + color: $grey-smoke-dark; + cursor: default; + + &:hover { + background: $grey-bg; + color: $grey-smoke-dark; + } + } + } + + .button { + @include reset; + @include defaultStyle; + @include disabledStyle; + + color: #fff; + background-color: $brand; + + &:hover { + background-color: $brand-dark !important; + } + + &:active { + background-color: $brand; + box-shadow: inset 0 2px 0 0 $brand-dark; + } + + + .button { + margin-left: 0.5em; + } + } + + .button--ghost { + @include reset; + @include defaultStyle; + @include disabledStyle; + + background: $grey-light; + color: $space; + + &:hover { + background: $grey; + } + + &:active { + background-color: $grey-light; + box-shadow: inset 0 2px 0 0 $grey; + } + + &.disabled, + &[disabled] { + border-color: $grey-bg; + } + } + + .button--dark { + @include reset; + @include defaultStyle; + @include disabledStyle; + + background: $space; + color: #fff; + + &:hover { + opacity: .7; + } + + &:active { + background-color: $grey-light; + box-shadow: inset 0 2px 0 0 $grey; + } + + &.disabled, + &[disabled] { + border-color: $grey-bg; + } + } + + .button--text { + @include reset; + @include defaultStyle; + @include disabledStyle; + padding: 0; + font-weight: 600; + + &:hover { + color: $brand-dark; + } + + &.disabled, + &[disabled] { + background: none; + + &:hover { + background: none; + } + } + } + + .button--link { + padding: 0; + font-weight: 600; + transition: all $tranitions; + color: $brand; + + &:hover { + color: $brand-dark; + } + } + + .button--with-arrow { + position: relative; + padding-right: 2em; + + &:before { + content: ""; + display: block; + border-top: 1px solid $brand; + width: 1.1em; + position: absolute; + top: 0.75em; + right: 0; + } + + &:after { + content: ""; + display: block; + width: 0.5em; + height: 0.5em; + border-right: 1px solid $brand; + border-bottom: 1px solid $brand; + transform: rotate(-45deg); + position: absolute; + top: 0.5em; + right: 0; + } + + &:hover { + &:before { + border-top: 1px solid $brand-dark; + } + &:after { + border-right: 1px solid $brand-dark; + border-bottom: 1px solid $brand-dark; + } + } + } + + .button--blank { + @include reset; + @include defaultStyle; + @include disabledStyle; + + background: #fff; + color: #030C1A; + + &:hover { + background-color: #eee; + } + + &:active { + box-shadow: inset 0 1px 0 0 $grey-dark; + } + } + + + .button--icon { + margin-right: 1em; + } + + .button--nobreak { + white-space: nowrap; + } + + // Button sizes + .button--full { + width: 100%; + } diff --git a/_sass/layout.scss b/_sass/layout.scss index fae7e9cda7..9f4c84b38f 100644 --- a/_sass/layout.scss +++ b/_sass/layout.scss @@ -104,28 +104,11 @@ img { margin: 0 auto; } -a.button, input[type=submit], input[type=button] { - display: inline-block; - margin: 0.25em 0.25em 0.25em 0; - padding: 0.5em 1em; - background-color: $color-light; - font-weight: 600; - color: #fff; - border: 0; - - &.primary { - background-color: $color-primary; - } - - &.secondary { - background-color: $color-secondary; - } -} - pre{ overflow: auto; padding: 10px 15px; - border-radius: 5px; + border-radius: 2px; + line-height: 1em; } code { @@ -136,6 +119,9 @@ code { color: $space; background-color: $grey-bg; padding: 4px 7px; + white-space: nowrap; + font-weight: 600; + border-radius: 2px; } .highlight { @@ -148,13 +134,12 @@ blockquote { border: 1px solid $grey-smoke; margin: 2em 1em; padding: 15px; - border-radius: 5px; + border-radius: 2px; } .wrapper { max-width: $content-width; margin: 0 auto; - padding: 0 1em; &.main { display: flex; @@ -200,46 +185,32 @@ blockquote { } .edit-github{ - display: flex; - - margin: auto; - justify-content: end; - width: max-content; - text-align: right; padding-top: 2em; - - &-button { - display: flex; - background-color: #5cb85c; - border: 2px #4cae4c solid; - color: #fff; - padding: 15px 20px; - - border-radius: 5px; - } - .github-icon { - filter: invert(100%); - margin-right: 10px; - } } -.edit-github a, .edit-github a:visited { +.edit-github a, .edit-github a:visited, .edit-github a:hover { color: #fff; text-decoration: none; } .search { margin-right: 14px; + + .algolia-autocomplete{ + width: 100% + } + input { - padding: 0 10px 0 30px; + padding: 0 10px 0 35px; border: 1px solid #444; - height: 30px; + height: 44px; display: inline-block; background-color: #fff; color: #333; - border-radius: 10px; - width: 240px; + border-radius: 2px; + width: 100%; transition: all 0.3s ease 0s; + font-size: 0.8em; &:focus { outline: none; @@ -253,12 +224,9 @@ blockquote { margin-top: 1em; display: flex; align-items: center; - .algolia-autocomplete{ - width: 100% - } input { - border-radius: 3px; + border-radius: 2px; background-color: #f6f7f9; color: #000; width: 100%; @@ -302,8 +270,8 @@ blockquote { position: absolute; width: 16px; height: 16px; - margin-top: 7px; - margin-left: 6px; + margin-top: 14px; + margin-left: 10px; z-index: 2; } } @@ -318,8 +286,7 @@ main { .toc { width: $toc-width; overflow-y: auto; - padding: 1em; - border-right: 1px solid #ddd; + padding: 1em 1em 1em 0; font-size: 0.9em; li { @@ -355,9 +322,11 @@ main { } .content { - width: calc(100% - 340px); - padding: 0 1em 1em 1em; + width: 100%; + padding: 0 0 1em 1em; min-height: 100vh; + border-left: 1px solid #ddd; + } .burger { @@ -446,6 +415,46 @@ main { width: 100%; } +// Custom data table styles... +td > code { + background: none; +} + +.content table { + display: table; + width: 100%; + margin: 1rem auto; + border-top: 1px solid #bfbfbf; + border-collapse: collapse; + border-spacing: 0; +} +.content table thead th { + font-size: 18px; + line-height: 22px; + padding: 12px 9px; + font-weight: bold; + text-align: left; + vertical-align: top; +} +.content table tbody { + border-bottom: 1px solid #bfbfbf; +} +.content table tbody td { + font-size: 16px; + line-height: 22px; + padding: 12px 9px; + font-weight: normal; + text-align: left; + vertical-align: top; +} +.content table tbody tr:nth-child(odd) td { + background: #EEE; +} +.content table tbody tr:nth-child(even) td { + background: transparent; +} + + @media all and (min-width: 2000px) { .project-list { grid-template-columns: repeat(3, 0.8fr); diff --git a/_sass/variables.scss b/_sass/variables.scss index 6a9ec68ff2..7bb52a840c 100644 --- a/_sass/variables.scss +++ b/_sass/variables.scss @@ -1,4 +1,4 @@ -$content-width: 1150px; +$content-width: 1125px; $line-height: 1.58; $font-size: 16px; @@ -11,7 +11,7 @@ $color-light: #929db3; $padding: 2em; -$toc-width: 340px; +$toc-width: 280px; // 1. Fonts $font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, diff --git a/images/icons/github--white.svg b/images/icons/github--white.svg new file mode 100644 index 0000000000..c4f8ddd803 --- /dev/null +++ b/images/icons/github--white.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/styles.scss b/styles.scss index 8949e9726b..b065f24c1a 100644 --- a/styles.scss +++ b/styles.scss @@ -11,38 +11,4 @@ @import "header"; @import "footer"; @import "layout"; - -// Custom data table styles... -.content table { - display: table; - width: 75%; - margin: 1rem auto; - border-top: 1px solid #bfbfbf; - border-collapse: collapse; - border-spacing: 0; -} -.content table thead th { - font-size: 18px; - line-height: 22px; - padding: 12px 9px; - font-weight: bold; - text-align: left; - vertical-align: top; -} -.content table tbody { - border-bottom: 1px solid #bfbfbf; -} -.content table tbody td { - font-size: 16px; - line-height: 22px; - padding: 12px 9px; - font-weight: normal; - text-align: left; - vertical-align: top; -} -.content table tbody tr:nth-child(odd) td { - background: #EEE; -} -.content table tbody tr:nth-child(even) td { - background: transparent; -} +@import "buttons";