improve layout of buttons, address, and record_actions

Resources/public/sass/_custom.scss

@@ -6,6 +6,9 @@
 @import 'custom/person';
 @import 'custom/pagination';
 @import 'custom/custom-fields';
+@import 'custom/address';
+@import 'custom/record_actions';
+
 
 html,body { 
    min-height:100%;
@@ -66,27 +69,6 @@ ul.custom_fields.choice li {
    list-style:none;
 }
 
-// Sticky form buttons
-.sticky-form-buttons {
-   margin-top:1em;
-   background-color:$orange;//$grey-5;
-   position:sticky;
-   bottom:0.5em;
-   text-align:center;
-   padding:0.5em;
-   border-radius: $base-border-radius;
-}
-
-.sticky-form-buttons .margin-5 {
-   margin-left: 5%;
-   margin-right: 5%;
-}
-
-.sticky-form-buttons .margin-10 {
-   margin-left: 10%;
-   margin-right: 10%;
-}
-
 .errors {
    color: $red;
 }
@@ -127,13 +109,6 @@ ul.custom_fields.choice li {
       
 }
 
-// Symfony records actions
-ul.record_actions {
-  padding-left: 0;
-}
-ul.record_actions li {
-  display: inline-block;
-}
 
 dd {
   margin-left: 0;

Resources/public/sass/custom/_address.scss

@@ -0,0 +1,14 @@
+div.chill_address {
+    div.chill_address_address {
+        margin: 0.7em 0;
+        font-size: 98%;
+        font-variant: small-caps;
+        
+        p {
+            display: inline-block;
+            margin: 0 0 0 1.5em;
+            text-indent: -1.5em;
+        }
+        
+    }
+}

Resources/public/sass/custom/_record_actions.scss

@@ -0,0 +1,45 @@
+// Symfony records actions
+/*ul.record_actions {
+  padding-left: 0;
+}
+ul.record_actions li {
+  display: inline-block;
+}*/
+
+ul.record_actions {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    padding: 0.5em 0;
+    
+    li {
+        display: inline-block;
+        list-style-type: none;
+        margin-right: 1em;
+        order: 99;
+        
+        &:last-child {
+            margin-right: 0;
+        }
+      }
+      
+
+    li.cancel {
+          order: 1;
+          margin-right: auto;
+      }
+      
+}
+
+ul.record_actions.sticky-form-buttons {
+    padding-left: 1em;
+    padding-right: 1em;
+}
+
+// inside table, little space between elements
+td ul.record_actions,
+   ul.record_actions_small {
+    li {
+        margin-right: 0.2em;
+    }
+}

Resources/public/sass/custom/modules/_buttons.scss

@@ -1,17 +1,138 @@
 .sc-button {
-   &.bt-submit, &.bt-create, &.bt-new {
-      @include button($green, $white); 
-   }
+    &.bt-submit, &.bt-save, &.bt-create, &.bt-new {
+        @include button($green, $white); 
+    }
 
-   &.bt-reset, &.bt-delete {
-      @include button($red, $white); 
-   }
+    &.bt-reset, &.bt-delete {
+        @include button($red, $white); 
+    }
 
-   &.bt-action, &.bt-edit, &.bt-update, &.bt-show {
-      @include button($orange, $white); 
-   }
-   
-   > i.fa {
-       margin-right: 0.5em;
-   }
+    &.bt-action, &.bt-edit, &.bt-update {
+        @include button($orange, $white); 
+    }
+
+    &.bt-show {
+        @include button($blue, $white);
+    }
+
+    &.bt-create::before, 
+    &.bt-save::before,
+    &.bt-new::before, 
+    &.bt-delete::before, 
+    &.bt-update::before, 
+    &.bt-edit::before,
+    &.bt-cancel::before,
+    &.bt-show::before {
+        font: normal normal normal 14px/1 FontAwesome;
+        margin-right: 0.5em;
+    }
+
+    &.bt-save::before {
+        // add a floppy
+        content: "";
+    }
+
+    &.bt-create::before, &.bt-new::before {
+        // add a plus
+        content: "";
+    }
+
+    &.bt-delete::before {
+        // add a trash
+        content: "";
+    }
+
+    &.bt-edit::before, &.bt-update::before {
+        // add a pencil
+        content: "";
+    }
+
+    &.bt-cancel::before {
+        // add an arrow left
+        content: ""; 
+    }
+
+    &.bt-show::before {
+        content: "";
+    }
+
+    > i.fa {
+        margin-right: 0.5em;
+    }
+
+    &.has-hidden,
+    &.no-content {
+        > i.fa {
+            margin-right: 0;
+        }
+
+        &.bt-create::before, 
+        &.bt-save::before,
+        &.bt-new::before, 
+        &.bt-delete::before, 
+        &.bt-update::before, 
+        &.bt-edit::before,
+        &.bt-cancel::before,
+        &.bt-show::before {
+            margin-right: 0;
+        }
+    }
+    
+    &.has-hidden > span.show-on-hover {
+            display: none;
+        }
+        
+    &.has-hidden:hover {
+        
+        > span.show-on-hover {
+        display: inline-block;
+        }
+
+        > i.fa {
+            margin-right: 0.5em;
+        }
+        
+        &.bt-create::before, 
+        &.bt-save::before,
+        &.bt-new::before, 
+        &.bt-delete::before, 
+        &.bt-update::before, 
+        &.bt-edit::before,
+        &.bt-cancel::before,
+        &.bt-show::before {
+            margin-right: 0.5em;
+        }
+    }
+
+    &.button-small {
+        font-size: 80%;
+        padding: 6px 8px;
+    }
+}
+
+
+
+// Sticky form buttons
+.sticky-form-buttons {
+    margin-top:1em;
+    background-color:$chill-beige;
+    position:sticky;
+    bottom:0.5em;
+    text-align:center;
+    padding:0.5em;
+    border-radius: $base-border-radius;
+
+
+}
+
+
+
+.sticky-form-buttons .margin-5 {
+    margin-left: 5%;
+    margin-right: 5%;
+}
+
+.sticky-form-buttons .margin-10 {
+    margin-left: 10%;
+    margin-right: 10%;
 }