moved tags|warning :before|pin :before and used multiple files for [scss.global]

This commit is contained in:
xdrm-brackets 2018-03-14 17:40:41 +01:00
parent cec2c491bb
commit d3a3e13593
8 changed files with 339 additions and 319 deletions

View File

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB

View File

@ -73,12 +73,11 @@
<!-- if VIEW MODE -->
<div v-show='gstore.edit_i!=pi' class='sub warning' :data-state='ue.required ? 1 : 0'>{{ ue.required ? 'UE obligatoire' : 'UE optionnelle' }}</div>
<div v-show='gstore.edit_i!=pi' :class="ue.required ? 'sub pin' : 'sub pin neutral'">{{ ue.required ? 'UE obligatoire' : 'UE optionnelle' }}</div>
<div v-show='gstore.edit_i!=pi' class='sub'><strong>{{ ue.volumeCours + ue.volumeTD + ue.volumeTP }}h</strong> totales</div>
<div v-show='gstore.edit_i!=pi' class='taglist'>
<span v-for='form_id in ue.formations' :class="!!gstore.form_by_id(form_id).isInternal ? 'search' : ''">{{ gstore.form_by_id(form_id).labelForm || '???' }}</span>
<span class='search'>M2 INFO (S1)</span>
<span>LPRO</span>
<span v-if='ue.formations.length==0' class='tag invalid'>Aucune formation</span>
<span v-for='form_id in ue.formations' :class="!!gstore.form_by_id(form_id).isInternal ? 'tag search' : 'tag'">{{ gstore.form_by_id(form_id).labelForm || '???' }}</span>
</div>
<!-- if EDIT MODE -->

View File

@ -117,8 +117,8 @@
display: inline-block;
position: relative;
// - marg - padd - [NEW] - separ
flex: 0 1 calc( 100% - 2*1em - 2*.5em - 2em - 2*1em );
flex: 1 0 70%; // 70% to almost fill the line
height: 1.2em;
margin: 1em .5em;
padding: .5em 1em;
@ -384,21 +384,21 @@
justify-content: flex-start;
flex-wrap: nowrap;
&.warning:before{
content: '';
// &.warning:before{
// content: '';
display: inline-block;
position: relative;
width: 1.2em;
height: 1em;
// display: inline-block;
// position: relative;
// width: 1.2em;
// height: 1em;
margin-right: .3em;
// margin-right: .3em;
background: url('/asset/svg/warning_radio.svg@#{$rd-form-invalid-color}') center bottom no-repeat;
background-size: auto 90%;
// background: url('/asset/svg/warning_radio.svg@#{$rd-form-invalid-color}') center bottom no-repeat;
// background-size: auto 90%;
text-anchor: center;
}
// text-anchor: center;
// }
/* (5-edit) Card title -> edit inputs */
& input{
@ -651,87 +651,9 @@
color: lighten($primary-color, 20%);
&:before{
content: '';
display: inline-block;
position: relative;
width: 0em;
height: 1em;
background: center bottom -.1em no-repeat;
background-size: auto .9em;
text-anchor: center;
}
&.warning{
color: $form-invalid-color;
&:before{
width: 1em;
margin-right: .3em;
background-image: url('/asset/svg/warning_radio.svg@#{$rd-form-invalid-color}');
}
&[data-valid='1']{
color: $form-valid-color;
}
// state style
&[data-state]{
color: $form-neutral-color;
&:before,
&[data-state='0']:before{
background-image: url('/asset/svg/pin.svg@#{$rd-form-neutral-color}');
background-position: center center;
background-size: auto 100%;
}
&[data-state='1']:before{
background-image: url('/asset/svg/pin.svg@#{$rd-form-invalid-color}');
}
};
}
}
/* (9) Card tag list */
& > div.taglist{
display: flex;
margin-top: 1em;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
/* (9.1) inner tags */
& > span{
padding: .2em .5em;
margin-right: .5em;
border: 1px solid lighten($form-neutral-color, 5%);
border-radius: 3px;
background-color: #f9f9f9;
color: #999;
font-size: .8em;
cursor: default;
&.valid{ border-color: lighten($form-valid-color, 20%); }
&.invalid{ border-color: lighten($form-invalid-color, 20%); }
&.search{ border-color: lighten($form-search-color, 10%); }
}
}
}

