Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Streamlining select-kit styles for simpler styling

This commit is contained in:
Kris 2018-05-01 20:41:28 -04:00
parent beef046259
commit 70ed25470d
10 changed files with 91 additions and 349 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/stylesheets/common.scss
View File

@ -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/*";

24
app/assets/stylesheets/common/base/_topic-list.scss
View File

@ -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 {

6
app/assets/stylesheets/common/base/user.scss
View File

@ -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 {

78
app/assets/stylesheets/common/select-kit/category-drop.scss
View File

@ -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;
}
}

51
app/assets/stylesheets/common/select-kit/combo-box.scss
View File

@ -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;
}
}
}
}

77
app/assets/stylesheets/common/select-kit/group-dropdown.scss
View File

@ -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;
}
}
}
}

97
app/assets/stylesheets/common/select-kit/select-kit.scss
View File

@ -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;
}
}

81
app/assets/stylesheets/common/select-kit/tag-drop.scss
View File

@ -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;
}
}
}
}

21
app/assets/stylesheets/desktop/group.scss
View File

@ -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;
}

3
app/assets/stylesheets/mobile/topic-list.scss
View File

@ -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 {