diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss index 36d5faf746..7f5dcacf8b 100644 --- a/cms/static/sass/_base.scss +++ b/cms/static/sass/_base.scss @@ -352,4 +352,19 @@ body.show-wip { &.big { display: block; } +} + +.edit-button.standard, +.delete-button.standard { + float: left; + @include white-button; + padding: 3px 10px 4px; + margin-left: 7px; + font-size: 12px; + font-weight: 400; + + .edit-icon, + .delete-icon { + margin-right: 4px; + } } \ No newline at end of file diff --git a/cms/static/sass/_cms_mixins.scss b/cms/static/sass/_cms_mixins.scss index 2f43bfd208..80a82fb7f3 100644 --- a/cms/static/sass/_cms_mixins.scss +++ b/cms/static/sass/_cms_mixins.scss @@ -48,18 +48,18 @@ } @mixin white-button { - @include button; - border: 1px solid $darkGrey; - border-radius: 3px; - @include linear-gradient(top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0) 60%); - background-color: #dfe5eb; - @include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset); - color: #5d6779; + @include button; + border: 1px solid $darkGrey; + border-radius: 3px; + @include linear-gradient(top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0)); + background-color: #dfe5eb; + @include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset); + color: #778192; - &:hover { - background-color: #f2f6f9; - color: #5d6779; - } + &:hover { + background-color: #f2f6f9; + color: #778192; + } } @mixin orange-button { diff --git a/cms/static/sass/_static-pages.scss b/cms/static/sass/_static-pages.scss index 4c7d95f2f8..c8ffa0316c 100644 --- a/cms/static/sass/_static-pages.scss +++ b/cms/static/sass/_static-pages.scss @@ -11,14 +11,29 @@ } .components > li { - margin: 20px 0; + margin: 0; + border-radius: 0; + + &.new-component-item { + margin-top: 20px; + } } .component { - border: none; + border: 1px solid $mediumGrey; + border-top: none; + + &:first-child { + border-top: 1px solid $mediumGrey; + } &:hover { - border: none; + border: 1px solid $mediumGrey; + border-top: none; + + &:first-child { + border-top: 1px solid $mediumGrey; + } .drag-handle { background: url(../img/drag-handles.png) center no-repeat $lightGrey; @@ -42,14 +57,6 @@ top: 26px; right: 44px; } - - .edit-button, - .delete-button { - // @include grey-button; - border: none; - background: none; - color: $darkGrey; - } } .component.editing { diff --git a/cms/static/sass/_unit.scss b/cms/static/sass/_unit.scss index 460640a10f..a7a33f6024 100644 --- a/cms/static/sass/_unit.scss +++ b/cms/static/sass/_unit.scss @@ -149,12 +149,8 @@ &:hover { border-color: #6696d7; - .drag-handle, - .component-actions a { - background-color: $blue; - } - .drag-handle { + background-color: $blue; border-color: $blue; } } @@ -174,31 +170,12 @@ .component-actions { position: absolute; - top: 4px; - right: 4px; + top: 7px; + right: 9px; @include transition(opacity .15s); - } - .edit-button, - .delete-button { - float: left; - padding: 3px 10px 4px; - margin-left: 3px; - border: 1px solid #fff; - border-radius: 3px; - background: #d1ddec; - font-size: 12px; - color: #fff; - @include transition(all .15s); - - &:hover { - background-color: $blue; - color: #fff; - } - - .edit-icon, - .delete-icon { - margin-right: 4px; + a { + color: $darkGrey; } } diff --git a/cms/templates/component.html b/cms/templates/component.html index 648a5e3d98..2ec54d3b29 100644 --- a/cms/templates/component.html +++ b/cms/templates/component.html @@ -6,8 +6,8 @@ Cancel
${preview} \ No newline at end of file