From 1cd4fbf5e7de713e4d839fe86eb16e74f384e6b1 Mon Sep 17 00:00:00 2001 From: gaelle morin Date: Wed, 25 Nov 2020 15:28:26 +0100 Subject: [PATCH] feature: admin-circle-create + form and input --- src/styles/base/form.scss | 63 +++++++++------- src/styles/base/main.scss | 71 ++++++++++++------- src/views/admin/page-admin-circles-create.pug | 16 +++-- src/views/admin/page-admin-circles.pug | 2 +- 4 files changed, 92 insertions(+), 60 deletions(-) diff --git a/src/styles/base/form.scss b/src/styles/base/form.scss index e5f0f12..0316a94 100644 --- a/src/styles/base/form.scss +++ b/src/styles/base/form.scss @@ -5,7 +5,8 @@ solid-form { } .form form { - display: block; + margin-left: -25px; + /*display: block; height: fit-content; margin-bottom: 75px; transition: all .3s ease; @@ -15,12 +16,16 @@ solid-form { flex-direction: column; margin-bottom: 0; transition: all .3s ease; + }*/ + + label { + display: block; } } .button-register>form>input[type=submit] { @extend .button, - .text-bold, + .text-bolder, .text-uppercase, .reversed, .button-secondary, @@ -34,13 +39,20 @@ solid-form { z-index: 1; @include breakpoint(lg) { - height: 3rem; + /*height: 3rem; left: 0; margin: 0; margin-left: auto; margin-top: 32px; position: relative; - width: auto; + width: auto;*/ + position: unset; + bottom: unset; + white-space: unset; + left: unset; + width: unset; + z-index: unset; + float: right; } } @@ -54,9 +66,9 @@ solid-form { margin-top: 1.8rem; text-transform: uppercase; - &.is-light { + /*&.is-light { color: var(--color-label-light); - } + }*/ } [name^='line-'] { @@ -77,15 +89,15 @@ solid-form { flex: 0 1 calc(50% - 2.5rem); } -.input-text-like input:not([type='file']):not([type='search']):not([type='submit']), +/*.input-text-like input:not([type='file']):not([type='search']):not([type='submit']), .input-text-like textarea { -webkit-tap-highlight-color: var(--color-grey-7); background-color: var(--color-input-background); box-sizing: border-box; border: 2px solid var(--color-input-background); - color: var(--color-input-text); + color: var(--color-input-text);*/ /*flex: 1 1 0; Problem on Firefox for input type date*/ - line-height: 1; +/* line-height: 1; margin-top: 0.8rem; min-width: 0; padding: 1rem; @@ -94,18 +106,18 @@ solid-form { &:active { border-bottom: 2px solid var(--color-input-active); } -} +}*/ -textarea { +/*textarea { height: 100px; resize: vertical; -} +}*/ -.content-box { +/*.content-box { &.with-form { - /*solid-set-default:not([name='user-thumb']) { + solid-set-default:not([name='user-thumb']) { clear: both; display: flex!important; flex-wrap: wrap; @@ -115,9 +127,9 @@ textarea { float: left; width: 50%; } - }*/ + } } -} +}*/ /*solid-form[set-user-id-select] { @@ -141,29 +153,28 @@ hubl-status { .ss-main { font-weight: normal; - margin-top: 0.8rem; + margin-top: 6px; text-transform: none; - .ss-single-selected { - background-color: var(--color-input-background); + background-color: #F6F6F6; border: none; border-radius: 0px; - color: var(--color-input-text); + color: var(--color-grey); font-weight: normal; - min-height: 4.6rem; - padding-left: 1.2rem; + min-height: 46px; + padding: 12px 14px; .ss-disabled { - color: var(--color-grey-5); + color: #7A7F85; } .ss-arrow { - font-size: 1.8rem; - margin: 0 18px 0 0; + font-size: 15px; + margin: 0 12px 0 0; span { - border: solid var(--color-input-icon); + border: solid var(--color-grey); border-width: 0 2px 2px 0; } } diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss index a1c7762..b2b29fd 100644 --- a/src/styles/base/main.scss +++ b/src/styles/base/main.scss @@ -10,7 +10,7 @@ body { background-color: var(--color-main-background); box-sizing: border-box; - color: var(--color-main-text); + color: var(--color-grey) !important; font-size: 1.6rem; /* Fix for viewport height bug in webkit for mobile */ height: -webkit-fill-available; @@ -78,6 +78,12 @@ &.margin-left { margin-left: 20px; } + &.margin-bottom { + margin-bottom: 20px; + } + &.margin-bottom-xlarge { + margin-bottom: 30px; + } &.margin-left-small { margin-left: 15px; } @@ -106,6 +112,9 @@ &.padding-xlarge { padding: 25px; } + &.padding-left-large { + padding-left: 25px + } } .avatar { @@ -256,12 +265,6 @@ display: inline-block; >solid-link { - cursor: pointer; - background: none; - display: inline-block; - padding: 0; - border: none; - >img { max-height: 100%; max-width: 100%; @@ -316,6 +319,28 @@ } } +input:not([type='file']):not([type='search']):not([type='submit']), +textarea { + border: none; + background: #F6F6F6; + color: var(--color-grey); + padding: 12px 14px; + margin-top: 6px; + line-height: 1; + width: 100%; + box-sizing: border-box; + -webkit-tap-highlight-color: var(--color-secondary); + + &:required:invalid { + border-color: 1px solid var(--color-primary); + } +} + +textarea { + height: 100px; + resize: vertical; +} + /* General styles for pagination */ nav#main__menu solid-display.nosub>nav { display: grid; @@ -838,25 +863,6 @@ h6 { } } -.backlink { - @include icon('arrow-left-circle'); - color: var(--color-backlink); - font-size: 1.5rem; - margin: 2rem 0 0 2rem; - text-decoration: underline; - - &::before { - font-size: 2rem; - margin-right: 1rem; - text-decoration: none; - } - - &.right { - display: block; - text-align: right; - } -} - .centered { text-align: center; } @@ -935,7 +941,20 @@ a, form { display: contents; } + &.backlink { + @include icon('arrow-left-circle'); + font-size: 13px; + text-decoration: underline; + &::before { + font-size: 20px; + margin-right: 15px; + text-decoration: none; + } + &:hover { + text-decoration: none; + } + } &.button { padding: 5.5px 25px; border-radius: 100em; diff --git a/src/views/admin/page-admin-circles-create.pug b/src/views/admin/page-admin-circles-create.pug index 3ed7f4c..4a8b10d 100644 --- a/src/views/admin/page-admin-circles-create.pug +++ b/src/views/admin/page-admin-circles-create.pug @@ -1,8 +1,10 @@ -div.content-box__info - solid-link(class="backlink right", next='admin-circle-list' data-trans='circle.create.backlink') - - h1.centered(data-trans='circle.create.title') +div.segment.padding-xlarge.border-bottom.clearfix + div.segment.lg-half.float-left + h2.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='circle.create.title') + div.segment.lg-half.float-left.text-right + solid-link(class="backlink", next='admin-circle-list' data-trans='circle.create.backlink') +div.segment.padding-xlarge div#loader-circles-create.loader.loader-top div div @@ -18,9 +20,9 @@ div.content-box__info required-description loader-id='loader-circles-create' - class-status='form-label is-light is-full-width color' - class-name='form-label is-light is-full-width input-text-like' - class-description='form-label is-light is-full-width input-text-like' + class-status='block segment lg-half margin-bottom padding-left-large box-border text-small text-bold text-uppercase text-color-heading' + class-name='segment lg-half float-left margin-bottom-xlarge padding-left-large box-border text-small text-bold text-uppercase text-color-heading' + class-description='segment lg-half float-left margin-bottom-xlarge padding-left-large box-border text-small text-bold text-uppercase text-color-heading' label-status='' label-name='' diff --git a/src/views/admin/page-admin-circles.pug b/src/views/admin/page-admin-circles.pug index c31b2e0..4001bb4 100644 --- a/src/views/admin/page-admin-circles.pug +++ b/src/views/admin/page-admin-circles.pug @@ -1,4 +1,4 @@ -.content-box.full-width.with-form +.content-box.full-width solid-router(default-route='admin-circle-list', hidden) solid-route(name='admin-circle-list') solid-route(name='admin-circle-create')