From 6dea671fde5f3868ffeaa527865549235d9cbd8b Mon Sep 17 00:00:00 2001 From: Anders Kaseorg Date: Wed, 5 Aug 2020 17:34:58 -0700 Subject: [PATCH] styles: Merge duplicate selectors. Signed-off-by: Anders Kaseorg --- static/styles/alerts.scss | 5 +- static/styles/compose.scss | 18 ++- static/styles/night_mode.scss | 4 - static/styles/popovers.scss | 20 ++- static/styles/portico/landing-page.scss | 24 +--- static/styles/portico/portico.scss | 10 +- static/styles/settings.scss | 176 ++++++++++++------------ static/styles/widgets.scss | 30 ++-- static/styles/zulip.scss | 19 +-- stylelint.config.js | 1 - 10 files changed, 128 insertions(+), 179 deletions(-) diff --git a/static/styles/alerts.scss b/static/styles/alerts.scss index 8a42f33d16..f93cf7c210 100644 --- a/static/styles/alerts.scss +++ b/static/styles/alerts.scss @@ -57,10 +57,7 @@ $alert-error-red: hsl(0, 80%, 40%); overscroll-behavior: contain; .stacktrace { - @extend .alert-display; - } - .stacktrace { - @extend .alert-animations; + @extend .alert-display, .alert-animations; font-size: 1rem; color: hsl(0, 80%, 40%); diff --git a/static/styles/compose.scss b/static/styles/compose.scss index 739dfa241e..b69ef5d0c2 100644 --- a/static/styles/compose.scss +++ b/static/styles/compose.scss @@ -45,6 +45,14 @@ .compose-content { border-top: 1px solid hsla(0, 0%, 0%, 0.07); transition: background-color 200ms linear; + + padding: 8px 10px 8px 10px; + margin-left: 250px; + margin-right: 250px; + position: relative; + + border-left: 1px solid hsl(0, 0%, 93%); + border-right: 1px solid hsl(0, 0%, 93%); } .ztable_comp_col1 { @@ -165,16 +173,6 @@ margin: auto; } -.compose-content { - padding: 8px 10px 8px 10px; - margin-left: 250px; - margin-right: 250px; - position: relative; - - border-left: 1px solid hsl(0, 0%, 93%); - border-right: 1px solid hsl(0, 0%, 93%); -} - #compose_close { display: none; position: absolute; diff --git a/static/styles/night_mode.scss b/static/styles/night_mode.scss index 70a20f28da..3efc713d3b 100644 --- a/static/styles/night_mode.scss +++ b/static/styles/night_mode.scss @@ -236,10 +236,6 @@ on a dark background, and don't change the dark labels dark either. */ .message-header-contents, .message_header_private_message .message-header-contents { background-color: hsla(0, 0%, 0%, 0.2); - } - - .message-header-contents, - .message_header_private_message .message-header-contents { border-color: transparent; } diff --git a/static/styles/popovers.scss b/static/styles/popovers.scss index d275ff27a6..203168b833 100644 --- a/static/styles/popovers.scss +++ b/static/styles/popovers.scss @@ -167,6 +167,15 @@ ul { margin: -14px; padding: 0; + + .popover-title { + padding: 0; + border-color: hsla(0, 0%, 0%, 0.2); + } + + .popover_info li { + word-wrap: break-word; + } } .message-info-popover { @@ -228,17 +237,6 @@ ul { } } -.user_popover { - .popover-title { - padding: 0; - border-color: hsla(0, 0%, 0%, 0.2); - } - - .popover_info li { - word-wrap: break-word; - } -} - .popover-avatar { height: 240px; width: 240px; diff --git a/static/styles/portico/landing-page.scss b/static/styles/portico/landing-page.scss index 1134b954d7..b080501d59 100644 --- a/static/styles/portico/landing-page.scss +++ b/static/styles/portico/landing-page.scss @@ -351,9 +351,7 @@ nav { padding-top: 120px; z-index: 1; -} -.portico-landing { &.show { opacity: 1; } @@ -2057,9 +2055,6 @@ nav { .portico-landing.apps .hero h1 { font-size: 3em; margin-bottom: 0px; -} - -.portico-landing.apps .hero h1 { margin-top: 0px; } @@ -3303,9 +3298,6 @@ nav { .portico-landing.why-page .hero { padding-left: 20px; padding-right: 20px; - } - - .portico-landing.why-page .hero { font-size: 0.6em; } @@ -3464,28 +3456,24 @@ nav { } nav { - ul { - margin-top: 0px; - text-align: left; - } - - .content { - display: inline-block; - z-index: 11; - } - .hamburger { display: inline-block; float: right; } .content { + display: inline-block; + z-index: 11; + > ul.show { outline-color: hsla(203, 43%, 22%, 0.7); } } ul { + margin-top: 0px; + text-align: left; + position: fixed; float: none; top: 0; diff --git a/static/styles/portico/portico.scss b/static/styles/portico/portico.scss index f9c19bec88..947021505a 100644 --- a/static/styles/portico/portico.scss +++ b/static/styles/portico/portico.scss @@ -54,7 +54,7 @@ html { .header { position: relative; - padding: 6px 0px; + padding: 15px 0; height: 29px; background-color: hsl(0, 0%, 100%); @@ -545,10 +545,6 @@ input.text-error { /* -- end new footer -- */ -.header { - padding: 15px 0; -} - .header-main { .logo { display: block; @@ -1594,10 +1590,6 @@ label.label-title { font-weight: 600; } -input.new-organization-button { - margin-left: auto; -} - .inline-block { display: inline-block; vertical-align: top; diff --git a/static/styles/settings.scss b/static/styles/settings.scss index e7ecde4fb1..57ab7abd26 100644 --- a/static/styles/settings.scss +++ b/static/styles/settings.scss @@ -455,95 +455,6 @@ input[type="checkbox"] { } } -#settings_page { - .icon-button { - border-radius: 5px; - border: 1px solid hsl(0, 0%, 80%); - font-size: 14px; - padding: 3px 14px 4px 11px; - text-decoration: none; - color: hsl(0, 0%, 47%); - min-width: 80px; - line-height: 16px; - - &:hover { - background-color: hsl(0, 0%, 100%); - border: 1px solid hsl(0, 0%, 61%); - color: hsl(0, 0%, 18%); - - .icon-button-icon { - color: hsl(0, 0%, 47%); - } - } - - &.primary { - background-color: hsl(156, 30%, 50%); - color: hsl(0, 0%, 100%); - border: 1px solid hsl(155, 30%, 50%); - - &:hover { - background-color: hsl(166, 35%, 57%); - border: 1px solid hsl(166, 35%, 57%); - } - - .icon-button-icon { - font-weight: lighter; - color: hsl(0, 0%, 100%); - } - - &.saving { - background-color: hsl(156, 14%, 40%); - border-color: hsl(156, 14%, 40%); - } - } - - .icon-button-icon { - vertical-align: bottom; - margin-right: 3px; - margin-bottom: 1px; - font-size: 15px; - font-weight: 500; - } - } - - .save-button-controls { - display: inline; - margin-left: 15px; - - &.hide { - display: none; - } - } - - .save-button { - margin-right: 5px; - - .icon-button-loading { - display: none; - } - - &.saving { - .icon-button-icon { - display: none; - } - - .icon-button-loading { - display: inline-block; - margin-right: 2px; - } - } - } - - .admin-realm-time-limit-input { - width: 5ch; - text-align: right; - } - - .realm-time-limit-label { - vertical-align: middle; - } -} - .organization-settings-parent > div:first-of-type { margin-top: 10px; } @@ -1179,6 +1090,93 @@ input[type="checkbox"] { overflow: hidden; border-radius: 4px; + .icon-button { + border-radius: 5px; + border: 1px solid hsl(0, 0%, 80%); + font-size: 14px; + padding: 3px 14px 4px 11px; + text-decoration: none; + color: hsl(0, 0%, 47%); + min-width: 80px; + line-height: 16px; + + &:hover { + background-color: hsl(0, 0%, 100%); + border: 1px solid hsl(0, 0%, 61%); + color: hsl(0, 0%, 18%); + + .icon-button-icon { + color: hsl(0, 0%, 47%); + } + } + + &.primary { + background-color: hsl(156, 30%, 50%); + color: hsl(0, 0%, 100%); + border: 1px solid hsl(155, 30%, 50%); + + &:hover { + background-color: hsl(166, 35%, 57%); + border: 1px solid hsl(166, 35%, 57%); + } + + .icon-button-icon { + font-weight: lighter; + color: hsl(0, 0%, 100%); + } + + &.saving { + background-color: hsl(156, 14%, 40%); + border-color: hsl(156, 14%, 40%); + } + } + + .icon-button-icon { + vertical-align: bottom; + margin-right: 3px; + margin-bottom: 1px; + font-size: 15px; + font-weight: 500; + } + } + + .save-button-controls { + display: inline; + margin-left: 15px; + + &.hide { + display: none; + } + } + + .save-button { + margin-right: 5px; + + .icon-button-loading { + display: none; + } + + &.saving { + .icon-button-icon { + display: none; + } + + .icon-button-loading { + display: inline-block; + margin-right: 2px; + } + } + } + + .admin-realm-time-limit-input { + width: 5ch; + text-align: right; + } + + .realm-time-limit-label { + vertical-align: middle; + } + h3 { font-size: 1.5em; font-weight: normal; diff --git a/static/styles/widgets.scss b/static/styles/widgets.scss index edcc7915c8..16a532b5a6 100644 --- a/static/styles/widgets.scss +++ b/static/styles/widgets.scss @@ -76,6 +76,20 @@ button { border-color: hsl(157, 18%, 77%); padding: 0px; } + + &.add-task, + &.add-desc, + &.poll-option, + &.poll-question { + border-radius: 3px; + border: 1px solid hsl(0, 0%, 80%); + background-color: hsl(0, 0%, 100%); + width: 100px; + + &:hover { + border-color: hsl(0, 0%, 60%); + } + } } img.task-completed { @@ -93,22 +107,6 @@ button { } } -button { - &.add-task, - &.add-desc, - &.poll-option, - &.poll-question { - border-radius: 3px; - border: 1px solid hsl(0, 0%, 80%); - background-color: hsl(0, 0%, 100%); - width: 100px; - - &:hover { - border-color: hsl(0, 0%, 60%); - } - } -} - .widget-error { color: hsl(1, 45%, 50%); font-size: 12px; diff --git a/static/styles/zulip.scss b/static/styles/zulip.scss index 0a5a336a61..180b5fb49a 100644 --- a/static/styles/zulip.scss +++ b/static/styles/zulip.scss @@ -922,9 +922,6 @@ td.pointer { .summary_row { .message_header { padding: 5px 0px 4px 5px; - } - - .message_header { border-radius: 0; } @@ -2562,14 +2559,10 @@ select.inline_select_topic_edit { box-shadow: 0px 0px 5px hsla(0, 0%, 0%, 0.2); &::after { - right: 10px; + right: 21px; } } - .nav .dropdown-menu::after { - right: 21px; - } - .column-middle { margin-right: 7px; } @@ -2759,17 +2752,13 @@ select.inline_select_topic_edit { #message_view_header_underpadding { top: 30px; + height: 10px; } .messagebox-content { padding-right: 15px; } - .message_time { - right: auto; - left: -3px; - } - /* In mobile views we place it just to the right of the time element */ .message_controls { right: 40px; @@ -2794,10 +2783,6 @@ select.inline_select_topic_edit { line-height: 15px; } - #message_view_header_underpadding { - height: 10px; - } - #floating_recipient_bar { top: 40px; } diff --git a/stylelint.config.js b/stylelint.config.js index 3c62cccfc0..5e744bdef2 100644 --- a/stylelint.config.js +++ b/stylelint.config.js @@ -10,7 +10,6 @@ module.exports = { // Disable recommended rules we don't comply with yet "font-family-no-missing-generic-family-keyword": null, "no-descending-specificity": null, - "no-duplicate-selectors": null, // Disable standard rules we don't comply with yet "comment-empty-line-before": null,