diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss index 651bf08e02a..d1c9e353363 100644 --- a/app/assets/stylesheets/common.scss +++ b/app/assets/stylesheets/common.scss @@ -16,7 +16,6 @@ @import "common/select-kit/composer-actions"; @import "common/select-kit/dropdown-select-box"; @import "common/select-kit/future-date-input-selector"; -@import "common/select-kit/group-dropdown"; @import "common/select-kit/list-setting"; @import "common/select-kit/mini-tag-chooser"; @import "common/select-kit/multi-select"; @@ -25,7 +24,6 @@ @import "common/select-kit/pinned-button"; @import "common/select-kit/select-kit"; @import "common/select-kit/tag-chooser"; -@import "common/select-kit/tag-drop"; @import "common/select-kit/toolbar-popup-menu-options"; @import "common/select-kit/topic-notifications-button"; @import "common/components/*"; diff --git a/app/assets/stylesheets/common/base/_topic-list.scss b/app/assets/stylesheets/common/base/_topic-list.scss index 7dbb2d0c460..fdda1adc4a2 100644 --- a/app/assets/stylesheets/common/base/_topic-list.scss +++ b/app/assets/stylesheets/common/base/_topic-list.scss @@ -12,17 +12,29 @@ } .list-controls { + clear: both; + .combo-box .combo-box-header { + background: $primary-low; + color: $primary; + border: 1px solid transparent; + padding: 5px 6px 5px 10px; + font-size: $font-0; + transition: none; + } .select-kit { align-self: center; - + .select-kit-collection { + font-size: $font-down-1; + .texts, .icons { + font-size: $font-up-1; + } + } &.categories-admin-dropdown, &.category-notifications-button, &.tag-notifications-button { float: right; } } } - - - + .topic-list-item.visited, .latest-topic-list-item.visited, .category-topic-link.visited { @@ -209,10 +221,6 @@ } } -.list-controls { - clear: both; -} - #list-area { margin-bottom: 100px; .empty-topic-list { diff --git a/app/assets/stylesheets/common/base/user.scss b/app/assets/stylesheets/common/base/user.scss index cf97824e4fb..91f5ef5e2ac 100644 --- a/app/assets/stylesheets/common/base/user.scss +++ b/app/assets/stylesheets/common/base/user.scss @@ -25,6 +25,7 @@ .about { overflow: hidden; width: 100%; + margin-bottom: 15px; .secondary { background: $secondary; @@ -390,11 +391,6 @@ .user-nav { margin: 5px 0; - padding-top: 10px; - - li a { - color: dark-light-choose($primary-medium, $secondary-medium); - } } .top-section { diff --git a/app/assets/stylesheets/common/select-kit/category-drop.scss b/app/assets/stylesheets/common/select-kit/category-drop.scss index 9facf687ce3..3bc481336d0 100644 --- a/app/assets/stylesheets/common/select-kit/category-drop.scss +++ b/app/assets/stylesheets/common/select-kit/category-drop.scss @@ -1,7 +1,6 @@ .select-kit { &.combo-box { &.category-drop { - min-width: auto; .badge-wrapper { font-size: $font-0; @@ -16,30 +15,17 @@ } } - &.none.has-selection .category-drop-header { - padding: 4.5px 5px 4.5px 10px; - } - &.bar.has-selection .category-drop-header { - padding: 3.5px 5px 3.5px 10px; + border: none; } &.box.has-selection .category-drop-header { - padding: 2.5px 5px 2.5px 10px; - } - - &.bullet.has-selection .category-drop-header { - padding: 4.5px 5px 4.5px 10px; + padding: 3px 5px 3px 10px; } .category-drop-header { - background: $primary-low; - color: $primary; - border: 1px solid transparent; - padding: 4.5px 5px 4.5px 10px; - font-size: $font-0; - transition: none; - + padding: 5px 5px 5px 10px; + &.is-none .selected-name { color: inherit; } @@ -48,79 +34,26 @@ margin-right: 0; } - .fa { - font-size: $font-up-1; - } - - .caret-icon { - opacity: 1; - margin: 0; - } - } - - &.is-expanded .category-drop-header { - border: 1px solid $tertiary; - box-shadow: shadow("focus"); - } - - .select-kit-collection { - display: flex; - flex-direction: column; - padding: 0; - min-width: 100px; - max-height: 300px; - max-width: 30em; - padding: 4px 0; - - .collection-header { - .category-filter { - white-space: nowrap; - color: $primary; - font-size: $font-down-1; - line-height: $line-height-medium; - font-weight: bold; - display: block; - padding: 6px 10px; - - &:hover { - text-decoration: underline; - } - } - } } .select-kit-body { - width: auto; min-width: 300px; - border-radius: 0; - box-shadow: shadow("dropdown"); } .select-kit-row { - margin: 0; - font-size: $font-down-1; - font-weight: bold; flex-direction: column; align-items: flex-start; - padding: 5px 10px; .category-desc { font-weight: normal; color: $primary-medium; + margin-top: 2px; } .category-status { align-items: center; } - &.no-content { - font-weight: normal; - } - - &:not(.no-content) { - padding: 6px 10px; - } - .topic-count { margin-left: 5px; font-weight: normal; @@ -128,6 +61,7 @@ .badge-wrapper { margin: 0; + font-weight: bold; } } diff --git a/app/assets/stylesheets/common/select-kit/combo-box.scss b/app/assets/stylesheets/common/select-kit/combo-box.scss index 132e1e3e289..0898e3413d8 100644 --- a/app/assets/stylesheets/common/select-kit/combo-box.scss +++ b/app/assets/stylesheets/common/select-kit/combo-box.scss @@ -1,13 +1,20 @@ .select-kit { &.combo-box { + min-width: auto; .select-kit-body { width: 100%; + min-width: 150px; + border-radius: 0; + box-shadow: shadow("dropdown"); } .select-kit-row { margin: 0; min-height: 1px; padding: 6px 10px; + &.no-content { + font-weight: normal; + } } .select-kit-filter { @@ -18,9 +25,10 @@ .filter-input { margin-right: 5px; + width: auto; } } - + .select-kit-header { background: $secondary; border: 1px solid $primary-medium; @@ -35,6 +43,31 @@ } } + .select-kit-collection { + display: flex; + flex-direction: column; + padding: 0; + min-width: 100px; + max-height: 300px; + max-width: 32em; + + .collection-header { + a { + white-space: nowrap; + color: $primary; + line-height: $line-height-medium; + font-weight: bold; + display: block; + padding: 6px 10px; + color: $tertiary; + + &:hover { + text-decoration: underline; + } + } + } + } + &.is-disabled { .select-kit-header { background: #e9e9e9; @@ -56,11 +89,6 @@ box-shadow: shadow("focus"); } - .select-kit-header { - border-color: transparent; - box-shadow: none; - } - .select-kit-body { border-radius: 0 0 3px 3px ; } @@ -75,5 +103,16 @@ border-radius: 3px 3px 0 0; } } + + &.tag-drop, &.group-dropdown { + min-width: auto; + .select-kit-row { + font-weight: bold; + } + + &.is-expanded .select-kit-wrapper, .select-kit-wrapper { + display: none; + } + } } } diff --git a/app/assets/stylesheets/common/select-kit/group-dropdown.scss b/app/assets/stylesheets/common/select-kit/group-dropdown.scss deleted file mode 100644 index a5bdfa756c1..00000000000 --- a/app/assets/stylesheets/common/select-kit/group-dropdown.scss +++ /dev/null @@ -1,77 +0,0 @@ -.select-kit { - &.combo-box { - &.group-dropdown { - min-width: auto; - - .combo-box-header { - background: $primary-low; - color: $primary; - border: 1px solid transparent; - padding: 4.5px 5px 4.5px 10px; - font-size: $font-0; - transition: none; - - .d-icon { - opacity: 1; - font-size: $font-0; - margin: 0; - } - } - - &.is-expanded .tag-drop-header { - border: 1px solid $tertiary; - box-shadow: shadow("focus"); - } - - .select-kit-collection { - display: flex; - flex-direction: column; - padding: 0; - max-height: 300px; - padding: 4px 0; - - .collection-header { - .group-dropdown-filter { - white-space: nowrap; - color: $primary; - font-size: $font-down-1; - line-height: $line-height-medium; - font-weight: bold; - display: block; - padding: 10px 5px; - - &:hover { - text-decoration: underline; - } - } - } - } - - .select-kit-filter .filter-input { - width: auto; - } - - .select-kit-body { - width: auto; - min-width: 150px; - border-radius: 0; - box-shadow: shadow("dropdown"); - } - - .select-kit-row { - margin: 0; - font-size: $font-down-1; - font-weight: bold; - color: $tertiary; - - &.no-content { - font-weight: normal; - } - } - - &.is-expanded .select-kit-wrapper, .select-kit-wrapper { - display: none; - } - } - } -} diff --git a/app/assets/stylesheets/common/select-kit/select-kit.scss b/app/assets/stylesheets/common/select-kit/select-kit.scss index 22598ff4184..1ab67344b1f 100644 --- a/app/assets/stylesheets/common/select-kit/select-kit.scss +++ b/app/assets/stylesheets/common/select-kit/select-kit.scss @@ -5,21 +5,12 @@ .select-kit { border: none; min-width: 220px; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; + box-sizing: border-box; display: inline-block; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; + flex-direction: column; position: relative; vertical-align: middle; - -webkit-touch-callout: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; + user-select: none; &.is-hidden { display: none; @@ -33,13 +24,8 @@ z-index: z("dropdown"); .select-kit-body { - display: -webkit-box; - display: -ms-flexbox; display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; + flex-direction: column; left: 0; position: absolute; top: 0; @@ -73,43 +59,23 @@ .select-kit-header { box-sizing: border-box; overflow: hidden; - -webkit-transition: all .25s; - -o-transition: all .25s; transition: all .25s; cursor: pointer; outline: none; - display: -webkit-box; - display: -ms-flexbox; display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + align-items: center; justify-content: space-between; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - + flex-direction: row; + .selected-name { text-align: left; - -webkit-box-flex: 1 1 auto; - -ms-flex: 1 1 auto; - flex: 1 1 auto; - -o-text-overflow: ellipsis; - text-overflow: ellipsis; + flex: 1 1 auto; + text-overflow: ellipsis; white-space: nowrap; overflow: hidden; color: inherit; } - &.is-none { - .selected-name { - color: dark-light-choose($primary-high, $secondary-low); - } - } - .btn-clear { padding: 0 10px; border: 0; @@ -126,12 +92,8 @@ } .d-button-label { - display: -webkit-box; - display: -ms-flexbox; display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + align-items: center; white-space: nowrap; overflow: hidden; line-height: $line-height-medium; @@ -146,26 +108,18 @@ .select-kit-body { display: none; background: $secondary; - -webkit-box-sizing: border-box; - box-sizing: border-box; + box-sizing: border-box; } .select-kit-row { cursor: pointer; line-height: $line-height-medium; outline: none; - display: -webkit-box; - display: -ms-flexbox; display: flex; flex: 1 0 auto; - -webkit-box-sizing: border-box; - box-sizing: border-box; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; + box-sizing: border-box; + align-items: center; + justify-content: flex-start; &.no-content { white-space: nowrap; @@ -174,8 +128,7 @@ .name { margin: 0; overflow: hidden; - -o-text-overflow: ellipsis; - text-overflow: ellipsis; + text-overflow: ellipsis; flex: 10; } @@ -245,29 +198,20 @@ } .select-kit-filter { - display: -webkit-box; - display: -ms-flexbox; display: flex; box-sizing: border-box; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; + align-items: center; + justify-content: space-between; .filter-input, .filter-input:focus, .filter-input:active { background: none; margin: 0; padding: 0; - -webkit-box-flex: 1; - -ms-flex: 1; - flex: 1; + flex: 1; outline: none; border: 0; border-radius: 0; - -webkit-box-shadow: none; - box-shadow: none; + box-shadow: none; width: 100%; } @@ -291,8 +235,7 @@ left: 0; background: none; display: none; - -webkit-box-sizing: border-box; - box-sizing: border-box; + box-sizing: border-box; pointer-events: none; } } diff --git a/app/assets/stylesheets/common/select-kit/tag-drop.scss b/app/assets/stylesheets/common/select-kit/tag-drop.scss deleted file mode 100644 index 2766a8e93d7..00000000000 --- a/app/assets/stylesheets/common/select-kit/tag-drop.scss +++ /dev/null @@ -1,81 +0,0 @@ -.select-kit { - &.combo-box { - &.tag-drop { - min-width: auto; - - .tag-drop-header { - background: $primary-low; - color: $primary; - border: 1px solid transparent; - padding: 4.5px 5px 4.5px 10px; - font-size: $font-0; - transition: none; - - &.is-none .selected-name { - color: inherit; - } - - .d-icon { - opacity: 1; - font-size: $font-0; - margin: 0; - } - } - - &.is-expanded .tag-drop-header { - border: 1px solid $tertiary; - box-shadow: shadow("focus"); - } - - .select-kit-collection { - display: flex; - flex-direction: column; - max-height: 300px; - padding: 4px 0; - - - .collection-header { - .tag-filter { - white-space: nowrap; - color: $primary; - font-size: $font-down-1; - line-height: $line-height-medium; - font-weight: bold; - display: block; - padding: 6px 10px; - - &:hover { - text-decoration: underline; - } - } - } - } - - .select-kit-filter .filter-input { - width: auto; - } - - .select-kit-body { - width: auto; - min-width: 150px; - border-radius: 0; - box-shadow: shadow("dropdown"); - } - - .select-kit-row { - margin: 0; - font-size: $font-down-1; - font-weight: bold; - color: $tertiary; - - &.no-content { - font-weight: normal; - } - } - - &.is-expanded .select-kit-wrapper, .select-kit-wrapper { - display: none; - } - } - } -} diff --git a/app/assets/stylesheets/desktop/group.scss b/app/assets/stylesheets/desktop/group.scss index 527f297e019..11c3f99cb45 100644 --- a/app/assets/stylesheets/desktop/group.scss +++ b/app/assets/stylesheets/desktop/group.scss @@ -1,29 +1,8 @@ .group-nav { .group-dropdown { margin-right: 10px; - - i { - color: $primary; - } } - - li { - float: left; - - a, i { - color: dark-light-choose($primary-medium, $secondary-high); - } - - .active { - a, i { - color: $secondary; - } - } - } - - margin-bottom: 30px; } - .group-info { margin-bottom: 20px; } diff --git a/app/assets/stylesheets/mobile/topic-list.scss b/app/assets/stylesheets/mobile/topic-list.scss index 29a88f70622..0af33361721 100644 --- a/app/assets/stylesheets/mobile/topic-list.scss +++ b/app/assets/stylesheets/mobile/topic-list.scss @@ -152,6 +152,9 @@ } .category-list-item.category { + tr:first-of-type { + border: none; + } // Allow percentage widths on table cells to include their padding box-sizing: border-box; *, *:before, *:after {