diff options
Diffstat (limited to 'app/assets/stylesheets')
-rw-r--r-- | app/assets/stylesheets/application.scss | 1 | ||||
-rw-r--r-- | app/assets/stylesheets/components.scss | 106 | ||||
-rw-r--r-- | app/assets/stylesheets/forms.scss | 13 | ||||
-rw-r--r-- | app/assets/stylesheets/tables.scss | 25 |
4 files changed, 141 insertions, 4 deletions
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 05a309365..bbbeafefe 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -234,3 +234,4 @@ body { @import 'stream_entries'; @import 'components'; @import 'about'; +@import 'tables'; diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss index adf0db990..cc9f0eb3b 100644 --- a/app/assets/stylesheets/components.scss +++ b/app/assets/stylesheets/components.scss @@ -405,3 +405,109 @@ text-decoration: underline; } } + +.react-toggle { + display: inline-block; + position: relative; + cursor: pointer; + background-color: transparent; + border: 0; + padding: 0; + user-select: none; + -webkit-tap-highlight-color: rgba(0,0,0,0); + -webkit-tap-highlight-color: transparent; +} + +.react-toggle-screenreader-only { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} + +.react-toggle--disabled { + cursor: not-allowed; + opacity: 0.5; + transition: opacity 0.25s; +} + +.react-toggle-track { + width: 50px; + height: 24px; + padding: 0; + border-radius: 30px; + background-color: #282c37; + transition: all 0.2s ease; +} + +.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track { + background-color: darken(#282c37, 10%); +} + +.react-toggle--checked .react-toggle-track { + background-color: #2b90d9; +} + +.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track { + background-color: lighten(#2b90d9, 10%); +} + +.react-toggle-track-check { + position: absolute; + width: 14px; + height: 10px; + top: 0px; + bottom: 0px; + margin-top: auto; + margin-bottom: auto; + line-height: 0; + left: 8px; + opacity: 0; + transition: opacity 0.25s ease; +} + +.react-toggle--checked .react-toggle-track-check { + opacity: 1; + transition: opacity 0.25s ease; +} + +.react-toggle-track-x { + position: absolute; + width: 10px; + height: 10px; + top: 0px; + bottom: 0px; + margin-top: auto; + margin-bottom: auto; + line-height: 0; + right: 10px; + opacity: 1; + transition: opacity 0.25s ease; +} + +.react-toggle--checked .react-toggle-track-x { + opacity: 0; +} + +.react-toggle-thumb { + transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0ms; + position: absolute; + top: 1px; + left: 1px; + width: 22px; + height: 22px; + border: 1px solid #282c37; + border-radius: 50%; + background-color: #FAFAFA; + box-sizing: border-box; + transition: all 0.25s ease; +} + +.react-toggle--checked .react-toggle-thumb { + left: 27px; + border-color: #2b90d9; +} diff --git a/app/assets/stylesheets/forms.scss b/app/assets/stylesheets/forms.scss index c7bdbe2c0..81270edf6 100644 --- a/app/assets/stylesheets/forms.scss +++ b/app/assets/stylesheets/forms.scss @@ -48,11 +48,16 @@ code { display: block; } - input[type=checkbox] { - display: inline-block; + label.checkbox { position: relative; - top: 3px; - margin-right: 8px; + padding-left: 25px; + } + + input[type=checkbox] { + position: absolute; + left: 0; + top: 1px; + margin: 0; } } diff --git a/app/assets/stylesheets/tables.scss b/app/assets/stylesheets/tables.scss new file mode 100644 index 000000000..89b35891d --- /dev/null +++ b/app/assets/stylesheets/tables.scss @@ -0,0 +1,25 @@ +.table { + width: 100%; + max-width: 100%; + border-spacing: 0; + border-collapse: collapse; + + th, td { + padding: 8px; + line-height: 1.42857143; + vertical-align: top; + border-top: 1px solid #ddd; + text-align: left; + } + + & > thead > tr > th { + vertical-align: bottom; + border-bottom: 2px solid #ddd; + border-top: 0; + font-weight: 500; + } +} + +samp { + font-family: 'Roboto Mono', monospace; +} |