View File

@ -1,235 +1,23 @@
@import 'constants';
/* (1) Champs de texte */
input[type=text], .neutral > input[type=text],
input[type=mail], .neutral > input[type=mail],
input[type=password], .neutral > input[type=password],
select, .neutral > select,
input[type=text].neutral,
input[type=mail].neutral,
input[type=password].neutral,
select.neutral{
/* (1) Input */
@import 'global/input';
display: inline-block;
margin: 1em;
padding: .5em 1em;
/* (2) Button */
@import 'global/button';
border-radius: 3px;
border: 1px solid $form-neutral-color;
/* (3) classes that add icons before text */
@import 'global/before-icon';
background-color: #fff;
font-family: inherit;
color: lighten($primary-color, 15%);
transition: border .2s ease-in-out,
color .2s ease-in-out;
&:focus, &:hover{
border-color: darken($form-neutral-color, 10%);
color: $primary-color;
}
}
select{
width: 100%;
display: block;
background: #fff;
option{
padding: .5em;
}
}
// Champs valides
.valid > input[type=text],
.valid > input[type=mail],
.valid > input[type=password],
.valid > select,
input.valid[type=text],
input.valid[type=mail],
input.valid[type=password],
select.valid{
border-color: darken($form-valid-color, 0%);
&:focus, &:hover{
border-color: darken($form-valid-color, 10%);
}
}
// Champs neutres
.invalid > input[type=text],
.invalid > input[type=mail],
.invalid > input[type=password],
.invalid > select,
input.invalid[type=text],
input.invalid[type=mail],
input.invalid[type=password],
select.invalid{
border-color: darken($form-invalid-color, 0%);
&:focus, &:hover{
border-color: darken($form-invalid-color, 10%);
}
}
// Champs neutres
.search > input[type=text],
.search > input[type=mail],
.search > input[type=password],
.search > select,
input.search[type=text],
input.search[type=mail],
input.search[type=password]{
border-color: darken($form-search-color, 0%);
&:focus, &:hover{
border-color: darken($form-search-color, 10%);
}
}
/* (4) tags */
@import 'global/tag';
/* (2) Boutons */
button, .neutral > button,
input[type=button], .neutral > input[type=button],
input[type=submit], .neutral > input[type=submit],
button.neutral,
input[type=button].neutral,
input[type=submit].neutral{
display: inline-block;
position: relative;
padding: .5em 1em;
border-radius: 3px;
border: 1px solid $form-neutral-color;
background: #fff center center no-repeat;
text-transform: uppercase;
font-weight: normal;
font-family: inherit;
color: $primary-color;
cursor: pointer;
transition: color .2s ease-in-out,
border-color .1s ease-in-out,
background .2s ease-in-out;
&:hover, &[data-active='1']{
color: #fff;
border-color: $form-neutral-color;
background-color: $form-neutral-color;
}
}
// Boutons grisés
button:disabled,
button.grey, .grey > button,
input[type=button].grey, .grey > input[type=button],
input[type=submit].grey, .grey > input[type=submit]{
color: $form-grey-color;
&:hover, &[data-active='1']{
color: #fff;
border-color: $form-grey-color;
background-color: $form-grey-color;
}
cursor: default;
}
// Boutons valides
button.valid, .valid > button,
input[type=button].valid, .valid > input[type=button],
input[type=submit].valid, .valid > input[type=submit]{
color: $form-valid-color;
&:hover, &[data-active='1']{
color: #fff;
border-color: $form-valid-color;
background-color: $form-valid-color;
}
}
// Boutons invalides
button.invalid, .invalid > button,
input[type=button].invalid, .invalid > input[type=button],
input[type=submit].invalid, .invalid > input[type=submit]{
color: $form-invalid-color;
&:hover, &[data-active='1']{
color: #fff;
border-color: $form-invalid-color;
background-color: $form-invalid-color;
}
}
// Boutons recherche
button.search, .search > button,
input[type=button].search, .search > input[type=button],
input[type=submit].search, .search > input[type=submit]{
color: $form-search-color;
&:hover, &[data-active='1']{
color: #fff;
border-color: $form-search-color;
background-color: $form-search-color;
}
}
// Boutons quand action validee
.invalid > button.active,
button.invalid.active,
button.active{
background-color: #fff;
background-image: url('/src/static/container/active@#{$rd-form-invalid-color}.svg') !important;
background-size: 1em auto;
color: transparent !important;
}
button.valid.active,
.valid > button.active{
background-image: url('/src/static/container/active@#{$rd-form-valid-color}.svg') !important;
}
button.neutral.active,
.neutral > button.active{
background-image: url('/src/static/container/active@#{$rd-form-neutral-color}.svg') !important;
}
button.search.active,
.search > button.active{
background-image: url('/src/static/container/active@#{$rd-form-search-color}.svg') !important;
}
// Liens
/* (4) Links */
a{
color: inherit;
text-decoration: none;
@ -252,8 +40,8 @@ a{
}
}
// Textes
/* (5) Greyed text */
.grey{
color: $secondary-color;
}

