From efaaedfd0d49c7d86d3e507df974eec29fea4ece Mon Sep 17 00:00:00 2001 From: xdrm-brackets Date: Thu, 8 Mar 2018 12:12:12 +0100 Subject: [PATCH] [webpack.teacher.view] SCSS: gooey effect --- public_html/asset/svg/a.svg | 58 +++++++++++++++ public_html/asset/svg/cross.svg | 44 ++++++++++++ webpack/component/teacher/view.vue | 19 ++++- webpack/scss/container.scss | 110 ++++++++++++++++++++--------- 4 files changed, 194 insertions(+), 37 deletions(-) create mode 100644 public_html/asset/svg/a.svg create mode 100644 public_html/asset/svg/cross.svg diff --git a/public_html/asset/svg/a.svg b/public_html/asset/svg/a.svg new file mode 100644 index 0000000..2bc3d6b --- /dev/null +++ b/public_html/asset/svg/a.svg @@ -0,0 +1,58 @@ + + + + + + image/svg+xml + + + + + + + + + + diff --git a/public_html/asset/svg/cross.svg b/public_html/asset/svg/cross.svg new file mode 100644 index 0000000..5a79c40 --- /dev/null +++ b/public_html/asset/svg/cross.svg @@ -0,0 +1,44 @@ + +image/svg+xml \ No newline at end of file diff --git a/webpack/component/teacher/view.vue b/webpack/component/teacher/view.vue index ea2fc9c..fce059b 100644 --- a/webpack/component/teacher/view.vue +++ b/webpack/component/teacher/view.vue @@ -3,6 +3,17 @@
+ + + + + + + + + + +
@@ -41,9 +52,11 @@ :data-lname='prof.lastName' :data-fname='prof.firstName'> -
-
-
+
+
+
+
+
{{ prof.categorie }}

{{ prof.firstName }} {{ prof.lastName }} ({{ prof.casLogin }})

diff --git a/webpack/scss/container.scss b/webpack/scss/container.scss index d8aaf69..1ea6406 100644 --- a/webpack/scss/container.scss +++ b/webpack/scss/container.scss @@ -175,54 +175,96 @@ /* (2) REMOVE+EDIT+ADMIN button */ - & > div.remove[data-remove], - & > div.edit[data-edit], - & > div.admin[data-admin]{ + & > div.goo-menu{ + + $btn-size: 1.5em; + $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: 1.3em; - left: calc( 100% - 2em ); - width: 1em; - height: 1em; + top: 1em; + left: calc( 100% - 1em - #{$btn-size} - .5em ); + width: $btn-size; + height: $btn-size; - background: url('/asset/svg/remove.svg@bbbbbb') center center no-repeat; - background-size: auto 100%; - - transform: scale(1); - transition: transform .2s ease-in-out; + -webkit-filter: url('#goo-effect'); + filter: url('#goo-effect'); cursor: pointer; - &:hover{ - background-image: url('/asset/svg/remove.svg@#{$rd-form-invalid-color}'); - transform: scale(1.5); - } - - } - - /* (2.1) EDIT button */ - & > div.edit[data-edit]{ - left: calc( 100% - 2em - 1.3em ); - - background-image: url('/asset/svg/td.svg@bbbbbb'); - background-size: 80% auto; + transition: left .3s ease-in-out, + width .3s ease-in-out; &:hover{ - background-image: url('/asset/svg/td.svg@#{$rd-form-search-color}'); + left: calc( 100% - 1em - #{$cont-w} - .5em ); + width: $cont-w; } - } - /* (2.2) ADMIN switch */ - & > div.admin[data-admin]{ - left: calc( 100% - 2em - 1.3em - 1.3em ); + & > div.remove[data-remove], + & > div.edit[data-edit], + & > div.admin[data-admin]{ + display: inline-block; + position: absolute; + top: 0; + left: calc( 100% - #{$btn-size} ); + width: $btn-size; + height: $btn-size; - background-image: url('/asset/svg/admin.svg@bbbbbb'); - background-size: 85% auto; - &:hover{ background-image: url('/asset/svg/admin.svg@bbbbbb'); } + border-radius: 50%; + + transition: .4s ease-in-out; + + background: url('/asset/svg/cross.svg@bbbbbb') center center no-repeat; + background-size: auto 50%; + background-color: darken(#fff, 10%); + + cursor: pointer; + + z-index: 105; + + &:hover{ background-image: url('/asset/svg/cross.svg@555555'); } + &:active{ background-image: url('/asset/svg/cross.svg@#{$rd-form-invalid-color}'); } + + } + + // 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'); } + } - &[data-active='1']{ background-image: url('/asset/svg/admin.svg@f4bd18'); } }