From 56b858c0441a3034d515af0d3e6b1b4b79b7f67f Mon Sep 17 00:00:00 2001 From: xdrm-brackets Date: Thu, 8 Mar 2018 12:25:28 +0100 Subject: [PATCH] [webpack.teacher.view] SCSS: gooey effect order change --- webpack/component/teacher/view.vue | 2 +- webpack/scss/container.scss | 81 ++++++++++++++++-------------- 2 files changed, 45 insertions(+), 38 deletions(-) diff --git a/webpack/component/teacher/view.vue b/webpack/component/teacher/view.vue index fce059b..60121e8 100644 --- a/webpack/component/teacher/view.vue +++ b/webpack/component/teacher/view.vue @@ -53,9 +53,9 @@ :data-fname='prof.firstName'>
+
-
{{ prof.categorie }} diff --git a/webpack/scss/container.scss b/webpack/scss/container.scss index 1ea6406..f3829c8 100644 --- a/webpack/scss/container.scss +++ b/webpack/scss/container.scss @@ -196,15 +196,28 @@ cursor: pointer; - transition: left .3s ease-in-out, - width .3s ease-in-out; + z-index: 103; + /* (2.1) Pan all on hover */ &:hover{ - left: calc( 100% - 1em - #{$cont-w} - .5em ); - width: $cont-w; + 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.admin[data-admin]{ + background-color: darken(#fff, 5%); + + /* (2.1.2) displace all but 1st element */ + &.edit[data-edit]{ left: calc( 100% - #{$btn-size * 2 + $btn-space} ); } + &.admin[data-admin]{ left: calc( 100% - #{$btn-size * 3 + $btn-space * 2} ); } + + } + } - + /* (2.2) Design elements */ & > div.remove[data-remove], & > div.edit[data-edit], & > div.admin[data-admin]{ @@ -226,44 +239,36 @@ cursor: pointer; - z-index: 105; + z-index: 103; + /* (2.1) Feedback */ &:hover{ background-image: url('/asset/svg/cross.svg@555555'); } &:active{ 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@bbbbbb'); + background-size: auto 60%; + z-index: 104; + + &:hover{ background-image: url('/asset/svg/a.svg@555555'); } + &:active{ background-image: url('/asset/svg/a.svg@#{$rd-form-search-color}'); } + } + + /* (2.3) ADMIN switch */ + &.admin[data-admin]{ + background-image: url('/asset/svg/admin.svg@bbbbbb'); + z-index: 105; + + &:hover{ background-image: url('/asset/svg/admin.svg@555555'); } + &[data-active='1']{ background-image: url('/asset/svg/admin.svg@f4bd18'); } + &[data-active='1']:hover{ background-image: url('/asset/svg/admin.svg@f4d118'); } + } + + } - // lighter color on hover - &:hover > div.remove[data-remove], - &:hover > div.edit[data-edit], - &:hover > div.admin[data-admin]{ - background-color: darken(#fff, 5%); - } - /* (2) Flow on hover */ - &:hover > div.edit[data-edit]{ left: calc( 100% - #{$btn-size * 2 + $btn-space} ); } - &:hover > div.admin[data-admin]{ left: calc( 100% - #{$btn-size * 3 + $btn-space * 2} ); } - - - /* (2.1) EDIT button */ - & > div.edit[data-edit]{ - background-image: url('/asset/svg/a.svg@bbbbbb'); - background-size: auto 60%; - z-index: 104; - - &:hover{ background-image: url('/asset/svg/a.svg@555555'); } - &:active{ background-image: url('/asset/svg/a.svg@#{$rd-form-search-color}'); } - } - - /* (2.2) ADMIN switch */ - & > div.admin[data-admin]{ - background-image: url('/asset/svg/admin.svg@bbbbbb'); - z-index: 103; - - &:hover{ background-image: url('/asset/svg/admin.svg@555555'); } - &[data-active='1']{ background-image: url('/asset/svg/admin.svg@f4bd18'); } - &[data-active='1']:hover{ background-image: url('/asset/svg/admin.svg@f4d118'); } - } } @@ -274,7 +279,7 @@ display: block; position: relative; - width: calc( 100% - 5em ); + width: 100%; margin-bottom: .5em; @@ -283,6 +288,8 @@ text-transform: uppercase; letter-spacing: .05em; + z-index: 102; + } /* (4-edit) Card generic title (select) */