View File

@ -0,0 +1,49 @@
@import '../constants';
/* (1) Warning icon */
.warning,
.pin{
// add icon before
&:before{
content: '';
display: inline-block;
position: relative;
width: 1.2em;
height: 1em;
margin-right: .3em;
background: url('/asset/svg/warning.svg@#{$rd-form-invalid-color}') center center no-repeat;
background-size: auto 90%;
text-anchor: center;
}
// icon color variants
&.neutral:before{ background-image: url('/asset/svg/warning.svg@#{$rd-form-neutral-color}'); }
&.valid:before{ background-image: url('/asset/svg/warning.svg@#{$rd-form-valid-color}'); }
&.search:before{ background-image: url('/asset/svg/warning.svg@#{$rd-form-search-color}'); }
// force red text
&.invalid{ color: $form-invalid-color; }
}
/* (2) Pin icon */
.pin{
// add icon before
&:before{
background-image: url('/asset/svg/pin.svg@#{$rd-form-invalid-color}');
}
// icon color variants
&.neutral:before{ background-image: url('/asset/svg/pin.svg@#{$rd-form-neutral-color}'); }
&.valid:before{ background-image: url('/asset/svg/pin.svg@#{$rd-form-valid-color}'); }
&.search:before{ background-image: url('/asset/svg/pin.svg@#{$rd-form-search-color}'); }
}

View File

@ -0,0 +1,102 @@
@import '../constants';
/* (1) BUTTON (neutral) */
button, .neutral > button,
input[type=button], .neutral > input[type=button],
input[type=submit], .neutral > input[type=submit],
button.neutral,
input[type=button].neutral,
input[type=submit].neutral{
display: inline-block;
position: relative;
padding: .5em 1em;
border-radius: 3px;
border: 1px solid $form-neutral-color;
background: #fff center center no-repeat;
text-transform: uppercase;
font-weight: normal;
font-family: inherit;
color: $primary-color;
cursor: pointer;
transition: color .2s ease-in-out,
border-color .1s ease-in-out,
background .2s ease-in-out;
&:hover, &[data-active='1']{
color: #fff;
border-color: $form-neutral-color;
background-color: $form-neutral-color;
}
}
/* (1) valid */
button.valid, .valid > button,
input[type=button].valid, .valid > input[type=button],
input[type=submit].valid, .valid > input[type=submit]{
color: $form-valid-color;
&:hover, &[data-active='1']{
color: #fff;
border-color: $form-valid-color;
background-color: $form-valid-color;
}
}
/* (1) invalid */
button.invalid, .invalid > button,
input[type=button].invalid, .invalid > input[type=button],
input[type=submit].invalid, .invalid > input[type=submit]{
color: $form-invalid-color;
&:hover, &[data-active='1']{
color: #fff;
border-color: $form-invalid-color;
background-color: $form-invalid-color;
}
}
/* (1) search */
button.search, .search > button,
input[type=button].search, .search > input[type=button],
input[type=submit].search, .search > input[type=submit]{
color: $form-search-color;
&:hover, &[data-active='1']{
color: #fff;
border-color: $form-search-color;
background-color: $form-search-color;
}
}
/* (1) valid grey */
button:disabled,
button.grey, .grey > button,
input[type=button].grey, .grey > input[type=button],
input[type=submit].grey, .grey > input[type=submit]{
color: $form-grey-color;
&:hover, &[data-active='1']{
color: #fff;
border-color: $form-grey-color;
background-color: $form-grey-color;
}
cursor: default;
}

