diff options
Diffstat (limited to 'style.scss')
-rw-r--r-- | style.scss | 357 |
1 files changed, 0 insertions, 357 deletions
diff --git a/style.scss b/style.scss deleted file mode 100644 index 92447172..00000000 --- a/style.scss +++ /dev/null @@ -1,357 +0,0 @@ ---- ---- - -$breakpoint: 50rem; -$primary: #206bc4; -$border: #eeeeee; -$muted: #aaaaaa; -$dark: #354052; -$light: #fafbfc; -$btn-form-height: 2rem; -$hover: rgba(0, 0, 0, .04); - -* { - box-sizing: border-box; - margin: 0; - padding: 0; -} - -html { - font-size: 16px; - font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; -} - -body { - background: #fafbfc; - font-size: .9375rem; - color: $dark; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -a { - color: $primary; - text-decoration: none; - - &:hover { - text-decoration: underline; - } -} - -.container { - max-width: 60rem; - margin: 0 auto; - padding: 1rem; - - @media (max-width: #{$breakpoint}) { - padding: 0; - } -} - -.row { - display: flex; - flex-direction: column; - - @media (min-width: #{$breakpoint}) { - flex-direction: row; - } -} - -.col { - flex: 1; -} - -.col-aside { - width: 15rem; - margin-top: 2rem; - display: flex; - flex-direction: column; - - @media (min-width: #{$breakpoint}) { - margin-top: 0; - margin-left: 2rem; - } -} - -.box { - padding: 2rem; - background: #ffff; - box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 1px 1px rgba(0, 0, 0, .1); - - @media (max-width: #{$breakpoint}) { - padding: .5rem; - box-shadow: none; - } -} - -.icon-title { - font-size: 1.25rem; - line-height: 1; - margin: 0 0 3rem; - font-weight: 600; -} - -.icon-subtitle { - font-size: 1rem; - line-height: 1; - margin: 0 0 1rem; - font-weight: 600; -} - -.icon-preview-wrap { - position: relative; - - &:before { - content: ''; - padding-top: 100%; - display: block; - } -} - -.icon-preview { - position: absolute; - width: 100%; - height: 100%; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: url(bg.svg) no-repeat center/100%; - - svg { - width: 100%; - height: 100%; - opacity: .8; - - + svg { - stroke-width: .08; - opacity: 1; - stroke: red; - position: absolute; - left: 0; - top: 0; - pointer-events: none; - - stroke-dasharray: 0 !important; - - * { - stroke-dasharray: 0 !important; - } - } - } -} - - -.icons-list { - display: flex; - flex-wrap: wrap; - margin: -.25rem; -} - -.icons-list-borders { - .icons-list-icon { - border-color: $dark; - } -} - -.icons-list-squares, -.icons-list-circles { - .icons-list-icon { - background: $dark; - color: $light; - } -} - -.icons-list-circles { - .icons-list-icon { - border-radius: 50%; - } -} - -.icons-list-icon { - margin: .25rem; - min-width: 2.25rem; - height: 2.25rem; - color: inherit; - border-radius: 3px; - display: inline-flex; - align-items: center; - justify-content: center; - border: 1px solid transparent; - - @at-root a#{&}:hover { - opacity: .75; - } - - .icon { - display: block; - width: 1.5rem; - height: 1.5rem; - } -} - -.mb { - margin-bottom: 2rem; -} - -.mt-auto { - margin-top: auto; -} - - -/* -Components - */ -.btn { - display: inline-flex; - color: #ffffff; - background: $primary; - border: 0; - border-radius: 3px; - font-size: inherit; - line-height: 1; - justify-content: center; - align-items: center; - min-height: $btn-form-height; - min-width: $btn-form-height; - padding: 0 .75rem; - - .icon { - width: 1rem; - height: 1rem; - margin: 0 .5rem 0 -.25rem; - } -} - -.btn-icon { - padding: 0; - justify-content: center; - - .icon { - margin: 0; - } -} - -.btn-link { - background: transparent; - color: $primary; -} - -.input { - border: 1px solid $border; - border-radius: 3px; - height: $btn-form-height; - display: block; - font-size: inherit; - font-family: inherit; - padding: 0 .5rem; - width: 100%; - - &:focus { - outline: 0; - box-shadow: 0 0 0 3px rgba($primary, .1); - border-color: rgba($primary, .4); - } -} - -.icon { - width: 1em; - height: 1em; - vertical-align: -.15em; -} - -.input-icon { - position: relative; - - .input { - padding-right: 2rem; - } - - .icon { - color: $muted; - width: 1.25rem; - height: 1.25rem; - position: absolute; - top: ($btn-form-height - 1.25rem) / 2; - right: ($btn-form-height - 1.25rem) / 2; - stroke-width: 1.75; - } - - &.icon-left { - .icon { - left: ($btn-form-height - 1.25rem) / 2; - right: auto; - } - - .input { - padding-left: 2rem; - padding-right: 0; - } - } -} - -.avatar { - background: rgba($muted, .1); - color: $muted; - display: inline-flex; - width: 2.5rem; - height: 2.5rem; - align-items: center; - justify-content: center; - border-radius: 50%; - vertical-align: bottom; - - .icon { - height: 60%; - width: 60%; - } -} - -.avatar-sm { - width: 1.5rem; - height: 1.5rem; -} - -.tabs { - display: flex; - - .tab { - flex: 1; - text-align: center; - border-bottom: 1px solid $border; - padding: .25rem 0; - color: inherit; - text-decoration: none; - cursor: pointer; - - &.active { - color: $primary; - border-bottom-color: $primary; - } - - .icon { - width: 1rem; - height: 1rem; - } - } -} - -.input-range { - width: 100%; -} - - -.icon-size { - display: inline-block; - - svg { - width: 100%; - height: 100%; - } -} - -.icon-size-16 { width: 16px; } -.icon-size-24 { width: 24px; } -.icon-size-32 { width: 32px; } -.icon-size-48 { width: 48px; } -.icon-size-64 { width: 64px; } |