Admin UI // call to action layout

brainsum · Oct 10, 2017 · f07c23a · f07c23a
1 parent 60f9870
commit f07c23a
Show file tree

Hide file tree

Showing 7 changed files with 155 additions and 106 deletions.
diff --git a/images/eye.png b/images/eye.png
diff --git a/images/trash.png b/images/trash.png
diff --git a/modules/parade_demo/css/parade.demo.css b/modules/parade_demo/css/parade.demo.css
diff --git 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
@@ -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
@@ -42,17 +42,39 @@
 }
 
 .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;
     border-radius: 0;
   }
 }
 
-.field--name-parade-call-to-action {
-  text-align: left !important;
-}
-
 .field--name-parade-background {
   margin-bottom: 30px;
   .button,