From ae69cdbb422a7a075ec4b9cebbb4075bd2a030fd Mon Sep 17 00:00:00 2001 From: xdrm-brackets Date: Wed, 14 Mar 2018 17:42:18 +0100 Subject: [PATCH] moved [container.card] to a new file --- webpack/scss/container.scss | 753 +----------------------------- webpack/scss/container/card.scss | 756 +++++++++++++++++++++++++++++++ 2 files changed, 757 insertions(+), 752 deletions(-) create mode 100644 webpack/scss/container/card.scss diff --git a/webpack/scss/container.scss b/webpack/scss/container.scss index 1f0cfc4..7b125f2 100644 --- a/webpack/scss/container.scss +++ b/webpack/scss/container.scss @@ -89,755 +89,4 @@ -/* [3] Card style -> container ----------------------------------*/ -#CONTAINER.card > div.card.container{ - - order: 2; - flex: 1 0 calc( 100% - 20em ); - - display: flex; - min-height: 100%; - - // flex properties - flex-direction: row; - justify-content: flex-start; - align-items: stretch; - align-content: flex-start; - flex-wrap: wrap; - - z-index: 101; - overflow: auto; - - - /* [3.1] Card style -> instant-search - ---------------------------------*/ - & > input.instant-search{ - - display: inline-block; - position: relative; - - flex: 1 0 70%; // 70% to almost fill the line - height: 1.2em; - - margin: 1em .5em; - padding: .5em 1em; - - margin-right: 0; - - border-radius: 3px / 3px; - background-color: #fff; - - box-shadow: 0 2px 2px darken(#fff, 10%); - - & + button.card.toggle{ - display: inline-block; - position: relative; - - flex: 0 0 calc( 2em - 2*.5em ); - - margin: 1em .5em; - - font-weight: bold; - - } - - } - - @keyframes bounce-up{ - from{ transform: scale(.95); } - to{ transform: scale(1); } - } - - /* (1) Card container */ - & > section{ - - flex: 1 1 20em; - - display: flex; - position: relative; - - margin: 1em .5em; - padding: 1.5em; - - border-radius: 3px / 3px; - border: 1px solid transparent; - box-shadow: 0 1px 1px darken(#fff, 20%); - - &:not([data-anim='0']){ - animation: bounce-up .2s ease-out; - } - - - &.invalid{ box-shadow: 0; border: 1px solid $form-invalid-color; } - &.valid{ box-shadow: 0; border: 1px solid $form-valid-color; } - &.search{ box-shadow: 0; border: 1px solid $form-search-color; } - - // animation for incoming element - @keyframes incoming{ - from{ transform: translateY(-2em); opacity: 0; } - to{ transform: translateY(0); opacity: 1; } - } - - // animation for outgoing element - @keyframes outgoing{ - from{ transform: translateY(0); opacity: 1; } - to{ transform: translateY(2em); opacity: 0; } - } - - // animation to nav in - &[data-anim-outgoing='1']{ animation: outgoing .4s ease-in-out forwards; } - &[data-anim-incoming='1']{ animation: incoming .4s ease-in-out; } - - &[data-anim-bounce='1']{ animation: bounce-up .6s ease-in-out reverse forwards; } - - - background-color: #fff; - - color: $primary-color; - - // flex - flex-direction: column; - justify-content: space-between; - flex-wrap: nowrap; - - z-index: 102; - - - &[data-create]{ - border: 1px solid $form-valid-color; - } - - // hidden mode - &.search-hidden, - &.filter-hidden{ display: none; } - - - /* (2) REMOVE+EDIT+ADMIN button */ - & > div.goo-menu{ - - $btn-size: 1.8em; - $btn-space: 0em; - $nb-btn: 3; - $nb-spc: $nb-btn - 1; - - $cont-w: $btn-size * $nb-btn + $nb-spc * $btn-space; - - display: inline-block; - position: absolute; - top: 1em; - left: calc( 100% - 1em - #{$btn-size} - .5em ); - width: $btn-size; - height: $btn-size; - - -webkit-filter: url('/asset/svg/filter.svg#goo-menu') drop-shadow(-5px 0 0 #fff); - filter: url('/asset/svg/filter.svg#goo-menu') drop-shadow(-5px 0 0 #fff); - - cursor: pointer; - - z-index: 103; - - /* (2.1) Pan all on hover */ - &:hover{ - left: calc( 100% - 1em - #{$cont-w} - .5em - 1em ); - width: calc( #{$cont-w} + 1em ); - - /* (2.1.1) lighter color on hover */ - & > div.remove[data-remove], - & > div.edit[data-edit], - & > div.enabled[data-enabled], - & > div.admin[data-admin]{ - background-color: darken(#fff, 12%); - - /* (2.1.2) displace all but 1st element */ - &.edit[data-edit]{ left: calc( 100% - #{$btn-size * 2 + $btn-space} ); } - &.remove[data-remove]{ left: calc( 100% - #{$btn-size * 3 + $btn-space * 2} ); } - - } - - } - - /* (2.2) Design elements */ - & > div.remove[data-remove], - & > div.edit[data-edit], - & > div.enabled[data-enabled], - & > div.admin[data-admin]{ - display: inline-block; - position: absolute; - top: 0; - left: calc( 100% - #{$btn-size} ); - width: $btn-size; - height: $btn-size; - - - border-radius: 50%; - - transition: background-color .1s ease-in-out, - left .2s ease-in-out; - - background: #fff url('/asset/svg/cross.svg@aaaaaa') center center no-repeat; - background-size: auto 50%; - - cursor: pointer; - - z-index: 103; - - /* (2.1) Feedback */ - &:hover{ background-image: url('/asset/svg/cross.svg@#{$rd-form-invalid-color}'); } - - /* (2.2) EDIT button */ - &.edit[data-edit]{ - background-image: url('/asset/svg/a.svg@aaaaaa'); - background-size: auto 60%; - z-index: 104; - - &:hover{ background-image: url('/asset/svg/a.svg@#{$rd-form-search-color}'); } - } - - /* (2.3) ADMIN switch */ - &.admin[data-admin]{ - background-image: url('/asset/svg/admin-disabled.svg@aaaaaa'); - z-index: 105; - - &:hover{ background-image: url('/asset/svg/admin-disabled.svg@555555'); } - &[data-active='1']{ background-image: url('/asset/svg/admin.svg@f4bd18'); } - &[data-active='1']:hover{ background-image: url('/asset/svg/admin.svg@f4a118'); } - } - - /* (2.3) DISABLED switch */ - &.enabled[data-enabled]{ - background-image: url('/asset/svg/bell-disabled.svg@aaaaaa'); - z-index: 105; - - &:hover{ background-image: url('/asset/svg/bell-disabled.svg@555555'); } - &[data-active='1']{ background-image: url('/asset/svg/bell.svg@f4bd18'); } - &[data-active='1']:hover{ background-image: url('/asset/svg/bell.svg@f4a118'); } - } - - } - - - - - } - - /* (4) Card generic title */ - & > span.category, - & > select.category{ - - display: block; - position: relative; - width: calc( 100% - 1em ); - - margin-bottom: .5em; - - font-size: .7em; - color: darken($secondary-color, 10%); - text-transform: uppercase; - letter-spacing: .05em; - - z-index: 102; - - } - - /* (4-edit) Card generic title (select) */ - & > select.category{ - - width: calc( 100% + 1em ); - height: 3em; - margin: 0; - padding: 0; - margin-left: -.4em; // emulate no + margin-top: -1em; // replace as if not a select + margin-bottom: -.3em; // fix layout for following elements + + // remove border + border: 0; + border-radius: 0; + + // remove arrow + -webkit-appearance: none; /* Safari and Chrome */ + -moz-appearance: none; /* Firefox */ + appearance: none; + + background: transparent url('/asset/svg/down_arrow.svg@bbbbbb') right .5em center no-repeat; + background-size: auto 80%; + + font-size: .7em; + letter-spacing: .05em; + font-family: inherit; + + + } + + /* (5) Card title */ + & > h1{ + + display: flex; + position: relative; + + color: darken($primary-color, 5%); + font-size: 1em; + + // flex + flex-direction: row; + justify-content: flex-start; + flex-wrap: nowrap; + + // &.warning:before{ + // content: ''; + + // display: inline-block; + // position: relative; + // width: 1.2em; + // height: 1em; + + // margin-right: .3em; + + // background: url('/asset/svg/warning_radio.svg@#{$rd-form-invalid-color}') center bottom no-repeat; + // background-size: auto 90%; + + // text-anchor: center; + // } + + /* (5-edit) Card title -> edit inputs */ + & input{ + + display: inline-block; + position: relative; + + width: 10em; + flex-shrink: 1; + flex-grow: 1; + + margin: 0; + padding: 0; + + border-radius: 0; + border: 0; + + color: darken($primary-color, 5%); + font-size: 1em; + font-weight: bold; + font-family: inherit; + + + background: transparent; + } + + /* (5.1) Sub-content */ + & > span[data-visible]{ + + display: inline-block; + color: $secondary-color; + + margin: 0; + margin-left: .5em; + + transform: scale(.9); + + white-space: nowrap; + + &[data-visible='0']{ display: none; } + + /* (5.1-edit) input*/ + & > input{ + text-align: center; + } + + } + + } + + /* (6) Card 2-column array */ + & > div.table{ + + display: flex; + position: relative; + + margin-top: 1em; + padding: .5em; + + border-radius: 3px / 3px; + border: 1px solid darken(#fff, 15%); + + // flex properties + flex-direction: row; + justify-content: space-around; + align-items: center; + flex-wrap: nowrap; + + /* (6.1) Column */ + & > div{ + + display: flex; + position: relative; + height: 2.3em; + + padding: 0 .4em; + + border-left: 1px solid darken(#fff, 15%); + + color: darken($secondary-color, 20%); + + &:first-child{ border-left: 0; } + + // flex properties + flex-direction: row; + justify-content: space-between; + align-items: center; + flex-wrap: nowrap; + + /* (6.1.1) Column Emphasis */ + & > span, + & > span:first-child{ + display: block; + position: relative; + + margin-right: .3em; + + font-size: 1.5em; + letter-spacing: .05em; + + /* (6.1.1-edit) Editable text entry */ + & > input{ + display: inline-block; + width: 2em; + + margin: 0; + padding: 0; + + font-size: .9em; + text-align: center; + + border-radius: 0; + border: 0; + } + } + + /* (6.2) Column Emphasis */ + & > span:last-child{ + display: block; + position: relative; + min-width: 4em; + max-width: 6em; + + font-size: .8em; + letter-spacing: .05em; + text-transform: uppercase; + + overflow: hidden; + } + + + + } + + } + + /* (7) Card footer */ + & > div.footer{ + + display: flex; + position: relative; + margin-top: 1.3em; + margin-left: -1.5em; + height: 3.5em; + // 100% + parent.margin - padding + width: calc( 100% + 2*1.5em - 2*2em ); + + // remove card bottom padding + margin-bottom: -1.5em; + + padding: 0 2em; + + border-top: 1px solid darken(#fff, 10%); + &:last-of-type{ border-radius: 0 0 3px 3px; } + background-color: #fafbfd; + + // flex properties + flex-direction: row; + justify-content: space-between; + align-items: center; + align-content: center; + flex-wrap: nowrap; + + + /* (7.1) Card footer element */ + & > span{ + + display: flex; + position: relative; + height: 1.3em; + + color: darken($secondary-color, 20%); + + // center text + flex-direction: row; + justify-content: center; + align-items: center; + flex-wrap: nowrap; + + &:before{ + content: ''; + + display: inline-block; + position: relative; + width: 1.3em; + height: 1.3em; + + margin-right: .4em; + + background: transparent center center no-repeat; + background-size: 80% auto; + + } + + // specific icons + &.course:before{ background-image: url('/asset/svg/course.svg@#{$menu-item-inactive}'); } + &.td:before{ background-image: url('/asset/svg/td.svg@#{$menu-item-inactive}'); } + &.tp:before{ background-image: url('/asset/svg/tp.svg@#{$menu-item-inactive}'); } + + // hover icons + &.course.active:before{ background-image: url('/asset/svg/course.svg@5bb8f0'); } + &.td.active:before{ background-image: url('/asset/svg/td.svg@20b565'); } + &.tp.active:before{ background-image: url('/asset/svg/tp.svg@e85456'); } + + & > span{ + display: inline; + + padding-left: .5em; + color: #bbb; + + font-size: .9em; + text-transform: uppercase; + } + + /* (7.1-edit) Card footer input */ + & > input{ + width: 2.5em; + + margin: 0; + padding: 0; + + border: 0; + } + + + } + + /* (7.1-edit) Card button submit */ + & > button{ + margin: auto; + } + + /* (7.2) Card footer separator */ + & > hr{ + display: block; + position: relative; + width: 1px; + height: 1em; + + border: 0; + background-color: darken(#fff, 10%); + } + } + + /* (8) Card sub */ + & > div.sub{ + + display: inline-block; + margin-top: 1em; + + color: lighten($primary-color, 20%); + + } + + + + } + +} + + + + +/* [4] Card style -> filter +---------------------------------*/ +#CONTAINER.card > div.card.filter{ + + order: 1; + flex: 1 0 calc( 90% ); + + display: flex; + min-height: calc( 4em - 2*.5em - 2*.5em ); + + margin: .5em; + padding: .5em; + + border-radius: 3px / 3px; + background-color: #fff; + + // background-color: #0f0; + + box-shadow: 0 2px 2px darken(#fff, 10%); + + // flex + flex-direction: row; + justify-content: flex-start; + align-items: center; + flex-wrap: wrap; + + z-index: 110; + + overflow: visible; + // overflow-y: visible; + + /* (1) Filter Group */ + & > div[title]{ + + flex: 0 1 5em; + + display: block; + position: relative; + + margin: .5em 1em; + + /* (1.1) Title content */ + & > div.fold-toggle{ + content: attr(title); + + display: inline-block; + position: relative; + + padding-right: 1em; + + font-size: .8em; + color: darken($secondary-color, 10%); + text-transform: uppercase; + letter-spacing: .05em; + + cursor: pointer; + + transition: color .2s ease-in-out; + + &:hover{ + color: $primary-color; + } + + &[data-count]:after{ + content: attr(data-count); + + display: inline-block; + position: absolute; + margin-top: -.1em; + margin-left: .5em; + width: 1em; + height: clac( 1.5em - 2*.2em ); + + padding: .2em .5em; + + border-radius: 3px; + + background: $form-valid-color; + + color: #fff; + font-size: .8em; + text-align: center; + + } + + // greyed when 0 + &[data-count='0']:after{ background-color: #ddd; } + + } + + + + /* (1.2) Filter box */ + & > div.fold{ + + display: none; + position: absolute; + width: 15em; + height: 15em; + margin-top: 2em; + + border: 1px solid #ddd; + border-radius: 3px; + + background-color: #fff; + + flex-direction: column; + justify-content: flex-start; + align-items: stretch; + flex-wrap: nowrap; + + overflow: hidden; + overflow-y: auto; + + /* (1.3) Filter item */ + & > span{ + + display: block; + position: relative; + + padding: .5em 0; + padding-left: 2em; + + background-color: #fff; + &:hover{ background-color: darken(#fff,5%); } + + &:nth-child(2n){ + background-color: #f9f9f9; + &:hover{ background-color: darken(#f9f9f9,5%); } + } + + + -moz-user-select: none; + -ms-user-select: none; + -webkit-user-select: none; + user-select: none; + + cursor: pointer; + + transition: background-color .2s ease-in-out; + + /* (1.3.1) Pseudo-checkbox */ + &:before{ + content: ''; + + display: block; + position: absolute; + margin-top: .2em; + margin-left: calc( .5em - 2em ); + width: calc( 1em - .2em ); + height: calc( 1em - .2em ); + + border-radius: 50%; + background: $form-valid-color; + + transform: scale(0); + transition: transform .1s ease-in-out; + + cursor: pointer; + } + + /* (1.3.2) Active pseudo-checkbox */ + &.active:before{ + transform: scale(1); + } + + } + + } + + // only show item box if filter_group has 'data-show' + & > div.fold-toggle[data-show='1'] + div.fold{ + display: flex; + } + + } + + +} \ No newline at end of file