From 96126a5b01cae79b4e76e68b02681e00f4622d81 Mon Sep 17 00:00:00 2001 From: kibigo! Date: Thu, 7 Dec 2017 13:35:37 -0800 Subject: [PATCH] Packaged local_settings styles in common --- .../glitch/features/local_settings/index.js | 3 - .../local_settings/navigation/index.js | 3 - .../local_settings/navigation/item/index.js | 3 - .../local_settings/navigation/item/style.scss | 27 ------ .../local_settings/navigation/style.scss | 10 -- .../features/local_settings/page/index.js | 3 - .../local_settings/page/item/index.js | 3 - .../local_settings/page/item/style.scss | 7 -- .../features/local_settings/page/style.scss | 9 -- .../glitch/features/local_settings/style.scss | 34 ------- .../glitch/styles/{ => components}/boost.scss | 0 .../styles/{ => components}/doodle.scss | 0 .../styles/{ => components}/emoji_picker.scss | 0 .../index.scss} | 4 +- .../styles/components/local_settings.scss | 81 +++++++++++++++++ .../flavours/glitch/styles/index.scss | 3 +- .../flavours/glitch/styles/reset copy.scss | 91 ------------------- 17 files changed, 84 insertions(+), 197 deletions(-) delete mode 100644 app/javascript/flavours/glitch/features/local_settings/navigation/item/style.scss delete mode 100644 app/javascript/flavours/glitch/features/local_settings/navigation/style.scss delete mode 100644 app/javascript/flavours/glitch/features/local_settings/page/item/style.scss delete mode 100644 app/javascript/flavours/glitch/features/local_settings/page/style.scss delete mode 100644 app/javascript/flavours/glitch/features/local_settings/style.scss rename app/javascript/flavours/glitch/styles/{ => components}/boost.scss (100%) rename app/javascript/flavours/glitch/styles/{ => components}/doodle.scss (100%) rename app/javascript/flavours/glitch/styles/{ => components}/emoji_picker.scss (100%) rename app/javascript/flavours/glitch/styles/{components.scss => components/index.scss} (99%) create mode 100644 app/javascript/flavours/glitch/styles/components/local_settings.scss delete mode 100644 app/javascript/flavours/glitch/styles/reset copy.scss diff --git a/app/javascript/flavours/glitch/features/local_settings/index.js b/app/javascript/flavours/glitch/features/local_settings/index.js index 81d9a3f416..4e4605ea9d 100644 --- a/app/javascript/flavours/glitch/features/local_settings/index.js +++ b/app/javascript/flavours/glitch/features/local_settings/index.js @@ -10,9 +10,6 @@ import LocalSettingsNavigation from './navigation'; import { closeModal } from 'flavours/glitch/actions/modal'; import { changeLocalSetting } from 'flavours/glitch/actions/local_settings'; -// Stylesheet imports -import './style.scss'; - const mapStateToProps = state => ({ settings: state.get('local_settings'), }); diff --git a/app/javascript/flavours/glitch/features/local_settings/navigation/index.js b/app/javascript/flavours/glitch/features/local_settings/navigation/index.js index fa35e83c75..fc2167c0c0 100644 --- a/app/javascript/flavours/glitch/features/local_settings/navigation/index.js +++ b/app/javascript/flavours/glitch/features/local_settings/navigation/index.js @@ -6,9 +6,6 @@ import { injectIntl, defineMessages } from 'react-intl'; // Our imports import LocalSettingsNavigationItem from './item'; -// Stylesheet imports -import './style.scss'; - // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * const messages = defineMessages({ diff --git a/app/javascript/flavours/glitch/features/local_settings/navigation/item/index.js b/app/javascript/flavours/glitch/features/local_settings/navigation/item/index.js index a352d5fb2a..b67d479e7b 100644 --- a/app/javascript/flavours/glitch/features/local_settings/navigation/item/index.js +++ b/app/javascript/flavours/glitch/features/local_settings/navigation/item/index.js @@ -3,9 +3,6 @@ import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; -// Stylesheet imports -import './style.scss'; - // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * export default class LocalSettingsPage extends React.PureComponent { diff --git a/app/javascript/flavours/glitch/features/local_settings/navigation/item/style.scss b/app/javascript/flavours/glitch/features/local_settings/navigation/item/style.scss deleted file mode 100644 index 7f7371993a..0000000000 --- a/app/javascript/flavours/glitch/features/local_settings/navigation/item/style.scss +++ /dev/null @@ -1,27 +0,0 @@ -@import 'styles/mastodon/variables'; - -.glitch.local-settings__navigation__item { - display: block; - padding: 15px 20px; - color: inherit; - background: $primary-text-color; - border-bottom: 1px $ui-primary-color solid; - cursor: pointer; - text-decoration: none; - outline: none; - transition: background .3s; - - &:hover { - background: $ui-secondary-color; - } - - &.active { - background: $ui-highlight-color; - color: $primary-text-color; - } - - &.close, &.close:hover { - background: $error-value-color; - color: $primary-text-color; - } -} diff --git a/app/javascript/flavours/glitch/features/local_settings/navigation/style.scss b/app/javascript/flavours/glitch/features/local_settings/navigation/style.scss deleted file mode 100644 index 0336f943be..0000000000 --- a/app/javascript/flavours/glitch/features/local_settings/navigation/style.scss +++ /dev/null @@ -1,10 +0,0 @@ -@import 'styles/mastodon/variables'; - -.glitch.local-settings__navigation { - background: $primary-text-color; - color: $ui-base-color; - width: 200px; - font-size: 15px; - line-height: 20px; - overflow-y: auto; -} diff --git a/app/javascript/flavours/glitch/features/local_settings/page/index.js b/app/javascript/flavours/glitch/features/local_settings/page/index.js index 498230f7bd..62bf410c69 100644 --- a/app/javascript/flavours/glitch/features/local_settings/page/index.js +++ b/app/javascript/flavours/glitch/features/local_settings/page/index.js @@ -7,9 +7,6 @@ import { defineMessages, FormattedMessage, injectIntl } from 'react-intl'; // Our imports import LocalSettingsPageItem from './item'; -// Stylesheet imports -import './style.scss'; - // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * const messages = defineMessages({ diff --git a/app/javascript/flavours/glitch/features/local_settings/page/item/index.js b/app/javascript/flavours/glitch/features/local_settings/page/item/index.js index 37e28c0845..66e84dfe19 100644 --- a/app/javascript/flavours/glitch/features/local_settings/page/item/index.js +++ b/app/javascript/flavours/glitch/features/local_settings/page/item/index.js @@ -3,9 +3,6 @@ import React from 'react'; import PropTypes from 'prop-types'; import ImmutablePropTypes from 'react-immutable-proptypes'; -// Stylesheet imports -import './style.scss'; - // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * export default class LocalSettingsPageItem extends React.PureComponent { diff --git a/app/javascript/flavours/glitch/features/local_settings/page/item/style.scss b/app/javascript/flavours/glitch/features/local_settings/page/item/style.scss deleted file mode 100644 index b2d8f7185c..0000000000 --- a/app/javascript/flavours/glitch/features/local_settings/page/item/style.scss +++ /dev/null @@ -1,7 +0,0 @@ -@import 'styles/mastodon/variables'; - -.glitch.local-settings__page__item { - select { - margin-bottom: 5px; - } -} diff --git a/app/javascript/flavours/glitch/features/local_settings/page/style.scss b/app/javascript/flavours/glitch/features/local_settings/page/style.scss deleted file mode 100644 index e9eedcad03..0000000000 --- a/app/javascript/flavours/glitch/features/local_settings/page/style.scss +++ /dev/null @@ -1,9 +0,0 @@ -@import 'styles/mastodon/variables'; - -.glitch.local-settings__page { - display: block; - flex: auto; - padding: 15px 20px 15px 20px; - width: 360px; - overflow-y: auto; -} diff --git a/app/javascript/flavours/glitch/features/local_settings/style.scss b/app/javascript/flavours/glitch/features/local_settings/style.scss deleted file mode 100644 index 765294607d..0000000000 --- a/app/javascript/flavours/glitch/features/local_settings/style.scss +++ /dev/null @@ -1,34 +0,0 @@ -@import 'styles/mastodon/variables'; - -.glitch.local-settings { - position: relative; - display: flex; - flex-direction: row; - background: $ui-secondary-color; - color: $ui-base-color; - border-radius: 8px; - height: 80vh; - width: 80vw; - max-width: 740px; - max-height: 450px; - overflow: hidden; - - label { - display: block; - } - - h1 { - font-size: 18px; - font-weight: 500; - line-height: 24px; - margin-bottom: 20px; - } - - h2 { - font-size: 15px; - font-weight: 500; - line-height: 20px; - margin-top: 20px; - margin-bottom: 10px; - } -} diff --git a/app/javascript/flavours/glitch/styles/boost.scss b/app/javascript/flavours/glitch/styles/components/boost.scss similarity index 100% rename from app/javascript/flavours/glitch/styles/boost.scss rename to app/javascript/flavours/glitch/styles/components/boost.scss diff --git a/app/javascript/flavours/glitch/styles/doodle.scss b/app/javascript/flavours/glitch/styles/components/doodle.scss similarity index 100% rename from app/javascript/flavours/glitch/styles/doodle.scss rename to app/javascript/flavours/glitch/styles/components/doodle.scss diff --git a/app/javascript/flavours/glitch/styles/emoji_picker.scss b/app/javascript/flavours/glitch/styles/components/emoji_picker.scss similarity index 100% rename from app/javascript/flavours/glitch/styles/emoji_picker.scss rename to app/javascript/flavours/glitch/styles/components/emoji_picker.scss diff --git a/app/javascript/flavours/glitch/styles/components.scss b/app/javascript/flavours/glitch/styles/components/index.scss similarity index 99% rename from app/javascript/flavours/glitch/styles/components.scss rename to app/javascript/flavours/glitch/styles/components/index.scss index ade8df018c..7aeab0a6af 100644 --- a/app/javascript/flavours/glitch/styles/components.scss +++ b/app/javascript/flavours/glitch/styles/components/index.scss @@ -1,5 +1,3 @@ -@import 'variables'; - .app-body { -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; @@ -4830,3 +4828,5 @@ noscript { } @import 'doodle'; +@import 'emoji_picker'; +@import 'local_settings'; diff --git a/app/javascript/flavours/glitch/styles/components/local_settings.scss b/app/javascript/flavours/glitch/styles/components/local_settings.scss new file mode 100644 index 0000000000..16c8cf0030 --- /dev/null +++ b/app/javascript/flavours/glitch/styles/components/local_settings.scss @@ -0,0 +1,81 @@ +.glitch.local-settings { + position: relative; + display: flex; + flex-direction: row; + background: $ui-secondary-color; + color: $ui-base-color; + border-radius: 8px; + height: 80vh; + width: 80vw; + max-width: 740px; + max-height: 450px; + overflow: hidden; + + label { + display: block; + } + + h1 { + font-size: 18px; + font-weight: 500; + line-height: 24px; + margin-bottom: 20px; + } + + h2 { + font-size: 15px; + font-weight: 500; + line-height: 20px; + margin-top: 20px; + margin-bottom: 10px; + } +} + +.glitch.local-settings__navigation__item { + display: block; + padding: 15px 20px; + color: inherit; + background: $primary-text-color; + border-bottom: 1px $ui-primary-color solid; + cursor: pointer; + text-decoration: none; + outline: none; + transition: background .3s; + + &:hover { + background: $ui-secondary-color; + } + + &.active { + background: $ui-highlight-color; + color: $primary-text-color; + } + + &.close, &.close:hover { + background: $error-value-color; + color: $primary-text-color; + } +} + +.glitch.local-settings__navigation { + background: $primary-text-color; + color: $ui-base-color; + width: 200px; + font-size: 15px; + line-height: 20px; + overflow-y: auto; +} + +.glitch.local-settings__page { + display: block; + flex: auto; + padding: 15px 20px 15px 20px; + width: 360px; + overflow-y: auto; +} + +.glitch.local-settings__page__item { + select { + margin-bottom: 5px; + } +} diff --git a/app/javascript/flavours/glitch/styles/index.scss b/app/javascript/flavours/glitch/styles/index.scss index c962a1f629..a5169f8813 100644 --- a/app/javascript/flavours/glitch/styles/index.scss +++ b/app/javascript/flavours/glitch/styles/index.scss @@ -14,8 +14,7 @@ @import 'forms'; @import 'accounts'; @import 'stream_entries'; -@import 'components'; -@import 'emoji_picker'; +@import 'components/index'; @import 'about'; @import 'tables'; @import 'admin'; diff --git a/app/javascript/flavours/glitch/styles/reset copy.scss b/app/javascript/flavours/glitch/styles/reset copy.scss deleted file mode 100644 index cc5ba9d7c8..0000000000 --- a/app/javascript/flavours/glitch/styles/reset copy.scss +++ /dev/null @@ -1,91 +0,0 @@ -/* http://meyerweb.com/eric/tools/css/reset/ - v2.0 | 20110126 - License: none (public domain) -*/ - -html, body, div, span, applet, object, iframe, -h1, h2, h3, h4, h5, h6, p, blockquote, pre, -a, abbr, acronym, address, big, cite, code, -del, dfn, em, img, ins, kbd, q, s, samp, -small, strike, strong, sub, sup, tt, var, -b, u, i, center, -dl, dt, dd, ol, ul, li, -fieldset, form, label, legend, -table, caption, tbody, tfoot, thead, tr, th, td, -article, aside, canvas, details, embed, -figure, figcaption, footer, header, hgroup, -menu, nav, output, ruby, section, summary, -time, mark, audio, video { - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font: inherit; - vertical-align: baseline; -} - -/* HTML5 display-role reset for older browsers */ -article, aside, details, figcaption, figure, -footer, header, hgroup, menu, nav, section { - display: block; -} - -body { - line-height: 1; -} - -ol, ul { - list-style: none; -} - -blockquote, q { - quotes: none; -} - -blockquote:before, blockquote:after, -q:before, q:after { - content: ''; - content: none; -} - -table { - border-collapse: collapse; - border-spacing: 0; -} - -::-webkit-scrollbar { - width: 8px; - height: 8px; -} - -::-webkit-scrollbar-thumb { - background: lighten($ui-base-color, 4%); - border: 0px none $base-border-color; - border-radius: 50px; -} - -::-webkit-scrollbar-thumb:hover { - background: lighten($ui-base-color, 6%); -} - -::-webkit-scrollbar-thumb:active { - background: lighten($ui-base-color, 4%); -} - -::-webkit-scrollbar-track { - border: 0px none $base-border-color; - border-radius: 0; - background: rgba($base-overlay-background, 0.1); -} - -::-webkit-scrollbar-track:hover { - background: $ui-base-color; -} - -::-webkit-scrollbar-track:active { - background: $ui-base-color; -} - -::-webkit-scrollbar-corner { - background: transparent; -}