ptut-vhost/webpack/scss/container/list.scss

199 lines
3.6 KiB
SCSS

@import '../constants';
/* [3] List style -> container
---------------------------------*/
#CONTAINER.list{
animation: bg-fade .2s ease-out forwards;
}
#CONTAINER > div.list.container{
display: flex;
// flex properties
flex-direction: row;
justify-content: stretch;
align-items: flex-start;
flex-wrap: wrap;
/* (1) List element */
& > section{
flex: 1 1 90%;
display: flex;
margin: 0;
padding: .8em 1em;
border-bottom: 1px solid #eee;
background-color: #fff;
// no border-bottom for last child
&:last-of-type{ border-bottom: 0; }
// flex properties
flex-direction: row;
justify-content: flex-start;
align-items: center;
flex-wrap: nowrap;
/* (1.1) Element item */
& > div:not(.icon),
& > select,
& > input{
flex: 0 1 30%;
// fix
&.taglist{
margin: 0;
margin-left: 1.5em;
}
}
/* (1.2) Hover animation */
transition: border-left-color .3s ease-in-out;
&:not(.filter){
border-left: .2em solid #fff;
&:hover{ background-color: darken(#fff,1%); }
&.create:hover{ border-left-color: $form-valid-color; }
&:hover,
&.bcours:hover{ border-left-color: $form-search-color; }
&.btd:hover{ border-left-color: $form-valid-color; }
&.btp:hover{ border-left-color: $form-invalid-color; }
}
/* (1.3) Select elements*/
& > select{
display: block;
position: relative;
height: 1.8em;
margin: 0;
margin-right: 1em;
padding: .2em .5em;
padding-right: 1em;
border: 1px solid lighten($form-neutral-color, 5%);
border-radius: 3px;
background: transparent url('/asset/svg/down_arrow.svg@bbbbbb') right .5em bottom .1em no-repeat;
background-size: auto 80%;
color: #999;
font-size: .8em;
cursor: default;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
// flex: 0 1 15em;
&.min{ flex: 0 1 5em; }
}
/* (1.4) Input */
& > input{
display: inline-block;
position: relative;
min-width: 0;
margin: 0;
padding: .22em .5em;
flex: 0 1 5em;
}
/* (1.5) Icon (remove) */
& > div.icon{
display: inline-block;
width: 1.2em;
height: 1.2em;
margin-right: 1em;
background: url('/asset/svg/plus.svg@aaaaaa') center center no-repeat;
background-size: 60% auto;
overflow: hidden;
cursor: pointer;
&:hover{ background-image: url('/asset/svg/plus.svg@#{$rd-form-valid-color}'); }
&.remove{
background-image: url('/asset/svg/cross.svg@aaaaaa');
&:hover{ background-image: url('/asset/svg/cross.svg@#{$rd-form-invalid-color}'); }
}
&.hidden{ background: transparent; }
}
}
/* (2) Filter */
& > section.filter{
background-color: transparent;
text-transform: uppercase;
color: #aaa;
font-size: .8em;
font-weight: bold;
text-shadow: 1px 1px 2px #fff;
& > div{
& > span.arrow{
display: inline-block;
position: relative;
width: 1.5em;
height: 1.5em;
margin-bottom: -.3em;
background: url('/asset/svg/down_arrow.svg@aaaaaa') center center no-repeat;
background-size: auto 100%;
&[data-way='up']{ background-image: url('/asset/svg/up_arrow.svg@aaaaaa'); }
&[data-way='down']{ background-image: url('/asset/svg/down_arrow.svg@aaaaaa'); }
cursor: pointer;
}
// selected filter
&[data-filter='1']{
color: $primary-color;
& > span.arrow{
&[data-way='up']{ background-image: url('/asset/svg/up_arrow.svg@555555'); }
&[data-way='down']{ background-image: url('/asset/svg/down_arrow.svg@555555'); }
}
}
}
}
/* Tags color -> darker */
.tag,
& > section > select{
color: $primary-color;
}
}