diff --git a/webpack/scss/container.scss b/webpack/scss/container.scss index bfc2e81..ea151e6 100644 --- a/webpack/scss/container.scss +++ b/webpack/scss/container.scss @@ -191,8 +191,8 @@ width: $btn-size; height: $btn-size; - -webkit-filter: url('#goo-effect'); - filter: url('#goo-effect'); + -webkit-filter: url('#goo-effect') drop-shadow(-5px 0 0 #fff); + filter: url('#goo-effect') drop-shadow(-5px 0 0 #fff); cursor: pointer; @@ -207,7 +207,7 @@ & > div.remove[data-remove], & > div.edit[data-edit], & > div.admin[data-admin]{ - background-color: darken(#fff, 5%); + background-color: darken(#fff, 12%); /* (2.1.2) displace all but 1st element */ &.edit[data-edit]{ left: calc( 100% - #{$btn-size * 2 + $btn-space} ); } @@ -231,38 +231,36 @@ border-radius: 50%; - transition: .4s ease-in-out; + transition: background-color .1s ease-in-out, + left .2s ease-in-out; - background: url('/asset/svg/cross.svg@bbbbbb') center center no-repeat; - background-size: auto 50%; - background-color: darken(#fff, 10%); + 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@555555'); } - &:active{ background-image: url('/asset/svg/cross.svg@#{$rd-form-invalid-color}'); } + &: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@bbbbbb'); + background-image: url('/asset/svg/a.svg@aaaaaa'); 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}'); } + &: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.svg@bbbbbb'); + background-image: url('/asset/svg/admin.svg@aaaaaa'); 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'); } + &[data-active='1']:hover{ background-image: url('/asset/svg/admin.svg@f4a118'); } } @@ -279,7 +277,7 @@ display: block; position: relative; - width: 100%; + width: calc( 100% - 1em ); margin-bottom: .5em;