diff options
author | Surinna Curtis <ekiru.0@gmail.com> | 2017-07-17 22:06:31 -0500 |
---|---|---|
committer | kibigo! <marrus-sh@users.noreply.github.com> | 2017-07-18 11:27:48 -0700 |
commit | 7a77f7b3bbafff6b8c9899e1c4404ab5e5cde853 (patch) | |
tree | 03ca53188da35fa5ef39f54410bdc3ee029693d4 /app/javascript/glitch/components/settings/stylesheet.scss | |
parent | df74e26baf3c639d0419a7b809208636e81d93f3 (diff) |
Add sourceRoot/includePaths to loaders
Use the settings modal as an example/testcase
Diffstat (limited to 'app/javascript/glitch/components/settings/stylesheet.scss')
-rw-r--r-- | app/javascript/glitch/components/settings/stylesheet.scss | 84 |
1 files changed, 84 insertions, 0 deletions
diff --git a/app/javascript/glitch/components/settings/stylesheet.scss b/app/javascript/glitch/components/settings/stylesheet.scss new file mode 100644 index 000000000..48cc37984 --- /dev/null +++ b/app/javascript/glitch/components/settings/stylesheet.scss @@ -0,0 +1,84 @@ +@import 'variables'; + +.settings-modal { + 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; + } +} + +.settings-modal__navigation { + background: $primary-text-color; + color: $ui-base-color; + width: 200px; + font-size: 15px; + line-height: 20px; + overflow-y: auto; + + .settings-modal__navigation-item, .settings-modal__navigation-close { + display: block; + padding: 15px 20px; + cursor: pointer; + outline: none; + text-decoration: none; + } + + .settings-modal__navigation-item { + background: $primary-text-color; + color: inherit; + border-bottom: 1px $ui-primary-color solid; + transition: background .3s; + + &:hover { + background: $ui-secondary-color; + } + + &.active { + background: $ui-highlight-color; + color: $primary-text-color; + } + } + + .settings-modal__navigation-close { + background: $error-value-color; + color: $primary-text-color; + } +} + +.settings-modal__content { + display: block; + flex: auto; + padding: 15px 20px 15px 20px; + width: 360px; + overflow-y: auto; + + select { + margin-bottom: 5px; + } +} \ No newline at end of file |