MetuFSS
/
metu.life
2
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fix and refactor SCSS

Browse Source
master
Thibaut Girka 6 years ago committed by ThibG
parent 7fd8797d20
commit b222d1ae26
4 changed files with 238 additions and 295 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 30
      app/javascript/flavours/glitch/styles/components/columns.scss
  2. 3
      app/javascript/flavours/glitch/styles/components/drawer.scss
  3. 268
      app/javascript/flavours/glitch/styles/components/index.scss
  4. 232
      app/javascript/flavours/glitch/styles/components/single_column.scss

30
app/javascript/flavours/glitch/styles/components/columns.scss
Unescape View File

@ -90,34 +90,6 @@
overflow: hidden;
}
@include multi-columns('screen and (min-width: 631px)', $parent: null) {
.columns-area {
padding: 0;
}
.column {
flex: 0 0 auto;
padding: 10px;
padding-left: 5px;
padding-right: 5px;
&:first-child {
padding-left: 10px;
}
&:last-child {
padding-right: 10px;
}
}
.columns-area > div {
.column {
padding-left: 5px;
padding-right: 5px;
}
}
}
.column-back-button {
background: lighten($ui-base-color, 4%);
color: $highlight-text-color;
@ -298,7 +270,7 @@
flex-direction: column;
overflow: hidden;
.wide & {
.wide .columns-area:not(.columns-area--mobile) & {
flex: auto;
min-width: 330px;
max-width: 400px;

3
app/javascript/flavours/glitch/styles/components/drawer.scss
Unescape View File

@ -86,9 +86,8 @@
box-sizing: border-box;
margin: 0;
border: none;
padding: 10px 30px 10px 10px;
padding: 15px 30px 15px 15px;
width: 100%;
height: 36px;
outline: 0;
color: $darker-text-color;
background: $ui-base-color;

268
app/javascript/flavours/glitch/styles/components/index.scss
Unescape View File

@ -597,201 +597,10 @@
margin-left: 5px;
display: none;
}
}
@media screen and (min-width: 600px) {
.tabs-bar__link {
span {
display: inline;
}
}
}
.columns-area--mobile {
flex-direction: column;
width: 100%;
margin: 0 auto;
.column,
.drawer {
width: 100%;
height: 100%;
padding: 0;
}
.autosuggest-textarea__textarea {
font-size: 16px;
}
.search__input {
line-height: 18px;
font-size: 16px;
padding: 15px;
padding-right: 30px;
}
.search__icon .fa {
top: 15px;
}
@media screen and (min-width: 360px) {
padding: 10px 0;
}
@media screen and (min-width: 630px) {
.detailed-status {
padding: 15px;
.media-gallery,
.video-player {
margin-top: 15px;
}
}
.account__header__bar {
padding: 5px 10px;
}
.navigation-bar,
.compose-form {
padding: 15px;
}
.compose-form .compose-form__publish .compose-form__publish-button-wrapper {
padding-top: 15px;
}
.status {
padding: 15px 15px 15px (48px + 15px * 2);
min-height: 48px + 2px;
&__avatar {
left: 15px;
top: 17px;
}
&__content {
padding-top: 5px;
}
&__prepend {
margin-left: 48px + 15px * 2;
padding-top: 15px;
}
&__prepend-icon-wrapper {
left: -32px;
}
.media-gallery,
&__action-bar,
.video-player {
margin-top: 10px;
}
}
.account {
padding: 15px 10px;
&__header__bio {
margin: 0 -10px;
}
}
.notification {
&__message {
margin-left: 48px + 15px * 2;
padding-top: 15px;
}
&__favourite-icon-wrapper {
left: -32px;
}
.status {
padding-top: 8px;
}
.account {
padding-top: 8px;
}
.account__avatar-wrapper {
margin-left: 17px;
margin-right: 15px;
}
}
}
}
.floating-action-button {
position: fixed;
display: flex;
justify-content: center;
align-items: center;
width: 3.9375rem;
height: 3.9375rem;
bottom: 1.3125rem;
right: 1.3125rem;
background: darken($ui-highlight-color, 3%);
color: $white;
border-radius: 50%;
font-size: 21px;
line-height: 21px;
text-decoration: none;
box-shadow: 2px 3px 9px rgba($base-shadow-color, 0.4);
&:hover,
&:focus,
&:active {
background: lighten($ui-highlight-color, 7%);
}
}
@media screen and (min-width: 360px) {
.tabs-bar {
margin: 10px auto;
margin-bottom: 0;
width: 100%;
}
.react-swipeable-view-container .columns-area--mobile {
height: calc(100% - 20px) !important;
}
.getting-started__wrapper,
.getting-started__trends,
.search {
margin-bottom: 10px;
}
}
@media screen and (max-width: 600px + (285px * 1) + (10px * 1)) {
.columns-area__panels__pane--compositional {
display: none;
}
}
@media screen and (min-width: 600px + (285px * 1) + (10px * 1)) {
.floating-action-button,
.tabs-bar__link.optional {
display: none;
}
.search-page .search {
display: none;
}
}
@media screen and (max-width: 600px + (285px * 2) + (10px * 2)) {
.columns-area__panels__pane--navigational {
display: none;
}
}
@media screen and (min-width: 600px + (285px * 2) + (10px * 2)) {
.tabs-bar {
display: none;
span.icon {
margin-left: 0;
display: inline;
}
}
@ -817,76 +626,6 @@
border-color: darken($ui-base-color, 8%);
}
.compose-panel {
width: 285px;
margin-top: 10px;
display: flex;
flex-direction: column;
height: calc(100% - 10px);
overflow-y: hidden;
.search__input {
line-height: 18px;
font-size: 16px;
padding: 15px;
padding-right: 30px;
}
.search__icon .fa {
top: 15px;
}
.navigation-bar {
padding-top: 20px;
padding-bottom: 20px;
flex: 0 1 48px;
min-height: 20px;
}
.flex-spacer {
background: transparent;
}
.compose-form {
flex: 1;
overflow-y: hidden;
display: flex;
flex-direction: column;
min-height: 310px;
padding-bottom: 71px;
margin-bottom: -71px;
}
.compose-form__autosuggest-wrapper {
overflow-y: auto;
background-color: $white;
border-radius: 4px 4px 0 0;
flex: 0 1 auto;
}
.autosuggest-textarea__textarea {
overflow-y: hidden;
}
.compose-form__upload-thumbnail {
height: 80px;
}
}
.navigation-panel {
margin-top: 10px;
margin-bottom: 10px;
height: calc(100% - 20px);
overflow-y: auto;
hr {
border: 0;
background: transparent;
border-top: 1px solid lighten($ui-base-color, 4%);
margin: 10px 0;
}
}
.scrollable {
overflow-y: scroll;
overflow-x: hidden;
@ -1657,3 +1396,4 @@ noscript {
@import 'emoji_picker';
@import 'local_settings';
@import 'error_boundary';
@import 'single_column';

232
app/javascript/flavours/glitch/styles/components/single_column.scss
Unescape View File

@ -0,0 +1,232 @@
.compose-panel {
width: 285px;
margin-top: 10px;
display: flex;
flex-direction: column;
height: calc(100% - 10px);
overflow-y: hidden;
.drawer--search input {
line-height: 18px;
font-size: 16px;
padding: 15px;
padding-right: 30px;
}
.search__icon .fa {
top: 15px;
}
.drawer--account {
flex: 0 1 48px;
}
.flex-spacer {
background: transparent;
}
.composer {
flex: 1;
overflow-y: hidden;
display: flex;
flex-direction: column;
min-height: 310px;
}
.compose-form__autosuggest-wrapper {
overflow-y: auto;
background-color: $white;
border-radius: 4px 4px 0 0;
flex: 0 1 auto;
}
.autosuggest-textarea__textarea {
overflow-y: hidden;
}
.compose-form__upload-thumbnail {
height: 80px;
}
}
.navigation-panel {
margin-top: 10px;
margin-bottom: 10px;
height: calc(100% - 20px);
overflow-y: auto;
hr {
border: 0;
background: transparent;
border-top: 1px solid lighten($ui-base-color, 4%);
margin: 10px 0;
}
}
@media screen and (min-width: 600px) {
.tabs-bar__link {
span {
display: inline;
}
}
}
.columns-area--mobile {
flex-direction: column;
width: 100%;
margin: 0 auto;
.column,
.drawer {
width: 100%;
height: 100%;
padding: 0;
}
.autosuggest-textarea__textarea {
font-size: 16px;
}
.search__input {
line-height: 18px;
font-size: 16px;
padding: 15px;
padding-right: 30px;
}
.search__icon .fa {
top: 15px;
}
@media screen and (min-width: 360px) {
padding: 10px 0;
}
@media screen and (min-width: 630px) {
.detailed-status {
padding: 15px;
.media-gallery,
.video-player {
margin-top: 15px;
}
}
.account__header__bar {
padding: 5px 10px;
}
.navigation-bar,
.compose-form {
padding: 15px;
}
.compose-form .compose-form__publish .compose-form__publish-button-wrapper {
padding-top: 15px;
}
.status {
padding: 15px;
min-height: 48px + 2px;
.media-gallery,
&__action-bar,
.video-player {
margin-top: 10px;
}
}
.account {
padding: 15px 10px;
&__header__bio {
margin: 0 -10px;
}
}
.notification {
&__message {
padding-top: 15px;
}
.status {
padding-top: 8px;
}
.account {
padding-top: 8px;
}
}
}
}
.floating-action-button {
position: fixed;
display: flex;
justify-content: center;
align-items: center;
width: 3.9375rem;
height: 3.9375rem;
bottom: 1.3125rem;
right: 1.3125rem;
background: darken($ui-highlight-color, 3%);
color: $white;
border-radius: 50%;
font-size: 21px;
line-height: 21px;
text-decoration: none;
box-shadow: 2px 3px 9px rgba($base-shadow-color, 0.4);
&:hover,
&:focus,
&:active {
background: lighten($ui-highlight-color, 7%);
}
}
@media screen and (min-width: 360px) {
.tabs-bar {
margin: 10px auto;
margin-bottom: 0;
width: 100%;
}
.react-swipeable-view-container .columns-area--mobile {
height: calc(100% - 20px) !important;
}
.getting-started__wrapper,
.getting-started__trends,
.search {
margin-bottom: 10px;
}
}
@media screen and (max-width: 600px + (285px * 1) + (10px * 1)) {
.columns-area__panels__pane--compositional {
display: none;
}
}
@media screen and (min-width: 600px + (285px * 1) + (10px * 1)) {
.floating-action-button,
.tabs-bar__link.optional {
display: none;
}
.search-page .search {
display: none;
}
}
@media screen and (max-width: 600px + (285px * 2) + (10px * 2)) {
.columns-area__panels__pane--navigational {
display: none;
}
}
@media screen and (min-width: 600px + (285px * 2) + (10px * 2)) {
.tabs-bar {
display: none;
}
}
Write Preview
Loading…
Cancel
Save