Merge branch 'master' into glitch-soc/merge-upstream

This commit is contained in:
Thibaut Girka
2019-08-05 13:13:28 +02:00
52 changed files with 247 additions and 193 deletions

View File

@@ -129,19 +129,28 @@
padding: 0;
color: $action-button-color;
border: 0;
border-radius: 4px;
background: transparent;
cursor: pointer;
transition: color 100ms ease-in;
transition: all 100ms ease-in;
transition-property: background-color, color;
&:hover,
&:active,
&:focus {
color: lighten($action-button-color, 7%);
transition: color 200ms ease-out;
background-color: rgba($action-button-color, 0.15);
transition: all 200ms ease-out;
transition-property: background-color, color;
}
&:focus {
background-color: rgba($action-button-color, 0.3);
}
&.disabled {
color: darken($action-button-color, 13%);
background-color: transparent;
cursor: default;
}
@@ -166,10 +175,16 @@
&:active,
&:focus {
color: darken($lighter-text-color, 7%);
background-color: rgba($lighter-text-color, 0.15);
}
&:focus {
background-color: rgba($lighter-text-color, 0.3);
}
&.disabled {
color: lighten($lighter-text-color, 7%);
background-color: transparent;
}
&.active {
@@ -197,6 +212,7 @@
.text-icon-button {
color: $lighter-text-color;
border: 0;
border-radius: 4px;
background: transparent;
cursor: pointer;
font-weight: 600;
@@ -204,17 +220,25 @@
padding: 0 3px;
line-height: 27px;
outline: 0;
transition: color 100ms ease-in;
transition: all 100ms ease-in;
transition-property: background-color, color;
&:hover,
&:active,
&:focus {
color: darken($lighter-text-color, 7%);
transition: color 200ms ease-out;
background-color: rgba($lighter-text-color, 0.15);
transition: all 200ms ease-out;
transition-property: background-color, color;
}
&:focus {
background-color: rgba($lighter-text-color, 0.3);
}
&.disabled {
color: lighten($lighter-text-color, 20%);
background-color: transparent;
cursor: default;
}
@@ -604,7 +628,8 @@
}
}
.icon-button {
.icon-button,
.text-icon-button {
box-sizing: content-box;
padding: 0 3px;
}
@@ -731,7 +756,7 @@
white-space: pre-wrap;
&:last-child {
margin-bottom: 2px;
margin-bottom: 0;
}
}
@@ -1852,6 +1877,26 @@ a.account__display-name {
}
}
.tabs-bar__wrapper {
background: darken($ui-base-color, 8%);
position: sticky;
top: 0;
z-index: 2;
padding-top: 0;
@media screen and (min-width: $no-gap-breakpoint) {
padding-top: 10px;
}
.tabs-bar {
margin-bottom: 0;
@media screen and (min-width: $no-gap-breakpoint) {
margin-bottom: 10px;
}
}
}
.react-swipeable-view-container {
&,
.columns-area,
@@ -1949,9 +1994,6 @@ a.account__display-name {
background: lighten($ui-base-color, 8%);
flex: 0 0 auto;
overflow-y: auto;
position: sticky;
top: 0;
z-index: 3;
}
.tabs-bar__link {
@@ -2014,6 +2056,14 @@ a.account__display-name {
padding: 0;
}
//.column {
// margin-top: 0;
// @media screen and (min-width: $no-gap-breakpoint) {
// margin-top: 10px;
// }
//}
.autosuggest-textarea__textarea {
font-size: 16px;
}
@@ -2039,6 +2089,7 @@ a.account__display-name {
@media screen and (min-width: $no-gap-breakpoint) {
padding: 10px 0;
padding-top: 0;
}
@media screen and (min-width: 630px) {
@@ -2153,13 +2204,11 @@ a.account__display-name {
@media screen and (min-width: $no-gap-breakpoint) {
.tabs-bar {
margin: 10px auto;
margin-bottom: 0;
width: 100%;
}
.react-swipeable-view-container .columns-area--mobile {
height: calc(100% - 20px) !important;
height: calc(100% - 10px) !important;
}
.getting-started__wrapper,
@@ -2387,6 +2436,8 @@ a.account__display-name {
}
.column-back-button {
box-sizing: border-box;
width: 100%;
background: lighten($ui-base-color, 4%);
color: $highlight-text-color;
cursor: pointer;