moved tags|warning :before|pin :before and used multiple files for [scss.global]
This commit is contained in:
xdrm-brackets
parent
cec2c491bb
commit
d3a3e13593
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.1 KiB |
|
|
@ -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 -->
|
||||
|
|
|
|||
|
|
@ -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%); }
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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}'); }
|
||||
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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%);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -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%); }
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
Reference in New Issue