diff options
author | codecalm <codecalm@gmail.com> | 2020-03-09 22:04:18 +0100 |
---|---|---|
committer | codecalm <codecalm@gmail.com> | 2020-03-09 22:04:18 +0100 |
commit | 13dc327e8e61ac61bf2fbc75cbefd316412cb9e5 (patch) | |
tree | 01a5a727481e76bdd5ec3bb8deb4d9e4d0fcb672 /src/editor.scss | |
parent | crop, copyright, rotate (diff) | |
download | tabler-icons-13dc327e8e61ac61bf2fbc75cbefd316412cb9e5.tar.xz |
folder clean
Diffstat (limited to 'src/editor.scss')
-rw-r--r-- | src/editor.scss | 357 |
1 files changed, 357 insertions, 0 deletions
diff --git a/src/editor.scss b/src/editor.scss new file mode 100644 index 0000000..9244717 --- /dev/null +++ b/src/editor.scss @@ -0,0 +1,357 @@ +--- +--- + +$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; } |