From 4a6bbfed095a3ba456390c18093aa1b182461f91 Mon Sep 17 00:00:00 2001 From: Felix Hamann Date: Mon, 5 Mar 2018 02:01:59 +0100 Subject: [PATCH] more form-styling --- static/css/reactive_input.css | 19 ++++++--- static/css/show_hide.css | 36 ++++++++++------- static/css/sortable.css | 2 +- templates/default-layout.lucius | 66 +++++++++++++++++++++++++++++++- templates/home.hamlet | 68 +++++++++++++++++++++++---------- 5 files changed, 148 insertions(+), 43 deletions(-) diff --git a/static/css/reactive_input.css b/static/css/reactive_input.css index f4da27484..e32ac533c 100644 --- a/static/css/reactive_input.css +++ b/static/css/reactive_input.css @@ -1,14 +1,21 @@ .reactive-label { - position: absolute; - left: 4px; - top: 2px; - transition: all .1s; cursor: text; color: #666; + transform: translate(0, 0); + transition: all .1s; } .reactive-label.small { - transform: translateY(-100%); - font-size: 12px; cursor: default; color: #333; } +@media (max-width: 768px) { + .reactive-label { + position: absolute; + left: 4px; + top: 8px; + } + .reactive-label.small { + transform: translate(0, -120%); + font-size: 12px; + } +} diff --git a/static/css/show_hide.css b/static/css/show_hide.css index cdfacd4bb..84dfb6e0b 100644 --- a/static/css/show_hide.css +++ b/static/css/show_hide.css @@ -1,6 +1,8 @@ .js-show-hide { - border-left: 1px solid #ccb3e6; - padding: 0 20px; + position: relative; +} + +.js-show-hide-toggle { position: relative; } @@ -9,22 +11,28 @@ } .js-show-hide-toggle::before { - content: 'v'; + content: ''; position: absolute; - margin-left: -13px; - font-weight: 800; -} - -.js-show-hide-toggle:hover::before { - content: '>'; -} - -.js-show-hide.collapsed .js-show-hide-toggle::before { - content: '>'; + width: 0; + height: 0; + border-right: 8px solid transparent; + border-bottom: 8px solid transparent; } +.js-show-hide-toggle::before, .js-show-hide.collapsed .js-show-hide-toggle:hover::before { - content: 'v'; + left: -28px; + top: 10px; + border-left: 8px solid transparent; + border-top: 8px solid rebeccapurple; +} + +.js-show-hide-toggle:hover::before, +.js-show-hide.collapsed .js-show-hide-toggle::before { + border-left: 8px solid rebeccapurple; + border-top: 8px solid transparent; + top: 5px; + left: -22px; } .js-show-hide.collapsed > .js-show-hide-target { diff --git a/static/css/sortable.css b/static/css/sortable.css index 3299448a6..ce1b68233 100644 --- a/static/css/sortable.css +++ b/static/css/sortable.css @@ -16,7 +16,7 @@ table.js-sortable th.sorted-desc::after { right: 0; width: 0; height: 0; - top: 7px; + top: 3px; border-left: 8px solid transparent; border-right: 8px solid transparent; } diff --git a/templates/default-layout.lucius b/templates/default-layout.lucius index cc4ed333c..05be2f1b0 100644 --- a/templates/default-layout.lucius +++ b/templates/default-layout.lucius @@ -93,13 +93,14 @@ input[type="text"], input[type="password"], input[type="email"] { background-color: rgba(0, 0, 0, 0.05); - padding: 7px 3px 4px; + padding: 13px 3px 4px; border: none; outline: 0; border-bottom: 2px solid rebeccapurple; color: var(--base-font-color); transition: all .1s; font-size: 16px; + min-width: 300px; } input[type="text"]:focus, @@ -142,4 +143,67 @@ button:not([disabled]):hover { .form-group { position: relative; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(100px, max-content)); + align-items: center; +} + +/*CUSTOM CHECKBOXES AND RADIO BOXES*/ +.checkbox, +.radio { + position: relative; +} +.checkbox > [type="checkbox"], +.radio > [type="radio"] { + display: none; +} +.checkbox > label, +.radio > label { + padding: 7px 13px 7px 30px; + background-color: rebeccapurple; + border-radius: 4px; + color: white; + cursor: pointer; +} +.checkbox > label::before, +.radio > label::before, +.checkbox > label::after, +.radio > label::after { + content: ''; + position: absolute; + top: 7px; + left: 4px; + display: block; + width: 20px; + height: 20px; + background-color: white; + transform: scale(0.2, 0.2); + transition: all .2s; +} +.radio > label::before, +.radio > label::after { + transform: scale(0.01, 0.01); +} +.checkbox > label::before, +.radio > label::before { + width: 20px; + height: 2px; +} +.checkbox > label::after, +.radio > label::after { + width: 20px; + height: 2px; +} +.checkbox > :checked + label, +.radio > :checked + label { + background-color: #451477; + text-decoration: underline; +} +.checkbox > :checked + label::before, +.radio > :checked + label::before { + transform: rotate(45deg); +} +.checkbox > :checked + label::after, +.radio > :checked + label::after { + transform: rotate(-45deg); } diff --git a/templates/home.hamlet b/templates/home.hamlet index 731b3c208..409b1ff23 100644 --- a/templates/home.hamlet +++ b/templates/home.hamlet @@ -9,6 +9,7 @@

Das System ist noch nicht produktiv einsetzbar +

Teilweise funktionierende Abschnitte @@ -25,12 +26,13 @@
  • Dateien hochladen und abrufen +
    -

    SORTABLE-TEST +

    Sortierbare Tabelle -
    ID + ID TH1 TH2 TH3 @@ -56,8 +58,10 @@ T2C2 35 +
    -

    FORM-TEST & STYLEGUIDE +

    form-Tests +

    (Senden-Button wird aktiviert, sobald alle benötigten Felder ausgefüllt sind.)