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 -->
|
<!-- 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='sub'><strong>{{ ue.volumeCours + ue.volumeTD + ue.volumeTP }}h</strong> totales</div>
|
||||||
<div v-show='gstore.edit_i!=pi' class='taglist'>
|
<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 v-if='ue.formations.length==0' class='tag invalid'>Aucune formation</span>
|
||||||
<span class='search'>M2 INFO (S1)</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>
|
||||||
<span>LPRO</span>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- if EDIT MODE -->
|
<!-- if EDIT MODE -->
|
||||||
|
|
|
||||||
|
|
@ -117,8 +117,8 @@
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
// - marg - padd - [NEW] - separ
|
flex: 1 0 70%; // 70% to almost fill the line
|
||||||
flex: 0 1 calc( 100% - 2*1em - 2*.5em - 2em - 2*1em );
|
height: 1.2em;
|
||||||
|
|
||||||
margin: 1em .5em;
|
margin: 1em .5em;
|
||||||
padding: .5em 1em;
|
padding: .5em 1em;
|
||||||
|
|
@ -384,21 +384,21 @@
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
|
|
||||||
&.warning:before{
|
// &.warning:before{
|
||||||
content: '';
|
// content: '';
|
||||||
|
|
||||||
display: inline-block;
|
// display: inline-block;
|
||||||
position: relative;
|
// position: relative;
|
||||||
width: 1.2em;
|
// width: 1.2em;
|
||||||
height: 1em;
|
// height: 1em;
|
||||||
|
|
||||||
margin-right: .3em;
|
// margin-right: .3em;
|
||||||
|
|
||||||
background: url('/asset/svg/warning_radio.svg@#{$rd-form-invalid-color}') center bottom no-repeat;
|
// background: url('/asset/svg/warning_radio.svg@#{$rd-form-invalid-color}') center bottom no-repeat;
|
||||||
background-size: auto 90%;
|
// background-size: auto 90%;
|
||||||
|
|
||||||
text-anchor: center;
|
// text-anchor: center;
|
||||||
}
|
// }
|
||||||
|
|
||||||
/* (5-edit) Card title -> edit inputs */
|
/* (5-edit) Card title -> edit inputs */
|
||||||
& input{
|
& input{
|
||||||
|
|
@ -651,87 +651,9 @@
|
||||||
|
|
||||||
color: lighten($primary-color, 20%);
|
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';
|
@import 'constants';
|
||||||
|
|
||||||
/* (1) Champs de texte */
|
/* (1) Input */
|
||||||
input[type=text], .neutral > input[type=text],
|
@import 'global/input';
|
||||||
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;
|
/* (2) Button */
|
||||||
margin: 1em;
|
@import 'global/button';
|
||||||
padding: .5em 1em;
|
|
||||||
|
|
||||||
border-radius: 3px;
|
/* (3) classes that add icons before text */
|
||||||
border: 1px solid $form-neutral-color;
|
@import 'global/before-icon';
|
||||||
|
|
||||||
background-color: #fff;
|
/* (4) tags */
|
||||||
|
@import 'global/tag';
|
||||||
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%);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* (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;
|
/* (4) Links */
|
||||||
|
|
||||||
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
|
|
||||||
a{
|
a{
|
||||||
color: inherit;
|
color: inherit;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
@ -252,8 +40,8 @@ a{
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* (5) Greyed text */
|
||||||
// Textes
|
|
||||||
.grey{
|
.grey{
|
||||||
color: $secondary-color;
|
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