diff options
author | kibigo! <marrus-sh@users.noreply.github.com> | 2017-08-01 13:07:43 -0700 |
---|---|---|
committer | kibigo! <marrus-sh@users.noreply.github.com> | 2017-08-01 13:20:29 -0700 |
commit | 8150689b48716bb016d492d28cef08600a4b315e (patch) | |
tree | a05a2539e894c79ef17698dce0da5a6af0c25bf6 /app/javascript/styles/components.scss | |
parent | b61e3daf983d87c6d2de7e54d420c2e8f5a531e6 (diff) | |
parent | 7ef848256871454a790a9b7cc725053c67ba3da4 (diff) |
Merge upstream (#111)
Diffstat (limited to 'app/javascript/styles/components.scss')
-rw-r--r-- | app/javascript/styles/components.scss | 104 |
1 files changed, 77 insertions, 27 deletions
diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss index fe74bae84..fa604df5c 100644 --- a/app/javascript/styles/components.scss +++ b/app/javascript/styles/components.scss @@ -149,12 +149,16 @@ color: $ui-base-lighter-color; } + &.disabled { + color: $ui-primary-color; + } + &.active { color: $ui-highlight-color; - } - &.disabled { - color: $ui-primary-color; + &.disabled { + color: lighten($ui-highlight-color, 13%); + } } } @@ -215,16 +219,18 @@ } .dropdown--active::after { - content: ""; - display: block; - position: absolute; - width: 0; - height: 0; - border-style: solid; - border-width: 0 4.5px 7.8px; - border-color: transparent transparent $ui-secondary-color; - bottom: 8px; - right: 104px; + @media screen and (min-width: 1025px) { + content: ""; + display: block; + position: absolute; + width: 0; + height: 0; + border-style: solid; + border-width: 0 4.5px 7.8px; + border-color: transparent transparent $ui-secondary-color; + bottom: 8px; + right: 104px; + } } .invisible { @@ -1837,6 +1843,8 @@ cursor: pointer; flex: 0 0 auto; font-size: 16px; + border: 0; + text-align: start; padding: 15px; z-index: 3; @@ -1999,12 +2007,6 @@ &:hover { background: lighten($ui-base-color, 11%); } - - &.hidden-on-mobile { - @include single-column('screen and (max-width: 1024px)') { - display: none; - } - } } .column-link__icon { @@ -2388,12 +2390,6 @@ button.icon-button.active i.fa-retweet { } } - &.hidden-on-mobile { - @include single-column('screen and (max-width: 1024px)') { - display: none; - } - } - &:focus, &:active { outline: 0; @@ -2672,6 +2668,8 @@ button.icon-button.active i.fa-retweet { cursor: pointer; display: flex; flex-direction: column; + border: 0; + width: 100%; height: 100%; justify-content: center; position: relative; @@ -2754,6 +2752,7 @@ button.icon-button.active i.fa-retweet { align-items: center; background: rgba($base-overlay-background, 0.5); box-sizing: border-box; + border: 0; color: $primary-text-color; cursor: pointer; display: flex; @@ -3848,7 +3847,8 @@ button.icon-button.active i.fa-retweet { .boost-modal, .confirmation-modal, -.report-modal { +.report-modal, +.actions-modal { background: lighten($ui-secondary-color, 8%); color: $ui-base-color; border-radius: 8px; @@ -3873,6 +3873,15 @@ button.icon-button.active i.fa-retweet { } } +.actions-modal { + .status { + background: $white; + border-bottom-color: $ui-secondary-color; + padding-top: 10px; + padding-bottom: 10px; + } +} + .boost-modal__container { overflow-x: scroll; padding: 10px; @@ -3914,7 +3923,7 @@ button.icon-button.active i.fa-retweet { } .confirmation-modal { - max-width: 280px; + max-width: 85vw; @media screen and (min-width: 480px) { max-width: 380px; @@ -3939,6 +3948,47 @@ button.icon-button.active i.fa-retweet { } } +.actions-modal { + .status { + overflow-y: auto; + max-height: 300px; + } + + max-height: 80vh; + max-width: 80vw; + + ul { + overflow-y: auto; + flex-shrink: 0; + + li:empty { + margin: 0; + } + + li:not(:empty) { + a { + color: $ui-base-color; + display: flex; + padding: 10px; + align-items: center; + text-decoration: none; + + &.active { + &, + button { + background: $ui-highlight-color; + color: $primary-text-color; + } + } + + button:first-child { + margin-right: 10px; + } + } + } + } +} + .confirmation-modal__action-bar { .confirmation-modal__cancel-button { background-color: transparent; |