hubl/src/styles/base/form.scss

415 lines
8.0 KiB
SCSS
Raw Normal View History

2019-05-14 15:32:42 +00:00
.content-box {
&.with-form {
hd-template-project-title {
border-bottom: 1px solid $color-221-51-90;
color: $color-233-18-29;
font-size: 1.8rem;
font-weight: 600;
padding-bottom: 1rem;
}
sib-form {
border-bottom: 1px solid $color-210-17-91;
padding-bottom: 2.55rem;
}
h1 {
color: $color-233-18-29;
font-weight: bold;
font-size: 2rem;
text-align: center;
}
2019-05-14 16:19:30 +00:00
p.center {
2019-05-14 15:32:42 +00:00
text-align: center;
}
[name$='-text'] {
font-size: 1.5rem;
margin-bottom: 2rem;
2019-05-14 15:32:42 +00:00
}
div[name^='block-'] {
display: flex;
flex-direction: column;
}
label {
display: flex;
flex-direction: column;
input {
-webkit-appearance: none;
background-color: $color-222-57-95;
border: none;
color: $color-233-18-29;
flex: 1 1 0;
margin-top: 0.8rem;
min-width: 0;
padding: 1.2rem;
}
}
input[type='submit'] {
margin-top: 6rem;
background-color: $color-233-18-29;
border: none;
border-radius: 100em;
color: $color-0-0-100;
float: right;
font-size: 1.4rem;
font-weight: bold;
padding: 0.85rem 2.55rem;
text-transform: uppercase;
}
/* CLASSES Peut-être à sortir de .content-box */
.form-label {
font-weight: 600;
&.is-dark label > div {
color: $color-216-4-22;
}
&.is-light label > div {
color: $color-244-10-70;
text-transform: uppercase;
}
}
.large-margin>p{
margin-bottom: 3rem;
}
.small-margin>p {
margin-bottom: 2.2rem;
}
/* WIDGETS */
sib-multiple-select {
sib-form-auto-completion > label {
display: flex;
flex-direction: column;
.ss-main {
margin-top: 1.6rem;
width: 70%;
.ss-multi-selected {
align-items: center;
background-color: $color-222-57-95;
border: none;
border-radius: 0px;
display: flex;
justify-content: flex-end;
height: 4.2rem;
.ss-values {
background: transparent;
position: absolute;
top: 6rem;
width: 100%;
}
.ss-disabled {
color: transparent;
}
.ss-add {
@include icon('plus');
color: $color-244-73-62;
font-size: 1.8rem;
margin: 0px 12px 0 38px;
position: absolute;
span.ss-plus {
align-self: center;
background: transparent;
&::after {
background: transparent;
}
}
}
.ss-values {
.ss-value {
@extend .skill;
display: flex;
.ss-value-delete {
font-weight: normal;
}
}
}
}
}
}
}
/*
2019-05-14 15:32:42 +00:00
input {
-webkit-appearance: none;
align-items: center;
background: $color-222-57-95;
border: none;
color: $color-233-18-29;
display: inline-flex;
justify-content: flex-start;
line-height: 1.5;
vertical-align: top;
}
sib-form-auto-completion,
sib-form-checkbox,
sib-form-dropdown,
sib-form-label-text,
sib-form-multiple-dropdown,
sib-form-number,
sib-form-textarea {
display: flex;
flex-direction: column;
>label {
color: $color-244-10-70;
font-weight: 600;
margin: 2em 0 0.5em;
text-transform: uppercase;
>div {
padding-bottom: 1rem;
}
}
select,
textarea {
background: $color-222-57-95;
border: none;
color: $color-233-18-29;
line-height: 1.5;
width: 100%;
}
select,
textarea {
padding: 1.7rem;
}
select {
margin-bottom: 1.7rem;
}
}
sib-form-auto-completion,
sib-form-checkbox,
sib-form-multiple-dropdown {
label {
color: $color-216-4-22;
font-weight: 600;
text-transform: initial;
}
}
sib-form-auto-completion {
div.choices__inner {
background-color: inherit;
border: none;
display: flex;
flex-direction: column-reverse;
padding-left: 0;
div.choices__list {
margin-top: 1.7rem;
div.choices__item {
button.choices__button {
border-left: 1px solid $color-43-100-50;
opacity: 1;
padding-left: 0;
}
}
}
input[type='text'].choices__input {
max-width: 27.2rem;
min-width: 27.2rem;
}
}
}
sib-form-checkbox {
flex-direction: row;
[type='checkbox'] {
position: relative;
margin-top: 2em;
&:before {
border: 2px solid $color-210-5-56;
content: '';
height: 1rem;
left: 0;
margin-left: 1rem;
padding-bottom: 0.2rem;
position: absolute;
width: 1.2rem;
z-index: 1;
}
&:checked {
&:before {
border: 2px solid $color-210-5-56;
color: $color-244-73-62;
height: 1rem;
left: 0;
margin-left: 1rem;
padding-bottom: 0.2rem;
position: absolute;
width: 1.2rem;
z-index: 1;
@include mdi('check');
}
}
&:after {
background: $color-0-0-100;
content: '';
height: 1rem;
position: absolute;
width: 1rem;
}
}
}
sib-form-dropdown {
select {
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
background-image: url("/images/chevron-down.png");
background-position: right 12px top 60%;
background-repeat: no-repeat;
background-size: 14px 9px;
box-sizing: border-box;
}
}
*/
2019-05-14 15:32:42 +00:00
/* A REFACTORISER. PAS ENCORE UTILISE SUR L'APPLI */
/*
2019-05-14 15:32:42 +00:00
sib-form-multiple-dropdown {
button {
appearance: none;
background-color: $color-0-0-100;
border: 1px solid;
border-radius: 100%;
color: $color-244-73-62;
font-size: 2.55rem;
height: 1em;
line-height: 0;
margin: 0.34rem;
padding: 0 0.04em 0.08em;
vertical-align: middle;
width: 1em;
}
}
sib-form-textarea {
align-items: stretch;
}
sib-multiple-form {
>label {
display: none;
}
}
input[type='submit'] {
margin-top: 6rem;
background-color: $color-233-18-29;
color: $color-0-0-100;
float: right;
font-weight: bold;
text-transform: uppercase;
}
*/
2019-05-14 15:32:42 +00:00
}
/*
2019-05-14 15:32:42 +00:00
.is-horizontal {
display: flex;
}
sib-multiple-form[name='members'] {
>div {
align-items: center;
display: flex;
}
>div:not(:nth-child(-n + 2)) {
label {
>div {
display: none;
}
}
}
button {
appearance: none;
background-color: $color-0-0-100;
border: 1px solid;
border-radius: 100%;
color: $color-244-73-62;
font-size: 2.55rem;
height: 1em;
line-height: 0;
margin: 0.34rem;
padding: 0 0.04em 0.08em;
vertical-align: middle;
width: 1em;
&::after {
content: Add;
}
}
}
*/
2019-05-14 15:32:42 +00:00
}
/*
2019-05-14 15:32:42 +00:00
sib-form {
form > * {
margin-top: 0.85rem;
}
// button like
input[type='color'],
input[type='file'],
input[type='reset'],
input[type='submit'] {
display: inline-block;
padding: 0.85rem 2.55rem;
border: none;
border-radius: 100em;
font-weight: normal;
}
input[type='reset'] {
display: none;
}
}
*/