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 {
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;
}
}

View File

@ -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;

View File

@ -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=''

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-route(name='admin-circle-list')
solid-route(name='admin-circle-create')