diff --git a/webpack/scss/constants.scss b/webpack/scss/constants.scss index 6d8c742..587c54d 100644 --- a/webpack/scss/constants.scss +++ b/webpack/scss/constants.scss @@ -23,6 +23,7 @@ $rd-form-valid-color: '20d696'; $rd-form-neutral-color: 'b8c0c8'; $rd-form-search-color: '1d74e5'; $rd-form-invalid-color: 'ea4b35'; +$rd-form-primary-color: '54627c'; // Menu $menu-bg: #333; diff --git a/webpack/scss/header.scss b/webpack/scss/header.scss index e0ab47c..62f4eb8 100644 --- a/webpack/scss/header.scss +++ b/webpack/scss/header.scss @@ -48,6 +48,63 @@ } + // current version: EDIT + REMOVE + &.versions > div.current{ + + span.edit, + span.remove{ + display: inline-block; + position: relative; + top: .2em; + width: 1.1em; + height: 1.1em; + + border-radius: 3px; + + background: center center no-repeat; + background-size: 80% auto; + + &.edit{ + background-image: url('/asset/svg/a.svg@b8c0c8'); + &:hover{ + background-image: url('/asset/svg/a.svg@#{$rd-form-search-color}'); + } + } + + &.remove{ + background-image: url('/asset/svg/cross.svg@b8c0c8'); + &:hover{ + background-image: url('/asset/svg/cross.svg@#{$rd-form-invalid-color}'); + } + } + + &:last-child{ + margin-right: .5em; + } + } + overflow: hidden; + + // editable input + & > input[type='text']{ + display: inline-block; + position: relative; + width: 100%; + max-width: 10em; + + margin: 0; + padding: 0; + + border: none; + border-radius: 0; + + // background-color: #f00; + + font-size: inherit; + color: inherit; + } + + } + /* (1.2) Version dialog (to switch to another) */ & > div.department-dialog, & > div.version-dialog{ @@ -64,6 +121,8 @@ border-top: 0; border-radius: 0 0 3px 3px; + &>:first-child{ border-top: 1px solid #ddd; } + background-color: #fff; // box-shadow: 0 2px 2px #ddd; @@ -77,7 +136,7 @@ position: relative; padding: .5em 1em; - padding-left: .5em; + padding-left: 2em; background-color: #fff; @@ -88,53 +147,29 @@ // hover animation &:hover{ background-color: darken(#fff, 5%); } - // pre-icons - & > span.edit, - & > span.switch, - & > span.create{ - display: inline-block; - position: relative; - // top: calc( 50% - .7em/2 ); - // left: calc( 1em/2 + .7em/2 ); + // switch+create icons + &:before{ + content: ''; + + display: block; + position: absolute; + top: calc( 50% - 1em/2 ); + left: calc( .5em/2 + 1em/2 ); width: 1em; height: 1em; - padding-right: .5em; - - &.switch{ - background: url('/asset/svg/switch.svg@b8c0c8') center center no-repeat; - background-size: 80% auto; - &:hover{ - background-image: url('/asset/svg/switch.svg@#{$rd-form-invalid-color}'); - } - } - - &.edit{ - background: url('/asset/svg/a.svg@b8c0c8') center center no-repeat; - background-size: contain; - &:hover{ - background-image: url('/asset/svg/a.svg@#{$rd-form-search-color}'); - } - } - - &.create{ - background: url('/asset/svg/plus.svg@#{$rd-form-valid-color}') center center no-repeat; - background-size: 60% auto; - } - - + background: url('/asset/svg/switch.svg@#{$rd-form-primary-color}') center center no-repeat; + background-size: auto 80%; } - & > input{ - width: auto; - max-width: 6em; - padding: 0; - margin: .25em .5em; + // create icon specifications + &[data-id='-1']{ - border: none; - border-radius: 0; + &:before{ + background-image: url('/asset/svg/plus.svg@#{$rd-form-valid-color}'); + background-size: auto 60%; + } - background: transparent; } } diff --git a/webpack/vue/header.vue b/webpack/vue/header.vue index 6ff1f0b..bb45765 100644 --- a/webpack/vue/header.vue +++ b/webpack/vue/header.vue @@ -15,13 +15,16 @@