fix(stylings): composite editor styling fixes for BS4 (#195)

* fix(stylings): composite editor styling fixes for BS4 * refactor: tweak composite editor slider value * refactor(stylings): fix pagination icons alignment with BS4
ghiscoding · Dec 14, 2020 · 305eb90 · 305eb90
1 parent fcf4bc1
commit 305eb90
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 4 deletions.
diff --git a/packages/common/src/styles/_variables-theme-material.scss b/packages/common/src/styles/_variables-theme-material.scss
@@ -138,6 +138,7 @@ $detail-view-icon-expand-color:                 $primary-color !default;
 $detail-view-icon-collapse:                     url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($detail-view-icon-collapse-color)}" viewBox="0 0 24 24"><path d="M17,13H7V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"></path></svg>') !default;
 $detail-view-icon-expand:                       url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($detail-view-icon-expand-color)}" viewBox="0 0 24 24"><path d="M17,13H13V17H11V13H7V11H11V7H13V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"></path></svg>') !default;
 $pagination-icon-color:                         $primary-color !default;
+$pagination-icon-height:                        $icon-width !default;
 $pagination-icon-seek-first:                    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($pagination-icon-color)}" viewBox="0 0 24 24"><path d="M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6zM6 6h2v12H6z"/><path d="M24 24H0V0h24v24z" fill="none"/></svg>') !default;
 $pagination-icon-seek-end:                      url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($pagination-icon-color)}" viewBox="0 0 24 24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6zM16 6h2v12h-2z"/></svg>') !default;
 $pagination-icon-seek-next:                     url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($pagination-icon-color)}" viewBox="0 0 24 24"><path d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"></path></svg>') !default;

diff --git a/packages/common/src/styles/_variables-theme-salesforce.scss b/packages/common/src/styles/_variables-theme-salesforce.scss
@@ -158,13 +158,15 @@ $date-editor-clear-button-icon-vertical-align:  initial !default;
 $date-editor-clear-button-icon-height:          14px !default;
 $date-editor-clear-button-icon-width:           14px !default;
 $editor-focus-box-shadow:                       0 0 3px $primary-color !default;
+$editor-modal-input-editor-height:              28px !default;
 $editor-modal-container-radius:                 var(--lwc-borderRadiusMedium, 0.25rem) !default;
 $editor-modal-close-btn-outside-color:          #ffffff !default;
 $editor-modal-close-btn-outside-font-size:      36px !default;
 $editor-modal-close-btn-outside-right:          -7px !default;
 $editor-modal-close-btn-outside-top:            -32px !default;
 $editor-modal-footer-btn-height:                28px;
 $editor-modal-header-border-bottom:             var(--lwc-borderWidthThick, 2px) solid var(--lwc-colorBorder, rgb(221, 219, 218)) !default;
+$editor-modal-slider-editor-value-min-height:   calc(#{$editor-modal-input-editor-height - 2px}) !default;
 $editor-modal-title-font-size:                  var(--lwc-fontSize7, 1.25rem) !default;
 $editor-modal-title-font-weight:                var(--lwc-fontWeightLight, 300) !default;
 $editor-modal-title-line-height:                var(--lwc-lineHeightHeading, 1.25) !default;
@@ -181,6 +183,7 @@ $detail-view-icon-expand-color:                 $primary-color !default;
 $detail-view-icon-collapse:                     url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($detail-view-icon-collapse-color)}" viewBox="0 0 24 24"><path d="M17,13H7V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"></path></svg>') !default;
 $detail-view-icon-expand:                       url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($detail-view-icon-expand-color)}" viewBox="0 0 24 24"><path d="M17,13H13V17H11V13H7V11H11V7H13V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"></path></svg>') !default;
 $pagination-icon-color:                         $primary-color !default;
+$pagination-icon-height:                        $icon-width !default;
 $pagination-icon-seek-first:                    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($pagination-icon-color)}" viewBox="0 0 24 24"><path d="M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6zM6 6h2v12H6z"/><path d="M24 24H0V0h24v24z" fill="none"/></svg>') !default;
 $pagination-icon-seek-end:                      url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($pagination-icon-color)}" viewBox="0 0 24 24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6zM16 6h2v12h-2z"/></svg>') !default;
 $pagination-icon-seek-next:                     url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($pagination-icon-color)}" viewBox="0 0 24 24"><path d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"></path></svg>') !default;

