<div class="c-starter c-starter--simple c-starter--login ">
<p class="c-starter__title">Area riservata</p>
<form class="c-form">
<label for="user-field" class="">
Nome utente <span class="required-marker" aria-hidden="true">*</span>
<input id="user-field" type="text" class="" placeholder="Inserisci il tuo nome utente" value="" aria-describedby="user-field-note">
<p class="c-field__note u-visuallyhidden" id="user-field-note">
Inserisci il tuo nome utente
</p>
</label>
<label for="password-field" class="has-password-button">
Password <span class="required-marker" aria-hidden="true">*</span>
<input id="password-field" type="password" class="" placeholder="Inserisci la tua password" value="" aria-describedby="password-field-note" autocomplete="current-password">
<button type="button" class="js-pwd-button" data-show-text="Mostra" data-hide-text="Nascondi" aria-label="Mostra password">Mostra</button>
<p class="c-field__note u-visuallyhidden" id="password-field-note">
Inserisci la password per la tua area riservata
</p>
</label>
<input type="checkbox" id="remember-data" name="remember-data" class="u-visuallyhidden " role="group" aria-label="remember-data">
<label for="remember-data" class="">
Ricorda i dati d'accesso
</label> <button type="submit" class="c-button c-button--submit">
Accedi
</button>
</form>
</div>
<div class="c-starter c-starter--simple c-starter--login {{ modifier }}">
<p class="c-starter__title">{{{ title }}}</p>
<form class="c-form">
{{> @input--default user }}
{{> @input--default password }}
{{> @checkbox rememberme }}
{{> @button login-btn }}
</form>
</div>
{
"title": "Area riservata",
"user": {
"label_id": "user-field",
"label_message": "Nome utente",
"label_class": null,
"atom-input": {
"id": "user-field",
"type": "text",
"class": null,
"placeholder": "Inserisci il tuo nome utente",
"required": true,
"hasNote": true,
"describedby": "user-field-note"
},
"note_id": "user-field-note",
"note_message": "Inserisci il tuo nome utente",
"note_class": "u-visuallyhidden"
},
"password": {
"label_id": "password-field",
"label_message": "Password",
"label_class": "has-password-button",
"hasPasswordButton": true,
"atom-input": {
"id": "password-field",
"type": "password",
"class": null,
"placeholder": "Inserisci la tua password",
"required": true,
"autocomplete": "current-password",
"hasNote": true,
"describedby": "password-field-note"
},
"note_id": "password-field-note",
"note_message": "Inserisci la password per la tua area riservata",
"note_class": "u-visuallyhidden"
},
"rememberme": {
"id": "remember-data",
"name": "remember-data",
"text": "Ricorda i dati d'accesso"
},
"login-btn": {
"type": "submit",
"text": "Accedi",
"modifier": "c-button--submit"
}
}
.c-starter {
margin-bottom: remify(16px);
padding-bottom: remify(16px);
&.c-starter--padding {
padding: remify(24px);
}
.c-title-trend & {
box-shadow: none;
padding: 0;
}
.c-canvas--map & {
margin-bottom: 0;
}
}
.c-starter__title {
text-transform: uppercase;
color: primary(night, 100);
font-weight: fw(bold);
margin-bottom: remify(16px);
.c-title-trend & {
color: primary(night, 80);
}
}
.c-starter li {
margin-bottom: remify(8px);
&:last-child {
margin-bottom: 0;
}
}
.c-starter li ul {
margin-top: remify(8px);
padding-left: remify(20px);
}
.c-starter li ul li {
list-style-type: disc;
}
.c-starter p {
margin-bottom: remify(16px);
}
.c-starter__map {
}
.c-starter__footer {
margin-top: remify(-16px);
display: flex;
align-items: center;
border-bottom-right-radius: remify(6px);
border-bottom-left-radius: remify(6px);
color: secondary(page, 100);
background-color: primary(sky, 120);
padding: remify(16px);
font-size: remify(14px);
@include min-screen (bp(tablet-p)) {
padding: remify(32px) remify(24px);
font-size: remify(16px);
}
p {
margin: 0 0 remify(16px) remify(24px);
font-weight: fw(bold);
}
a {
margin-left: remify(24px);
color: secondary(page, 100);
}
}
/*------------------------------------*\
Simple modifier
\*------------------------------------*/
.c-starter--simple {
background-color: #fff;
}
/*------------------------------------*\
Folder Icon modifier
\*------------------------------------*/
.c-starter--folders {
padding: remify(16px);
li a {
padding-left: remify(32px);
}
li.has-icon > a {
background-image: url(../../images/svgs/folders.svg);
background-repeat: no-repeat;
background-position: center left;
background-size: contain;
}
}
/*------------------------------------*\
Login modifier
\*------------------------------------*/
.c-starter--login {
.c-form .c-button--submit {
display: block;
margin-top: remify(16px);
}
}
/*------------------------------------*\
Inverted modifier
\*------------------------------------*/
.c-starter--inverted {
background-color: primary(night, 80);
color: #fff;
border-radius: remify(16px);
margin-bottom: remify(32px);
.c-starter__title,
a {
color: currentColor;
}
}
/*------------------------------------*\
Archive modifier
\*------------------------------------*/
.c-starter--archive {
li.is-nested {
margin-top: remify(16px);
padding: remify(12px) remify(16px);
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
}
.c-starter__input-toggle,
.c-starter__target {
display: none;
}
.u-chkbx-toggle:checked ~ .c-starter__target {
display: block;
}
.c-starter__toggle {
position: relative;
display: block;
}
.c-starter__toggle:after {
content: '\276F';
color: #fff;
display: block;
position: absolute;
top: remify(0px);
font-size: remify(16px);
right: remify(0px);
transform: rotate(90deg);
}
.u-chkbx-toggle:checked ~ .c-starter__toggle:after {
transform: rotate(-90deg);
color: primary(sun, 120);
}
}
/*------------------------------------*\
Textual modifier
\*------------------------------------*/
.c-starter--textual {
h3 {
font-size: 125%;
font-weight: fw(regular);
margin-bottom: remify(8px);
@include min-screen(bp(tablet)) {
font-size: 150%;
}
}
.c-link {
margin-bottom: remify(24px);
}
}
/*------------------------------------*\
Feed modifier
\*------------------------------------*/
.c-starter--feed {
padding: remify(24px);
border-radius: remify(16px);
@include shadow(medium);
background-color: secondary(soft, 100);
background: linear-gradient(180deg, #FFFFFF 39%, #EAF2FB 135.82%, #F4F4F4 144.03%);
border: 2px solid primary(night,10);
@include min-screen (bp(tablet-p)) {
ul { max-width: remify(250px); }
}
}
/*------------------------------------*\
Alert modifier
\*------------------------------------*/
.c-starter--alert {
border: 2px solid status(negative);
}
/*------------------------------------*\
Identity modifier
\*------------------------------------*/
.c-starter--identity {
.identity-image {
display: inline-block;
@include shadow(medium);
padding: remify(16px);
border-radius: remify(16px);
margin-bottom: remify(24px);
margin-right: remify(24px);
img {
max-width: remify(110px);
}
}
.fulltext p,
.less {
display: none;
}
.fulltext:target p,
.fulltext:target .less {
display: block;
}
.fulltext:target .more {
display: none;
}
}
.c-starter__app-links {
p {
margin-bottom: remify(16px);
}
li {
display: inline-block;
margin-right: remify(16px);
}
}
No notes defined.