feature: admin-circle-create + form and input

This commit is contained in:
gaelle morin 2020-11-25 15:28:26 +01:00
parent 5ed512794e
commit 1cd4fbf5e7
No known key found for this signature in database
GPG Key ID: 028426702B95CF9C
4 changed files with 92 additions and 60 deletions

View File

@ -5,7 +5,8 @@ solid-form {
} }
.form form { .form form {
display: block; margin-left: -25px;
/*display: block;
height: fit-content; height: fit-content;
margin-bottom: 75px; margin-bottom: 75px;
transition: all .3s ease; transition: all .3s ease;
@ -15,12 +16,16 @@ solid-form {
flex-direction: column; flex-direction: column;
margin-bottom: 0; margin-bottom: 0;
transition: all .3s ease; transition: all .3s ease;
}*/
label {
display: block;
} }
} }
.button-register>form>input[type=submit] { .button-register>form>input[type=submit] {
@extend .button, @extend .button,
.text-bold, .text-bolder,
.text-uppercase, .text-uppercase,
.reversed, .reversed,
.button-secondary, .button-secondary,
@ -34,13 +39,20 @@ solid-form {
z-index: 1; z-index: 1;
@include breakpoint(lg) { @include breakpoint(lg) {
height: 3rem; /*height: 3rem;
left: 0; left: 0;
margin: 0; margin: 0;
margin-left: auto; margin-left: auto;
margin-top: 32px; margin-top: 32px;
position: relative; 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; margin-top: 1.8rem;
text-transform: uppercase; text-transform: uppercase;
&.is-light { /*&.is-light {
color: var(--color-label-light); color: var(--color-label-light);
} }*/
} }
[name^='line-'] { [name^='line-'] {
@ -77,15 +89,15 @@ solid-form {
flex: 0 1 calc(50% - 2.5rem); 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 { .input-text-like textarea {
-webkit-tap-highlight-color: var(--color-grey-7); -webkit-tap-highlight-color: var(--color-grey-7);
background-color: var(--color-input-background); background-color: var(--color-input-background);
box-sizing: border-box; box-sizing: border-box;
border: 2px solid var(--color-input-background); 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*/ /*flex: 1 1 0; Problem on Firefox for input type date*/
line-height: 1; /* line-height: 1;
margin-top: 0.8rem; margin-top: 0.8rem;
min-width: 0; min-width: 0;
padding: 1rem; padding: 1rem;
@ -94,18 +106,18 @@ solid-form {
&:active { &:active {
border-bottom: 2px solid var(--color-input-active); border-bottom: 2px solid var(--color-input-active);
} }
} }*/
textarea { /*textarea {
height: 100px; height: 100px;
resize: vertical; resize: vertical;
} }*/
.content-box { /*.content-box {
&.with-form { &.with-form {
/*solid-set-default:not([name='user-thumb']) { solid-set-default:not([name='user-thumb']) {
clear: both; clear: both;
display: flex!important; display: flex!important;
flex-wrap: wrap; flex-wrap: wrap;
@ -115,9 +127,9 @@ textarea {
float: left; float: left;
width: 50%; width: 50%;
} }
}*/ }
} }
} }*/
/*solid-form[set-user-id-select] { /*solid-form[set-user-id-select] {
@ -141,29 +153,28 @@ hubl-status {
.ss-main { .ss-main {
font-weight: normal; font-weight: normal;
margin-top: 0.8rem; margin-top: 6px;
text-transform: none; text-transform: none;
.ss-single-selected { .ss-single-selected {
background-color: var(--color-input-background); background-color: #F6F6F6;
border: none; border: none;
border-radius: 0px; border-radius: 0px;
color: var(--color-input-text); color: var(--color-grey);
font-weight: normal; font-weight: normal;
min-height: 4.6rem; min-height: 46px;
padding-left: 1.2rem; padding: 12px 14px;
.ss-disabled { .ss-disabled {
color: var(--color-grey-5); color: #7A7F85;
} }
.ss-arrow { .ss-arrow {
font-size: 1.8rem; font-size: 15px;
margin: 0 18px 0 0; margin: 0 12px 0 0;
span { span {
border: solid var(--color-input-icon); border: solid var(--color-grey);
border-width: 0 2px 2px 0; border-width: 0 2px 2px 0;
} }
} }

View File

@ -10,7 +10,7 @@
body { body {
background-color: var(--color-main-background); background-color: var(--color-main-background);
box-sizing: border-box; box-sizing: border-box;
color: var(--color-main-text); color: var(--color-grey) !important;
font-size: 1.6rem; font-size: 1.6rem;
/* Fix for viewport height bug in webkit for mobile */ /* Fix for viewport height bug in webkit for mobile */
height: -webkit-fill-available; height: -webkit-fill-available;
@ -78,6 +78,12 @@
&.margin-left { &.margin-left {
margin-left: 20px; margin-left: 20px;
} }
&.margin-bottom {
margin-bottom: 20px;
}
&.margin-bottom-xlarge {
margin-bottom: 30px;
}
&.margin-left-small { &.margin-left-small {
margin-left: 15px; margin-left: 15px;
} }
@ -106,6 +112,9 @@
&.padding-xlarge { &.padding-xlarge {
padding: 25px; padding: 25px;
} }
&.padding-left-large {
padding-left: 25px
}
} }
.avatar { .avatar {
@ -256,12 +265,6 @@
display: inline-block; display: inline-block;
>solid-link { >solid-link {
cursor: pointer;
background: none;
display: inline-block;
padding: 0;
border: none;
>img { >img {
max-height: 100%; max-height: 100%;
max-width: 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 */ /* General styles for pagination */
nav#main__menu solid-display.nosub>nav { nav#main__menu solid-display.nosub>nav {
display: grid; 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 { .centered {
text-align: center; text-align: center;
} }
@ -935,7 +941,20 @@ a,
form { form {
display: contents; 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 { &.button {
padding: 5.5px 25px; padding: 5.5px 25px;
border-radius: 100em; border-radius: 100em;

View File

@ -1,8 +1,10 @@
div.content-box__info div.segment.padding-xlarge.border-bottom.clearfix
solid-link(class="backlink right", next='admin-circle-list' data-trans='circle.create.backlink') div.segment.lg-half.float-left
h2.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='circle.create.title')
h1.centered(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#loader-circles-create.loader.loader-top
div div
div div
@ -18,9 +20,9 @@ div.content-box__info
required-description required-description
loader-id='loader-circles-create' loader-id='loader-circles-create'
class-status='form-label is-light is-full-width color' class-status='block segment lg-half margin-bottom padding-left-large box-border text-small text-bold text-uppercase text-color-heading'
class-name='form-label is-light is-full-width input-text-like' 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='form-label is-light is-full-width input-text-like' 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-status=''
label-name='' label-name=''

View File

@ -1,4 +1,4 @@
.content-box.full-width.with-form .content-box.full-width
solid-router(default-route='admin-circle-list', hidden) solid-router(default-route='admin-circle-list', hidden)
solid-route(name='admin-circle-list') solid-route(name='admin-circle-list')
solid-route(name='admin-circle-create') solid-route(name='admin-circle-create')