diff --git a/images/eye.png b/images/eye.png new file mode 100644 index 0000000..f8365c9 Binary files /dev/null and b/images/eye.png differ diff --git a/images/trash.png b/images/trash.png new file mode 100644 index 0000000..4fbf927 Binary files /dev/null and b/images/trash.png differ diff --git a/modules/parade_demo/css/parade.demo.css b/modules/parade_demo/css/parade.demo.css index 4cd5f43..2de2fc2 100644 --- a/modules/parade_demo/css/parade.demo.css +++ b/modules/parade_demo/css/parade.demo.css @@ -8109,16 +8109,10 @@ body.user-logged-in.page-node-type-parade-onepage fieldset { .item-mode-preview .paragraph-type-top { position: absolute; - right: 30px; + right: 35px; top: 23px; } -.item-mode-preview .paragraph-type-top .parade-actions { - /* @include transition(opacity, .3s); - @include opacity(0); - visibility: hidden;*/ -} - .item-mode-preview .paragraph-type-top .parade-actions, .item-mode-edit .paragraph-type-top .parade-actions { margin-left: 0; @@ -8143,20 +8137,17 @@ body.user-logged-in.page-node-type-parade-onepage fieldset { .item-mode-preview .paragraph-type-top .parade-actions .edit input, .item-mode-preview .paragraph-type-top .parade-actions .collapse input, +.item-mode-preview .paragraph-type-top .parade-actions .confirm-remove input, +.item-mode-preview .paragraph-type-top .parade-actions .restore input, .item-mode-edit .paragraph-type-top .parade-actions .edit input, -.item-mode-edit .paragraph-type-top .parade-actions .collapse input { +.item-mode-edit .paragraph-type-top .parade-actions .collapse input, +.item-mode-edit .paragraph-type-top .parade-actions .confirm-remove input, +.item-mode-edit .paragraph-type-top .parade-actions .restore input { background-color: #62b3e5; color: #ffffff; padding: 6px 25px; } -.item-mode-preview .paragraph-type-top .parade-actions .remove, -.item-mode-preview .paragraph-type-top .parade-actions .preview, -.item-mode-edit .paragraph-type-top .parade-actions .remove, -.item-mode-edit .paragraph-type-top .parade-actions .preview { - position: relative; -} - .item-mode-preview .paragraph-type-top .parade-actions .remove input, .item-mode-preview .paragraph-type-top .parade-actions .preview input, .item-mode-edit .paragraph-type-top .parade-actions .remove input, @@ -8165,32 +8156,19 @@ body.user-logged-in.page-node-type-parade-onepage fieldset { width: 32px; height: 32px; background: #bdbdbd; - padding: 6px 10px; -} - -.item-mode-preview .paragraph-type-top .parade-actions .remove:after, -.item-mode-preview .paragraph-type-top .parade-actions .preview:after, -.item-mode-edit .paragraph-type-top .parade-actions .remove:after, -.item-mode-edit .paragraph-type-top .parade-actions .preview:after { - position: absolute; - font-family: FontAwesome; - display: block; - color: #ffffff; - width: 16px; - height: 16px; - top: 8px; - left: 10px; + background-size: 16px 16px; + background-repeat: no-repeat; + background-position: center; } -.item-mode-preview .paragraph-type-top .parade-actions .remove:after, -.item-mode-edit .paragraph-type-top .parade-actions .remove:after { - content: '\f1f8'; - left: 11px; +.item-mode-preview .paragraph-type-top .parade-actions .remove input, +.item-mode-edit .paragraph-type-top .parade-actions .remove input { + background-image: url("../images/trash.png"); } -.item-mode-preview .paragraph-type-top .parade-actions .preview:after, -.item-mode-edit .paragraph-type-top .parade-actions .preview:after { - content: '\f06e'; +.item-mode-preview .paragraph-type-top .parade-actions .preview input, +.item-mode-edit .paragraph-type-top .parade-actions .preview input { + background-image: url("../images/eye.png"); } a.tabledrag-handle .handle { @@ -8217,12 +8195,6 @@ a.tabledrag-handle:focus .handle { display: block; } -.node-parade-onepage-edit-form .field-multiple-table tr.even:hover .parade-actions, -.node-parade-onepage-edit-form .field-multiple-table tr.odd:hover .parade-actions { - /* @include opacity(1); - visibility: visible;*/ -} - #parade-onepage-menu-values a.tabledrag-handle .handle:before { display: block !important; color: #ffffff; @@ -8355,16 +8327,49 @@ a.tabledrag-handle:focus .handle { font-weight: 600; } +.field--name-parade-call-to-action { + display: -webkit-box; + display: -ms-flexbox; + display: -ms-flex; + display: flex; + text-align: left !important; + background-color: #f0f0f0; + padding: 10px 0; +} + +.field--name-parade-call-to-action > span { + -webkit-box-flex: 1; + -ms-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; + width: 25%; + text-align: center; + padding-top: 65px; +} + +.field--name-parade-call-to-action .fieldset-wrapper { + -webkit-box-flex: 2; + -ms-flex: 2; + -ms-flex-positive: 2; + flex-grow: 2; + width: 65%; +} + +.field--name-parade-call-to-action > .form-type-checkbox { + -webkit-box-flex: 1; + -ms-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; + width: 15%; + padding: 15px; +} + .field--name-parade-call-to-action fieldset { background-color: #f0f0f0 !important; border: 0; border-radius: 0; } -.field--name-parade-call-to-action { - text-align: left !important; -} - .field--name-parade-background { margin-bottom: 30px; } @@ -8531,17 +8536,6 @@ a.tabledrag-handle:focus .handle { padding: 5px 1px !important; } -.layout--parade-admin-twocol-bricks { - /* .layout__region--top { - .field--name-parade-title { - font-size: 16px; - font-weight: 600; - margin: 0 0 6px; - max-width: 65%; - } - }*/ -} - .layout--parade-admin-twocol-bricks .layout__region--bottom .layout__region--bottom-first .field--label-inline .field__label { display: none; } @@ -8604,7 +8598,8 @@ a.tabledrag-handle:focus .handle { } .item-mode-edit .layout__region.layout__region--top .js-form-item select, -.item-mode-edit .layout__region.layout__region--top .js-form-item input.text-full { +.item-mode-edit .layout__region.layout__region--top .js-form-item input.text-full, +.item-mode-edit .layout__region.layout__region--top .js-form-item input.form-number { width: 200px; height: 30px; box-shadow: none; @@ -8672,6 +8667,36 @@ a.tabledrag-handle:focus .handle { text-align: center; } +.layout__region--content .field--name-parade-paragraphs .paragraphs-add_more-wrapper { + padding-top: 20px; +} + +.layout__region--content .field--name-parade-paragraphs .paragraphs-add_more-wrapper .paragraphs-add_more-label { + display: none; +} + +.layout__region--content .field--name-parade-paragraphs .paragraphs-add_more-wrapper .paragraphs-dropbutton-wrapper { + margin-top: 0; +} + +.layout__region--content .field--name-parade-paragraphs .paragraphs-add_more-wrapper .paragraphs-dropbutton-wrapper input.button { + margin-top: 0; + border-color: transparent; + color: #ffffff; + border-radius: 3px; + font-size: 13px; + font-style: normal; + text-align: center; + font-weight: 600; + background-color: #62b3e5; + padding: 6px 25px; + box-shadow: none; + border: 0; + background-image: none; + text-shadow: none; + float: left; +} + .paragraphs-dropbutton-wrapper .button.parade-button { width: calc(20% - .5em) !important; margin-left: .25em; diff --git a/modules/parade_demo/sass/admin/_add-buttons.scss b/modules/parade_demo/sass/admin/_add-buttons.scss index 0596bee..525a4ac 100644 --- a/modules/parade_demo/sass/admin/_add-buttons.scss +++ b/modules/parade_demo/sass/admin/_add-buttons.scss @@ -7,6 +7,36 @@ text-align: center; } } + +.layout__region--content .field--name-parade-paragraphs { + .paragraphs-add_more-wrapper { + padding-top: 20px; + .paragraphs-add_more-label { + display: none; + } + .paragraphs-dropbutton-wrapper { + margin-top: 0; + input.button { + margin-top: 0; + border-color: transparent; + color: $white; + border-radius: 3px; + font-size: 13px; + font-style: normal; + text-align: center; + font-weight: 600; + background-color: $blue-bgr; + padding: 6px 25px; + box-shadow: none; + border: 0; + background-image: none; + text-shadow: none; + float: left; + } + } + } +} + .paragraphs-dropbutton-wrapper { .button.parade-button { width: calc(20% - .5em) !important; diff --git a/modules/parade_demo/sass/admin/_basic-settings.scss b/modules/parade_demo/sass/admin/_basic-settings.scss index 3e8d415..0537fe7 100644 --- a/modules/parade_demo/sass/admin/_basic-settings.scss +++ b/modules/parade_demo/sass/admin/_basic-settings.scss @@ -73,13 +73,8 @@ body.user-logged-in.page-node-type-parade-onepage { .item-mode-preview { .paragraph-type-top { position: absolute; - right: 30px; + right: 35px; top: 23px; - .parade-actions { -/* @include transition(opacity, .3s); - @include opacity(0); - visibility: hidden;*/ - } } } @@ -103,48 +98,37 @@ body.user-logged-in.page-node-type-parade-onepage { font-weight: 600; } .edit input, - .collapse input { + .collapse input, + .confirm-remove input, + .restore input { background-color: $blue-bgr; color: $white; padding: 6px 25px; } .remove, .preview { - position: relative; input { text-indent: -9999px; width: 32px; height: 32px; background: $grey-button; - padding: 6px 10px; - } - &:after { - position: absolute; - font-family: FontAwesome; - display: block; - color: $white; - width: 16px; - height: 16px; - top: 8px; - left: 10px; + background-size: 16px 16px; + background-repeat: no-repeat; + background-position: center; } } - .remove { - &:after { - content: '\f1f8'; - left: 11px; - } + .remove input { + background-image: url('../images/trash.png'); } - .preview { - &:after { - content: '\f06e'; - } + .preview input { + background-image: url('../images/eye.png'); } } } } + a.tabledrag-handle .handle { font-family: FontAwesome; background: none; @@ -168,10 +152,6 @@ a.tabledrag-handle:focus .handle { color: $grey-text; display: block; } - .parade-actions { -/* @include opacity(1); - visibility: visible;*/ - } } #parade-onepage-menu-values { @@ -236,4 +216,3 @@ a.tabledrag-handle:focus .handle { - diff --git a/modules/parade_demo/sass/admin/_forms.scss b/modules/parade_demo/sass/admin/_forms.scss index a6dc385..a041162 100644 --- a/modules/parade_demo/sass/admin/_forms.scss +++ b/modules/parade_demo/sass/admin/_forms.scss @@ -42,6 +42,32 @@ } .field--name-parade-call-to-action { + @include flexbox; + text-align: left !important; + background-color: rgb(240, 240, 240); + padding: 10px 0; + + > span { + @include flex-grow(1); + width: 25%; + text-align: center; + padding-top: 65px; + } + + .fieldset-wrapper { + @include flex-grow(2); + width: 65%; + + .form-type-textfield { + } + } + + > .form-type-checkbox { + @include flex-grow(1); + width: 15%; + padding: 15px; + } + fieldset { background-color: $fieldset-background !important; border: 0; @@ -49,10 +75,6 @@ } } -.field--name-parade-call-to-action { - text-align: left !important; -} - .field--name-parade-background { margin-bottom: 30px; .button, diff --git a/modules/parade_demo/sass/admin/_sections.scss b/modules/parade_demo/sass/admin/_sections.scss index 758e8ff..734c5fd 100644 --- a/modules/parade_demo/sass/admin/_sections.scss +++ b/modules/parade_demo/sass/admin/_sections.scss @@ -1,14 +1,6 @@ .layout--parade-admin-twocol-bricks { - // padding-top: 25px; -/* .layout__region--top { - .field--name-parade-title { - font-size: 16px; - font-weight: 600; - margin: 0 0 6px; - max-width: 65%; - } - }*/ + .layout__region--bottom { .layout__region--bottom-first { .field--label-inline { @@ -63,7 +55,8 @@ line-height: 30px; } select, - input.text-full { + input.text-full, + input.form-number { width: 200px; height: 30px; box-shadow: none;