diff --git a/packages/common/src/styles/_variables.scss b/packages/common/src/styles/_variables.scss
@@ -573,6 +573,7 @@ $editor-modal-close-btn-padding:                      0px !default;
 $editor-modal-close-btn-width:                        20px !default;
 $editor-modal-close-btn-right:                        10px !default;
 $editor-modal-close-btn-top:                          10px !default;
+$editor-modal-close-btn-border-radius:                0 4px 4px 0 !default;
 $editor-modal-close-btn-outside-color:                #dddddd !default;
 $editor-modal-close-btn-outside-color-hover:          darken($editor-modal-close-btn-outside-color, 10%) !default;
 $editor-modal-close-btn-outside-font-size:            30px !default;
@@ -633,6 +634,7 @@ $editor-modal-large-editor-footer-line-height:        12px !default;
 $editor-modal-large-editor-count-color:               $large-editor-count-color !default;
 $editor-modal-large-editor-count-font-size:           10px !default;
 $editor-modal-large-editor-count-margin:              0 !default;
+$editor-modal-slider-editor-value-min-height:         $editor-modal-input-editor-height !default;
 $editor-modal-title-font-color:                       #333333 !default;
 $editor-modal-title-font-size:                        20px !default;
 $editor-modal-title-font-weight:                      500 !default;
@@ -803,14 +805,15 @@ $pagination-count-margin-left:                        2px !default;
 $pagination-font-size:                                calc(#{$font-size-base} - 1px) !default;
 $pagination-icon-color:                               $primary-color !default;
 $pagination-icon-font-size:                           calc(#{$icon-font-size} - 1px) !default;
+$pagination-icon-height:                              initial !default;
 $pagination-icon-seek-first:                          "\f100" !default;
 $pagination-icon-seek-end:                            "\f101" !default;
 $pagination-icon-seek-next:                           "\f105" !default;
 $pagination-icon-seek-prev:                           "\f104" !default;
-$pagination-icon-seek-first-width:                    inherit !default;
-$pagination-icon-seek-end-width:                      inherit !default;
-$pagination-icon-seek-next-width:                     inherit !default;
-$pagination-icon-seek-prev-width:                     inherit !default;
+$pagination-icon-seek-first-width:                    initial !default;
+$pagination-icon-seek-end-width:                      initial !default;
+$pagination-icon-seek-next-width:                     initial !default;
+$pagination-icon-seek-prev-width:                     initial !default;
 $pagination-icon-seek-text-stroke:                    0.4px !default;
 $pagination-button-border:                            1px solid #acacac !default;
 $pagination-border-top:                               0 none !default;

diff --git a/packages/common/src/styles/slick-component.scss b/packages/common/src/styles/slick-component.scss
@@ -115,6 +115,8 @@
       display: inline-flex;
 
       .page-link {
+        display: flex;
+        align-items: center;
         font-size: $pagination-icon-font-size;
         border: $pagination-button-border;
         height: $pagination-button-height;
@@ -152,27 +154,31 @@
           &:before {
             content: $pagination-icon-seek-first;
             display: block;
+            height: $pagination-icon-height;
             width: $pagination-icon-seek-first-width;
           }
         }
         .icon-seek-prev {
           &:before {
             content: $pagination-icon-seek-prev;
             display: block;
+            height: $pagination-icon-height;
             width: $pagination-icon-seek-prev-width;
           }
         }
         .icon-seek-next {
           &:before {
             content: $pagination-icon-seek-next;
             display: block;
+            height: $pagination-icon-height;
             width: $pagination-icon-seek-next-width;
           }
         }
         .icon-seek-end {
           &:before {
             content: $pagination-icon-seek-end;
             display: block;
+            height: $pagination-icon-height;
             width: $pagination-icon-seek-end-width;
           }
         }

diff --git a/packages/common/src/styles/slick-editors.scss b/packages/common/src/styles/slick-editors.scss
@@ -396,8 +396,11 @@
 
       .flatpickr.input-group {
         .input-group-btn {
+          min-width: 28px;
           .btn {
+            margin: 0;
             height: $editor-modal-input-editor-height;
+            border-radius: $editor-modal-close-btn-border-radius;
           }
         }
       }
@@ -410,6 +413,13 @@
       }
       .slider-value {
         min-width: 28px;
+        .input-group-text {
+          min-height: $editor-modal-slider-editor-value-min-height;
+          min-width: 28px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
       }
 
       &.modified {