View File

@ -0,0 +1,123 @@
@import '../constants';
/* (1) INPUT (neutral) */
input[type=text], .neutral > input[type=text],
input[type=mail], .neutral > input[type=mail],
input[type=password], .neutral > input[type=password],
select, .neutral > select,
input[type=text].neutral,
input[type=mail].neutral,
input[type=password].neutral,
select.neutral{
display: inline-block;
margin: 1em;
padding: .5em 1em;
border-radius: 3px;
border: 1px solid $form-neutral-color;
background-color: #fff;
font-family: inherit;
color: lighten($primary-color, 15%);
transition: border .2s ease-in-out,
color .2s ease-in-out;
&:focus, &:hover{
border-color: darken($form-neutral-color, 10%);
color: $primary-color;
}
}
/* (2) SELECT (neutral) */
select{
width: 100%;
display: block;
background: #fff;
option{
padding: .5em;
}
}
/* (1)(2) valid */
.valid > input[type=text],
.valid > input[type=mail],
.valid > input[type=password],
.valid > select,
input.valid[type=text],
input.valid[type=mail],
input.valid[type=password],
select.valid{
border-color: darken($form-valid-color, 0%);
&:focus, &:hover{
border-color: darken($form-valid-color, 10%);
}
}
/* (1)(2) invalid */
.invalid > input[type=text],
.invalid > input[type=mail],
.invalid > input[type=password],
.invalid > select,
input.invalid[type=text],
input.invalid[type=mail],
input.invalid[type=password],
select.invalid{
border-color: darken($form-invalid-color, 0%);
&:focus, &:hover{
border-color: darken($form-invalid-color, 10%);
}
}
/* (1)(2) search */
.search > input[type=text],
.search > input[type=mail],
.search > input[type=password],
.search > select,
input.search[type=text],
input.search[type=mail],
input.search[type=password]{
border-color: darken($form-search-color, 0%);
&:focus, &:hover{
border-color: darken($form-search-color, 10%);
}
}
/* (1)(2) grey */
.grey > input[type=text],
.grey > input[type=mail],
.grey > input[type=password],
.grey > select,
input.grey[type=text],
input.grey[type=mail],
input.grey[type=password]{
border-color: darken($form-grey-color, 0%);
&:focus, &:hover{
border-color: darken($form-grey-color, 10%);
}
}

View File

@ -0,0 +1,37 @@
@import '../constants';
/* (1) Tag list */
.taglist{
display: flex;
margin-top: 1em;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
/* (9.1) inner tags */
& > span.tag{
padding: .2em .5em;
margin-right: .5em;
border: 1px solid lighten($form-neutral-color, 5%);
border-radius: 3px;
background-color: #f9f9f9;
color: #999;
font-size: .8em;
cursor: default;
&.valid{ border-color: lighten($form-valid-color, 20%); }
&.invalid{ border-color: lighten($form-invalid-color, 20%); }
&.search{ border-color: lighten($form-search-color, 10%); }
}
}