diff options
author | kibigo! <marrus-sh@users.noreply.github.com> | 2018-01-03 12:36:21 -0800 |
---|---|---|
committer | kibigo! <marrus-sh@users.noreply.github.com> | 2018-01-04 18:33:13 -0800 |
commit | 42f50049ff29ccdc484c22f8a5a19cda2dd03a5b (patch) | |
tree | 5e04c0bc0106f634316202eb8dc2f8c356d1b556 /app/javascript/flavours/glitch/styles/components | |
parent | b4a3792201ccc01713b536e50428e027bd094d2b (diff) |
WIP <Compose> Refactor; 1000 tiny edits
Diffstat (limited to 'app/javascript/flavours/glitch/styles/components')
3 files changed, 265 insertions, 266 deletions
diff --git a/app/javascript/flavours/glitch/styles/components/composer.scss b/app/javascript/flavours/glitch/styles/components/composer.scss index ae9114644..4b09d80d6 100644 --- a/app/javascript/flavours/glitch/styles/components/composer.scss +++ b/app/javascript/flavours/glitch/styles/components/composer.scss @@ -1,22 +1,24 @@ .composer { padding: 10px } .composer--spoiler { - display: block; - box-sizing: border-box; - margin: 0; - border: none; - border-radius: 4px; - padding: 10px; - width: 100%; - outline: 0; - color: $ui-base-color; - background: $simple-background-color; - font-size: 14px; - font-family: inherit; - resize: vertical; + input { + display: block; + box-sizing: border-box; + margin: 0; + border: none; + border-radius: 4px; + padding: 10px; + width: 100%; + outline: 0; + color: $ui-base-color; + background: $simple-background-color; + font-size: 14px; + font-family: inherit; + resize: vertical; - &:focus { outline: 0 } - @include single-column('screen and (max-width: 630px)') { font-size: 16px } + &:focus { outline: 0 } + @include single-column('screen and (max-width: 630px)') { font-size: 16px } + } } .composer--warning { @@ -116,33 +118,33 @@ } .composer--textarea { - background: $simple-background-color; position: relative; - &:disabled { background: $ui-secondary-color } - - & > .textarea { - display: block; - box-sizing: border-box; - margin: 0; - border: none; - border-radius: 4px 4px 0 0; - padding: 10px 32px 0 10px; - width: 100%; - min-height: 100px; - outline: 0; - color: $ui-base-color; - background: $simple-background-color; - font-size: 14px; - font-family: inherit; - resize: none; + & > label { + .textarea { + display: block; + box-sizing: border-box; + margin: 0; + border: none; + border-radius: 4px 4px 0 0; + padding: 10px 32px 0 10px; + width: 100%; + min-height: 100px; + outline: 0; + color: $ui-base-color; + background: $simple-background-color; + font-size: 14px; + font-family: inherit; + resize: none; - &:focus { outline: 0 } - @include single-column('screen and (max-width: 630px)') { font-size: 16px } + &:disabled { background: $ui-secondary-color } + &:focus { outline: 0 } + @include single-column('screen and (max-width: 630px)') { font-size: 16px } - @include limited-single-column('screen and (max-width: 600px)') { - height: 100px !important; // prevent auto-resize textarea - resize: vertical; + @include limited-single-column('screen and (max-width: 600px)') { + height: 100px !important; // prevent auto-resize textarea + resize: vertical; + } } } } @@ -192,15 +194,18 @@ } .composer--upload_form { - display: flex; - flex-direction: row; - flex-wrap: wrap; padding: 5px; color: $ui-base-color; background: $simple-background-color; font-size: 14px; - font-family: inherit; - overflow: hidden; + + & > .content { + display: flex; + flex-direction: row; + flex-wrap: wrap; + font-family: inherit; + overflow: hidden; + } } .composer--upload_form--item { @@ -254,17 +259,61 @@ } } +.composer--upload_form--progress { + display: flex; + padding: 10px; + color: $ui-base-lighter-color; + overflow: hidden; + + & > .fa { + font-size: 34px; + margin-right: 10px; + } + + & > .message { + flex: 1 1 auto; + + & > span { + display: block; + font-size: 12px; + font-weight: 500; + text-transform: uppercase; + } + + & > .backdrop { + position: relative; + margin-top: 5px; + border-radius: 6px; + width: 100%; + height: 6px; + background: $ui-base-lighter-color; + + & > .tracker { + position: absolute; + top: 0; + left: 0; + height: 6px; + border-radius: 6px; + background: $ui-highlight-color; + } + } + } +} + .composer--options { padding: 10px; background: darken($simple-background-color, 8%); box-shadow: inset 0 5px 5px rgba($base-shadow-color, 0.05); border-radius: 0 0 4px 4px; + height: 27px; & > * { display: inline-block; box-sizing: content-box; padding: 0 3px; + height: 27px; line-height: 27px; + vertical-align: bottom; } & > hr { @@ -274,26 +323,26 @@ border-style: none none none solid; border-color: transparent transparent transparent darken($simple-background-color, 24%); padding: 0; + width: 0; + height: 27px; background: transparent; } } .composer--options--dropdown { - & > .value { transition: none } - - &.active { + &.open { & > .value { border-radius: 4px 4px 0 0; box-shadow: 0 -4px 4px rgba($base-shadow-color, 0.1); color: $primary-text-color; background: $ui-highlight-color; + transition: none; } } } -.composer--options--dropdown__dropdown { +.composer--options--dropdown--content { position: absolute; - margin-left: 40px; border-radius: 4px; box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4); background: $simple-background-color; @@ -301,11 +350,12 @@ transform-origin: 50% 0; } -.composer--options--dropdown--item { - color: $ui-base-color; +.composer--options--dropdown--content--item { + display: flex; + align-items: center; padding: 10px; + color: $ui-base-color; cursor: pointer; - display: flex; & > .content { flex: 1 1 auto; @@ -344,7 +394,6 @@ & > .count { display: inline-block; margin: 0 16px 0 8px; - padding-top: 10px; font-size: 16px; line-height: 36px; } diff --git a/app/javascript/flavours/glitch/styles/components/drawer.scss b/app/javascript/flavours/glitch/styles/components/drawer.scss index 8ad55c79b..ebf996907 100644 --- a/app/javascript/flavours/glitch/styles/components/drawer.scss +++ b/app/javascript/flavours/glitch/styles/components/drawer.scss @@ -4,7 +4,7 @@ box-sizing: border-box; padding: 10px 5px; width: 300px; - flex: 1 1 100%; + flex: none; contain: strict; &:first-child { @@ -15,10 +15,10 @@ padding-right: 10px; } - @include multi-columns('screen and (max-width: 630px)') { - &, &:first-child, &:last-child { - padding: 0; - } + @include single-column('screen and (max-width: 630px)') { flex: auto } + + @include limited-single-column('screen and (max-width: 630px)') { + &, &:first-child, &:last-child { padding: 0 } } .wide & { @@ -27,207 +27,196 @@ flex: 1 1 200px; } - .react-swipeable-view-container & { + @include single-column('screen and (max-width: 630px)') { + :root & { // Overrides `.wide` for single-column view + flex: auto; + width: 100%; + min-width: 0; + max-width: none; + padding: 0; + } + } + + .react-swipeable-view-container & { height: 100% } + + & > .contents { + position: relative; + padding: 0; + width: 100%; height: 100%; + background: lighten($ui-base-color, 13%); + overflow-x: hidden; + overflow-y: auto; + contain: strict; + } +} + +.drawer--header { + display: flex; + flex-direction: row; + margin-bottom: 10px; + flex: none; + background: lighten($ui-base-color, 8%); + font-size: 16px; + + & > * { + display: block; + box-sizing: border-box; + border-bottom: 2px solid transparent; + padding: 15px 5px 13px; + height: 48px; + flex: 1 1 auto; + color: $ui-primary-color; + text-align: center; + text-decoration: none; + cursor: pointer; } - .drawer--header { - display: flex; - flex-direction: row; - margin-bottom: 10px; - flex: none; - background: lighten($ui-base-color, 8%); - font-size: 16px; + a { + transition: background 100ms ease-in; - & > * { - display: block; - box-sizing: border-box; - border-bottom: 2px solid transparent; - padding: 15px 5px 13px; - height: 48px; - flex: 1 1 auto; - color: $ui-primary-color; - text-align: center; - text-decoration: none; - cursor: pointer; + &:focus, + &:hover { + outline: none; + background: lighten($ui-base-color, 3%); + transition: background 200ms ease-out; } + } +} - a { - transition: background 100ms ease-in; +.drawer--search { + position: relative; + margin-bottom: 10px; + flex: none; - &:focus, - &:hover { - outline: none; - background: lighten($ui-base-color, 3%); - transition: background 200ms ease-out; - } + @include limited-single-column('screen and (max-width: 360px)') { margin-bottom: 0 } + @include single-column('screen and (max-width: 630px)') { font-size: 16px } + + input { + display: block; + box-sizing: border-box; + margin: 0; + border: none; + padding: 10px 30px 10px 10px; + width: 100%; + height: 36px; + outline: 0; + color: $ui-primary-color; + background: $ui-base-color; + font-size: 14px; + font-family: inherit; + line-height: 16px; + + &:focus { + outline: 0; + background: lighten($ui-base-color, 4%); } } - .drawer--search { - position: relative; - margin-bottom: 10px; - flex: none; + & > .icon { + .fa { + display: inline-block; + position: absolute; + top: 10px; + right: 10px; + width: 18px; + height: 18px; + color: $ui-secondary-color; + font-size: 18px; + opacity: 0; + cursor: default; + pointer-events: none; + z-index: 2; + transition: all 100ms linear; + } - @include limited-single-column('screen and (max-width: 360px)') { - margin-bottom: 0; + .fa-search { + opacity: 0.3; + transform: rotate(0deg); } - input { - display: block; - box-sizing: border-box; - margin: 0; - border: none; - padding: 10px 30px 10px 10px; - width: 100%; - height: 36px; - outline: 0; - color: $ui-primary-color; - background: $ui-base-color; - font-size: 14px; - font-family: inherit; - line-height: 16px; + .fa-times-circle { + top: 11px; + transform: rotate(-90deg); + cursor: pointer; - &:focus { - outline: 0; - background: lighten($ui-base-color, 4%); - } + &:hover { color: $primary-text-color } } - & > .icon { - .fa { - display: inline-block; - position: absolute; - top: 10px; - right: 10px; - width: 18px; - height: 18px; - color: $ui-secondary-color; - font-size: 18px; + &.active { + .fa-search { opacity: 0; - cursor: default; - pointer-events: none; - z-index: 2; - transition: all 100ms linear; + transform: rotate(90deg); } - .fa-search { + .fa-times-circle { opacity: 0.3; + pointer-events: auto; transform: rotate(0deg); } - - .fa-times-circle { - top: 11px; - transform: rotate(-90deg); - cursor: pointer; - - &:hover { - color: $primary-text-color; - } - } - - &.active { - .fa-search { - opacity: 0; - transform: rotate(90deg); - } - - .fa-times-circle { - opacity: 0.3; - pointer-events: auto; - transform: rotate(0deg); - } - } } } +} - & > .contents { - position: relative; - padding: 0; - width: 100%; - height: 100%; - background: lighten($ui-base-color, 13%); - overflow-x: hidden; - overflow-y: auto; - contain: strict; - - .drawer--account { - padding: 10px; - color: $ui-primary-color; +.drawer--account { + padding: 10px; + color: $ui-primary-color; - & > a { - color: inherit; - text-decoration: none; - } + & > a { + color: inherit; + text-decoration: none; + } - & > .avatar { - float: left; - margin-right: 10px; - } + & > .avatar { + float: left; + margin-right: 10px; + } - & > .acct { - display: block; - color: $primary-text-color; - font-weight: 500; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - } + & > .acct { + display: block; + color: $primary-text-color; + font-weight: 500; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } +} - .drawer--results { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - padding: 0; - background: $ui-base-color; - overflow-x: hidden; - overflow-y: auto; - contain: strict; - - & > header { - border-bottom: 1px solid darken($ui-base-color, 4%); - padding: 15px 10px; - color: $ui-base-lighter-color; - background: lighten($ui-base-color, 2%); - font-size: 14px; - font-weight: 500; - } +.drawer--results { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + padding: 0; + background: $ui-base-color; + overflow-x: hidden; + overflow-y: auto; + contain: strict; - & > section { - background: $ui-base-color; - - & > .hashtag { - display: block; - padding: 10px; - color: $ui-secondary-color; - text-decoration: none; - - &:hover, - &:active, - &:focus { - color: lighten($ui-secondary-color, 4%); - text-decoration: underline; - } - } - } - } + & > header { + border-bottom: 1px solid darken($ui-base-color, 4%); + padding: 15px 10px; + color: $ui-base-lighter-color; + background: lighten($ui-base-color, 2%); + font-size: 14px; + font-weight: 500; } -} -:root { // Overrides .wide stylings for mobile view - @include single-column('screen and (max-width: 630px)', $parent: null) { - .drawer { - flex: auto; - width: 100%; - min-width: 0; - max-width: none; - padding: 0; + & > section { + background: $ui-base-color; - .drawer--search input { - font-size: 16px; + & > .hashtag { + display: block; + padding: 10px; + color: $ui-secondary-color; + text-decoration: none; + + &:hover, + &:active, + &:focus { + color: lighten($ui-secondary-color, 4%); + text-decoration: underline; } } } diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss index 98ed5d24a..0ce0dafc9 100644 --- a/app/javascript/flavours/glitch/styles/components/index.scss +++ b/app/javascript/flavours/glitch/styles/components/index.scss @@ -2704,47 +2704,6 @@ border-radius: 4px; } -.upload-progress { - padding: 10px; - color: $ui-base-lighter-color; - overflow: hidden; - display: flex; - - .fa { - font-size: 34px; - margin-right: 10px; - } - - span { - font-size: 12px; - text-transform: uppercase; - font-weight: 500; - display: block; - } -} - -.upload-progess__message { - flex: 1 1 auto; -} - -.upload-progress__backdrop { - width: 100%; - height: 6px; - border-radius: 6px; - background: $ui-base-lighter-color; - position: relative; - margin-top: 5px; -} - -.upload-progress__tracker { - position: absolute; - left: 0; - top: 0; - height: 6px; - background: $ui-highlight-color; - border-radius: 6px; -} - .emoji-button { display: block; font-size: 24px; @@ -3339,6 +3298,7 @@ max-width: 80vw; strong { + display: block; font-weight: 500; } @@ -3368,6 +3328,7 @@ color: $primary-text-color; } + & > .react-toggle, & > .icon { margin-right: 10px; } |