From f5bf5ebb82e3af420dcd23d602b1be6cc86838e1 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Wed, 3 May 2017 02:04:16 +0200 Subject: Replace sprockets/browserify with Webpack (#2617) * Replace browserify with webpack * Add react-intl-translations-manager * Do not minify in development, add offline-plugin for ServiceWorker background cache updates * Adjust tests and dependencies * Fix production deployments * Fix tests * More optimizations * Improve travis cache for npm stuff * Re-run travis * Add back support for custom.scss as before * Remove offline-plugin and babili * Fix issue with Immutable.List().unshift(...values) not working as expected * Make travis load schema instead of running all migrations in sequence * Fix missing React import in WarningContainer. Optimize rendering performance by using ImmutablePureComponent instead of React.PureComponent. ImmutablePureComponent uses Immutable.is() to compare props. Replace dynamic callback bindings in * Add react definitions to places that use JSX * Add Procfile.dev for running rails, webpack and streaming API at the same time --- app/javascript/styles/forms.scss | 335 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 335 insertions(+) create mode 100644 app/javascript/styles/forms.scss (limited to 'app/javascript/styles/forms.scss') diff --git a/app/javascript/styles/forms.scss b/app/javascript/styles/forms.scss new file mode 100644 index 000000000..18258099b --- /dev/null +++ b/app/javascript/styles/forms.scss @@ -0,0 +1,335 @@ +code { + font-family: 'Roboto Mono', monospace; + font-weight: 400; +} + +.form-container { + max-width: 400px; + padding: 20px; + margin: 0 auto; +} + +.simple_form { + .input { + margin-bottom: 15px; + } + + span.hint { + display: block; + color: $color3; + font-size: 12px; + margin-top: 4px; + } + + p.hint { + margin-bottom: 15px; + } + + strong { + font-weight: 500; + } + + .label_input { + display: flex; + + label { + flex: 0 0 auto; + width: 100px; + } + + input { + flex: 1 1 auto; + } + } + + .input.file, .input.select, .input.radio_buttons { + padding: 15px 0; + margin-bottom: 0; + + label { + font-family: inherit; + font-size: 16px; + color: $color5; + display: block; + padding-top: 5px; + } + } + + .fields-group { + margin-bottom: 25px; + } + + .input.radio_buttons .radio label { + margin-bottom: 5px; + font-family: inherit; + font-size: 14px; + color: white; + display: block; + width: auto; + } + + .input.boolean { + margin-bottom: 5px; + + label { + font-family: inherit; + font-size: 14px; + color: white; + display: block; + width: auto; + } + + label.checkbox { + position: relative; + padding-left: 25px; + flex: 1 1 auto; + } + + input[type=checkbox] { + position: absolute; + left: 0; + top: 1px; + margin: 0; + } + + .hint { + padding-left: 25px; + margin-left: 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 $color3; + border-radius: 2px 2px 0 0; + padding: 7px 4px; + font-size: 16px; + color: $color5; + display: block; + width: 100%; + outline: 0; + font-family: inherit; + resize: vertical; + + &:invalid { + box-shadow: none; + } + + &:focus:invalid { + border-bottom-color: $color6; + } + + &:required:valid { + border-bottom-color: $color7; + } + + &:active, &:focus { + border-bottom-color: $color4; + background: rgba($color8, 0.1); + } + } + + .input.field_with_errors { + label { + color: $color6; + } + + input[type=text], input[type=email], input[type=password] { + border-bottom-color: $color6; + } + + .error { + display: block; + font-weight: 500; + color: $color6; + margin-top: 4px; + } + } + + .actions { + margin-top: 30px; + } + + button, .block-button { + display: block; + width: 100%; + border: 0; + border-radius: 4px; + background: $color4; + color: $color5; + font-size: 18px; + 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; + + &:hover { + background-color: lighten($color4, 5%); + } + + &:active, &:focus { + position: relative; + top: 1px; + background-color: darken($color4, 5%); + } + + &.negative { + background: $color6; + + &:hover { + background-color: lighten($color6, 5%); + } + + &:active, &:focus { + background-color: darken($color6, 5%); + } + } + } + + select { + font-size: 16px; + } +} + +.flash-message { + background: $color1; + color: $color3; + border-radius: 4px; + padding: 15px 10px; + margin-bottom: 30px; + box-shadow: 0 0 5px rgba($color8, 0.2); + text-align: center; + + strong { + font-weight: 500; + } +} + +.form-footer { + margin-top: 30px; + text-align: center; + + a { + color: $color5; + text-decoration: none; + + &:hover { + text-decoration: underline; + } + } +} + +.oauth-prompt, .follow-prompt { + margin-bottom: 30px; + text-align: center; + color: $color3; + + h2 { + font-size: 16px; + margin-bottom: 30px; + } + + strong { + color: $color2; + font-weight: 500; + } +} + +.qr-wrapper { + display: flex; +} + +.qr-code { + flex: 0 0 auto; + background: #fff; + padding: 4px; + margin-bottom: 20px; + box-shadow: 0 0 15px rgba($color8, 0.2); + display: inline-block; + + svg { + display: block; + margin: 0; + } +} + +.qr-alternative { + margin-left: 10px; + color: $color3; + + samp { + display: block; + font-size: 14px; + } +} + +.table-form { + p { + max-width: 400px; + margin-bottom: 15px; + + strong { + font-weight: 500; + } + } + + .warning { + max-width: 400px; + box-sizing: border-box; + background: rgba($color6, 0.5); + color: $color5; + text-shadow: 1px 1px 0 rgba($color8, 0.3); + box-shadow: 0 2px 6px rgba($color8, 0.4); + border-radius: 4px; + padding: 10px; + margin-bottom: 15px; + + a { + color: $color5; + 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; + align-items: center; + + .actions, .pagination { + flex: 1 1 auto; + } + + .actions { + padding: 30px 0; + padding-right: 20px; + flex: 0 0 auto; + } +} + +.user_allowed_languages { + li { + float: left; + width: 50%; + } +} -- cgit