From bc4fa6b198557a7f3989eb0865e2c77ac7451d29 Mon Sep 17 00:00:00 2001 From: kibigo! Date: Sun, 3 Dec 2017 23:26:40 -0800 Subject: Rename themes -> flavours ? ? --- app/javascript/themes/glitch/styles/forms.scss | 540 ------------------------- 1 file changed, 540 deletions(-) delete mode 100644 app/javascript/themes/glitch/styles/forms.scss (limited to 'app/javascript/themes/glitch/styles/forms.scss') diff --git a/app/javascript/themes/glitch/styles/forms.scss b/app/javascript/themes/glitch/styles/forms.scss deleted file mode 100644 index 61fcf286f..000000000 --- a/app/javascript/themes/glitch/styles/forms.scss +++ /dev/null @@ -1,540 +0,0 @@ -code { - font-family: 'mastodon-font-monospace', monospace; - font-weight: 400; -} - -.form-container { - max-width: 400px; - padding: 20px; - margin: 0 auto; -} - -.simple_form { - .input { - margin-bottom: 15px; - overflow: hidden; - } - - span.hint { - display: block; - color: $ui-primary-color; - font-size: 12px; - margin-top: 4px; - } - - h4 { - text-transform: uppercase; - font-size: 13px; - font-weight: 500; - color: $ui-primary-color; - padding-bottom: 8px; - margin-bottom: 8px; - border-bottom: 1px solid lighten($ui-base-color, 8%); - } - - p.hint { - margin-bottom: 15px; - color: $ui-primary-color; - - &.subtle-hint { - text-align: center; - font-size: 12px; - line-height: 18px; - margin-top: 15px; - margin-bottom: 0; - color: $ui-primary-color; - - a { - color: $ui-highlight-color; - } - } - } - - .card { - margin-bottom: 15px; - } - - strong { - font-weight: 500; - } - - .label_input { - display: flex; - - label { - flex: 0 0 auto; - } - - input { - flex: 1 1 auto; - } - } - - .input.with_label { - padding: 15px 0; - margin-bottom: 0; - - .label_input { - flex-wrap: wrap; - align-items: flex-start; - } - - &.select .label_input { - align-items: initial; - } - - .label_input > label { - font-family: inherit; - font-size: 16px; - color: $primary-text-color; - display: block; - padding-top: 5px; - margin-bottom: 5px; - flex: 1; - min-width: 150px; - word-wrap: break-word; - - &.select { - flex: 0; - } - - & ~ * { - margin-left: 10px; - } - } - - ul { - flex: 390px; - } - - &.boolean { - padding: initial; - margin-bottom: initial; - - .label_input > label { - font-family: inherit; - font-size: 14px; - color: $primary-text-color; - display: block; - width: auto; - } - - label.checkbox { - position: relative; - padding-left: 25px; - flex: 1 1 auto; - } - } - } - - .input.with_block_label { - & > label { - font-family: inherit; - font-size: 16px; - color: $primary-text-color; - display: block; - padding-top: 5px; - } - - .hint { - margin-bottom: 15px; - } - - li { - float: left; - width: 50%; - } - } - - .fields-group { - margin-bottom: 25px; - } - - .input.radio_buttons .radio label { - margin-bottom: 5px; - font-family: inherit; - font-size: 14px; - color: $primary-text-color; - display: block; - width: auto; - } - - .input.boolean { - margin-bottom: 5px; - - label { - font-family: inherit; - font-size: 14px; - color: $primary-text-color; - display: block; - width: auto; - } - - label.checkbox { - position: relative; - padding-left: 25px; - flex: 1 1 auto; - } - - input[type=checkbox] { - position: absolute; - left: 0; - top: 5px; - margin: 0; - } - - .hint { - padding-left: 25px; - margin-left: 0; - } - } - - .check_boxes { - .checkbox { - label { - font-family: inherit; - font-size: 14px; - color: $primary-text-color; - display: block; - width: auto; - position: relative; - padding-top: 5px; - padding-left: 25px; - flex: 1 1 auto; - } - - input[type=checkbox] { - position: absolute; - left: 0; - top: 5px; - margin: 0; - } - } - } - - input[type=text], - input[type=number], - input[type=email], - input[type=password], - textarea { - background: transparent; - box-sizing: border-box; - border: 0; - border-bottom: 2px solid $ui-primary-color; - border-radius: 2px 2px 0 0; - padding: 7px 4px; - font-size: 16px; - color: $primary-text-color; - display: block; - width: 100%; - outline: 0; - font-family: inherit; - resize: vertical; - - &:invalid { - box-shadow: none; - } - - &:focus:invalid { - border-bottom-color: $error-value-color; - } - - &:required:valid { - border-bottom-color: $valid-value-color; - } - - &:active, - &:focus { - border-bottom-color: $ui-highlight-color; - background: rgba($base-overlay-background, 0.1); - } - } - - .input.field_with_errors { - label { - color: $error-value-color; - } - - input[type=text], - input[type=email], - input[type=password] { - border-bottom-color: $error-value-color; - } - - .error { - display: block; - font-weight: 500; - color: $error-value-color; - margin-top: 4px; - } - } - - .actions { - margin-top: 30px; - display: flex; - } - - button, - .button, - .block-button { - display: block; - width: 100%; - border: 0; - border-radius: 4px; - background: $ui-highlight-color; - color: $primary-text-color; - font-size: 18px; - line-height: inherit; - height: auto; - padding: 10px; - text-transform: uppercase; - text-decoration: none; - text-align: center; - box-sizing: border-box; - cursor: pointer; - font-weight: 500; - outline: 0; - margin-bottom: 10px; - margin-right: 10px; - - &:last-child { - margin-right: 0; - } - - &:hover { - background-color: lighten($ui-highlight-color, 5%); - } - - &:active, - &:focus { - background-color: darken($ui-highlight-color, 5%); - } - - &.negative { - background: $error-value-color; - - &:hover { - background-color: lighten($error-value-color, 5%); - } - - &:active, - &:focus { - background-color: darken($error-value-color, 5%); - } - } - } - - select { - font-size: 16px; - max-height: 29px; - } - - .input-with-append { - position: relative; - - .input input { - padding-right: 127px; - } - - .append { - position: absolute; - right: 0; - top: 0; - padding: 7px 4px; - padding-bottom: 9px; - font-size: 16px; - color: $ui-base-lighter-color; - font-family: inherit; - pointer-events: none; - cursor: default; - } - } -} - -.flash-message { - background: lighten($ui-base-color, 8%); - color: $ui-primary-color; - border-radius: 4px; - padding: 15px 10px; - margin-bottom: 30px; - box-shadow: 0 0 5px rgba($base-shadow-color, 0.2); - text-align: center; - - p { - margin-bottom: 15px; - } - - .oauth-code { - color: $ui-secondary-color; - outline: 0; - box-sizing: border-box; - display: block; - width: 100%; - border: none; - padding: 10px; - font-family: 'mastodon-font-monospace', monospace; - background: $ui-base-color; - color: $ui-primary-color; - font-size: 14px; - margin: 0; - - &::-moz-focus-inner { - border: 0; - } - - &::-moz-focus-inner, - &:focus, - &:active { - outline: 0 !important; - } - - &:focus { - background: lighten($ui-base-color, 4%); - } - } - - strong { - font-weight: 500; - } - - @media screen and (max-width: 740px) and (min-width: 441px) { - margin-top: 40px; - } -} - -.form-footer { - margin-top: 30px; - text-align: center; - - a { - color: $ui-primary-color; - text-decoration: none; - - &:hover { - text-decoration: underline; - } - } -} - -.oauth-prompt, -.follow-prompt { - margin-bottom: 30px; - text-align: center; - color: $ui-primary-color; - - h2 { - font-size: 16px; - margin-bottom: 30px; - } - - strong { - color: $ui-secondary-color; - font-weight: 500; - } - - @media screen and (max-width: 740px) and (min-width: 441px) { - margin-top: 40px; - } -} - -.qr-wrapper { - display: flex; - flex-wrap: wrap; - align-items: flex-start; -} - -.qr-code { - flex: 0 0 auto; - background: $simple-background-color; - padding: 4px; - margin: 0 10px 20px 0; - box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); - display: inline-block; - - svg { - display: block; - margin: 0; - } -} - -.qr-alternative { - margin-bottom: 20px; - color: $ui-secondary-color; - flex: 150px; - - samp { - display: block; - font-size: 14px; - } -} - -.table-form { - p { - margin-bottom: 15px; - - strong { - font-weight: 500; - } - } -} - -.simple_form, -.table-form { - .warning { - box-sizing: border-box; - background: rgba($error-value-color, 0.5); - color: $primary-text-color; - text-shadow: 1px 1px 0 rgba($base-shadow-color, 0.3); - box-shadow: 0 2px 6px rgba($base-shadow-color, 0.4); - border-radius: 4px; - padding: 10px; - margin-bottom: 15px; - - a { - color: $primary-text-color; - text-decoration: underline; - - &:hover, - &:focus, - &:active { - text-decoration: none; - } - } - - strong { - font-weight: 600; - display: block; - margin-bottom: 5px; - - .fa { - font-weight: 400; - } - } - } -} - -.action-pagination { - display: flex; - flex-wrap: wrap; - align-items: center; - - .actions, - .pagination { - flex: 1 1 auto; - } - - .actions { - padding: 30px 0; - padding-right: 20px; - flex: 0 0 auto; - } -} - -.post-follow-actions { - text-align: center; - color: $ui-primary-color; - - div { - margin-bottom: 4px; - } -} -- cgit