@syncfusion/ej2-navigations 20.4.52 → 21.1.35

package/styles/toolbar/_theme.scss

@@ -8,351 +8,146 @@
     border: $tbar-border-size $tbar-border-type $tbar-default-border;
     box-shadow: $tbar-box-shadow;
 
-    &.e-vertical {
-
-      .e-hor-nav {
-        border: $tbar-border-nav-type $tbar-default-border;
-        border-width: $tbar-popup-vertical-border-width;
-      }
-
-      &.e-rtl .e-hor-nav {
-        border: $tbar-border-nav-type $tbar-default-border;
-        border-width: $tbar-popup-vertical-rtl-border-width;
-      }
-
-      .e-toolbar-items .e-toolbar-item {
-
-        &.e-separator {
-          border-width: $tba-vertical-separator;
-        }
-      }
+    .e-toolbar-items {
+      background: $tbar-default-bg;
     }
 
-    &.e-extended-toolbar {
-
-      .e-toolbar-extended {
-
-        .e-toolbar-item.e-overlay {
-          background: $tbar-default-bg;
-        }
+    .e-toolbar-item {
 
-        .e-toolbar-item.e-separator {
-          border: $tbar-separator-border-type $tbar-separator-border;
-          border-width: $tba-horizontal-separator;
-        }
+      .e-tbar-btn {
+        background: $tbar-items-default-bg;
+        box-shadow: $tbar-btn-box-shadow;
+        color: $tbar-default-font;
+        border: $tbar-btn-border;
 
-        .e-toolbar-item .e-tbar-btn .e-icons {
+        .e-icons {
           color: $tbar-default-icon-color;
         }
 
-        .e-toolbar-item .e-tbar-btn {
-          background: $tbar-default-bg;
-          box-shadow: $tbar-btn-box-shadow;
-          color: $tbar-default-font;
-          border: $tbar-ext-btn-border;
+        .e-tbar-btn-text {
+          color: $tbar-btn-text-color;
+        }
 
-          .e-toolbar-item .e-tbar-btn-text {
-            color: $tbar-default-font;
+        &.e-flat.e-active {
+          background: $tbar-btn-pressed-bg;
+          box-shadow: $tbar-flat-btn-active-box-shadow;
+          .e-tbar-btn-text {
+            color: $tbar-btn-pressed-text-color;
           }
 
           &:focus {
-            background: $tbar-focus-bg;
-            border-radius: $tbar-btn-border-radius;
-            color: $tbar-hover-font-color;
-            border-color: $tbar-btn-focus-border-color;
-            border-style: $tbar-border-nav-type;
-            border-width: $tbar-btn-hover-border-size;
-            box-shadow: $tbar-ext-btn-focus-box-shadow;
-
-            .e-icons {
-              color: $tbar-ext-btn-icon-hover-font;
-            }
-
-            .e-tbar-btn-text {
-              color: $tbar-ext-btn-text-hover-font;
-            }
+            box-shadow: $tbar-btn-pressed-focus-box-shadow;
           }
-
-          &:hover {
-            background: $tbar-hover-bg;
-            border-radius: $tbar-btn-border-radius;
-            color: $tbar-hover-font-color;
-            border-color: $tbar-ext-btn-hover-border-color;
-            border-style: $tbar-border-nav-type;
-            border-width: $tbar-ext-btn-hover-border-size;
-
-            &:active {
-
-              .e-icons {
-                color: $tbar-ext-btn-icon-hover-active-font;
-              }
-
-              .e-tbar-btn-text {
-                color: $tbar-ext-btn-text-hover-active-font;
-              }
-            }
-
-            .e-icons {
-              color: $tbar-ext-btn-icon-hover-font;
-            }
-
-            .e-tbar-btn-text {
-              color: $tbar-ext-btn-text-hover-font;
-            }
-          }
-
-          &:active {
-            background: $tbar-btn-press-bg;
-            border-radius: $tbar-btn-border-radius;
-            box-shadow: $tbar-btn-pressed-box-shadow;
-            color: $tbar-btn-active-font-color;
-            border-color: $tbar-press-border-color;
-            border-style: $tbar-border-nav-type;
-            border-width: $tbar-ext-btn-active-border-size;
-
-            .e-icons {
-              color: $tbar-ext-btn-icon-active-font;
-            }
-
-            .e-tbar-btn-text {
-              color: $tbar-ext-btn-text-active-font;
-            }
-          }
-        }
-      }
-    }
-
-    .e-tbar-btn.e-btn .e-icons {
-      color: $tbar-default-icon-color;
-    }
-
-    .e-toolbar-pop {
-      background: $tbar-pop-bg;
-      border: $tbar-border-size $tbar-border-type $tbar-default-border;
-      box-shadow: $tbar-pop-box-shadow;
-
-      .e-toolbar-item {
-
-        .e-tbar-btn {
-          background: $tbar-popup-btn-bg;
         }
-
-        .e-tbar-btn:hover {
-          background: $tbar-popup-btn-hover-bg;
-          box-shadow: $tbar-popup-btn-hover-box-shadow;
-          color: $tbar-popup-btn-hover-color;
-          border-color: $tbar-hover-border-color;
+  
+        &:focus {
+          background: $tbar-focus-bg;
+          border-radius: $tbar-btn-border-radius;
+          color: $tbar-hover-font;
+          border-color: $tbar-btn-focus-border-color;
           border-style: $tbar-border-nav-type;
-          border-width: $tbar-popup-btn-hover-border-size;
+          border-width: $tbar-btn-hover-border-size;
+          box-shadow: $tbar-ext-btn-focus-box-shadow;
 
           .e-icons {
-            color: $tbar-popup-btn-hover-icons-color;
+            color: $tbar-btn-icons-focus-color;
           }
-
+  
           .e-tbar-btn-text {
-            color: $tbar-popup-btn-hover-text-color;
+            color: $tbar-btn-text-focus-color;
           }
         }
-
-        .e-tbar-btn:active {
-          background: $tbar-popup-btn-active-bg;
-          box-shadow: $tbar-popup-btn-active-box-shadow;
-          color: $tbar-popup-btn-active-color;
-          border-color: $tbar-press-border-color;
+  
+        &:hover {
+          background: $tbar-hover-bg;
+          border-color: $tbar-hover-border-color;
           border-style: $tbar-border-nav-type;
-          border-width: $tbar-popup-btn-hover-border-size;
+          border-width: $tbar-btn-hover-border-size;
+          border-radius: $tbar-btn-border-radius;
+          color: $tbar-hover-font;
 
           .e-icons {
-            color: $tbar-popup-btn-active-icons-color;
+            color: $tbar-btn-icons-focus-color;
           }
 
           .e-tbar-btn-text {
-            color: $tbar-popup-btn-active-text-color;
+            color: $tbar-btn-text-focus-color;
+          }
+
+          &:active {
+            .e-icons {
+              color: $tbar-btn-hover-active-icons-color;
+            }
+
+            .e-tbar-btn-text {
+              color: $tbar-btn-hover-active-text-color;
+            }
           }
         }
 
-        .e-tbar-btn:focus {
-          background: $tbar-popup-btn-focus-bg;
-          box-shadow: $tbar-popup-btn-focus-box-shadow;
-          color: $tbar-popup-btn-focus-color;
-          border-color: $tbar-btn-focus-border-color;
+        &:active {
+          background: $tbar-btn-active-bg;
+          border-color: $tbar-press-border-color;
           border-style: $tbar-border-nav-type;
-          border-width: $tbar-popup-btn-hover-border-size;
+          border-width: $tbar-btn-hover-border-size;
+          border-radius: $tbar-btn-border-radius;
+          box-shadow: $tbar-btn-pressed-box-shadow;
+          color: $tbar-press-font;
 
           .e-icons {
-            color: $tbar-popup-btn-focus-icons-color;
+            color: $tbar-btn-active-icons-color;
           }
-
+  
           .e-tbar-btn-text {
-            color: $tbar-popup-btn-focus-text-color;
+            color: $tbar-btn-active-text-color;
           }
         }
-
-        .e-btn:focus {
-          outline: $tbar-popup-btn-focus-outline;
-        }
-
-        &:not(.e-separator) {
-          background: $tbar-item-pop-bg-color;
-        }
       }
-    }
 
-    &.e-extended-toolbar .e-toolbar-pop {
-      background: $tbar-default-bg;
-    }
-
-    &.e-toolpop {
+      &.e-separator {
+        border: $tbar-separator-border-type $tbar-separator-border;
+        border-width: $tba-horizontal-separator;
+      }
 
-      .e-hor-nav.e-nav-active,
-      .e-hor-nav.e-nav-active:not(.e-expended-nav) {
-        background: $tbar-pressed-bg;
-        box-shadow: $tbar-nav-pressed-box-shadow;
-        border-color: $tbar-popup-nav-pressed-border-color;
-        border-style: $tbar-border-nav-type;
-        border-width: $tbar-popup-nav-pressed-border-size;
+      &.e-overlay {
+        background: $tbar-default-bg;
+        opacity: $tbar-btn-overlay-opacity;
+        color: $tbar-default-icon-overlay;
 
-        &:focus {
-          border-color: $tbar-popup-nav-pressed-focus-border-color;
-          border-style: $tbar-border-nav-type;
-          border-width: $tbar-popup-nav-pressed-focus-border-size;
+        .e-tbar-btn-text {
+          color: $tbar-default-font-overlay;
         }
 
         .e-icons {
-          color: $tbar-active-font-color;
-
-          &:active {
-            color: $tbar-popup-nav-pressed-icons-active-color;
-          }
+          color: $tbar-default-icon-overlay;
         }
       }
     }
 
-    .e-tbar-btn {
-      background: $tbar-items-default-bg;
-      box-shadow: $tbar-btn-box-shadow;
-      color: $tbar-default-font;
-      border: $tbar-btn-border;
-
-      &:focus {
-        background: $tbar-focus-bg;
-        border-radius: $tbar-btn-border-radius;
-        color: $tbar-hover-font;
-        border-color: $tbar-btn-focus-border-color;
-        border-style: $tbar-border-nav-type;
-        border-width: $tbar-btn-hover-border-size;
-        box-shadow: $tbar-ext-btn-focus-box-shadow;
-
-        .e-icons {
-          color: $tbar-btn-icons-focus-color;
-        }
+    &.e-vertical {
 
-        .e-tbar-btn-text {
-          color: $tbar-btn-text-focus-color;
-        }
+      .e-hor-nav {
+        border: $tbar-border-nav-type $tbar-default-border;
+        border-width: $tbar-popup-vertical-border-width;
       }
 
-      &:hover {
-        background: $tbar-hover-bg;
-        border-color: $tbar-hover-border-color;
-        border-style: $tbar-border-nav-type;
-        border-width: $tbar-btn-hover-border-size;
-        border-radius: $tbar-btn-border-radius;
-        color: $tbar-hover-font;
+      &.e-rtl .e-hor-nav {
+        border: $tbar-border-nav-type $tbar-default-border;
+        border-width: $tbar-popup-vertical-rtl-border-width;
       }
-    }
-
-    .e-toolbar-items {
-      background: $tbar-default-bg;
-
-      .e-toolbar-item {
-
-        &.e-overlay {
-          background: $tbar-default-bg;
-          opacity: $tbar-btn-overlay-opacity;
-
-          .e-tbar-btn-text {
-            color: $tbar-default-font-overlay;
-          }
-
-          .e-icons {
-            color: $tbar-default-icon-overlay;
-          }
-        }
-
-        .e-tbar-btn-text {
-          color: $tbar-btn-text-color;
-        }
 
-        .e-tbar-btn {
-
-          &.e-flat.e-active {
-            .e-tbar-btn-text {
-              color: $tbar-btn-pressed-text-color;
-            }
-
-            &:focus {
-              box-shadow: $tbar-btn-pressed-focus-box-shadow;
-            }
-          }
-
-          &:hover {
-            .e-icons {
-              color: $tbar-btn-icons-focus-color;
-            }
-
-            .e-tbar-btn-text {
-              color: $tbar-btn-text-focus-color;
-            }
-
-            &:active {
-              .e-icons {
-                color: $tbar-btn-hover-active-icons-color;
-              }
-  
-              .e-tbar-btn-text {
-                color: $tbar-btn-hover-active-text-color;
-              }
-            }
-          }
-
-          &:focus {
-            .e-icons {
-              color: $tbar-btn-icons-focus-color;
-            }
-
-            .e-tbar-btn-text {
-              color: $tbar-btn-text-focus-color;
-            }
-          }
-        }
+      .e-toolbar-items .e-toolbar-item {
 
         &.e-separator {
-          border: $tbar-separator-border-type $tbar-separator-border;
-          border-width: $tba-horizontal-separator;
+          border-width: $tba-vertical-separator;
         }
       }
     }
 
-    &.e-rtl .e-hor-nav {
-      background: $tbar-default-bg;
-      border: $tbar-border-nav-type $tbar-default-border;
-      border-left: 0;
-      border-width: $tbar-popup-rtl-border-width;
-
-      &:not(.e-nav-active):hover {
-        background: $tbar-hover-bg;
-        color: $tbar-hover-font;
-      }
-    }
-
     .e-hor-nav {
       background: $tbar-default-bg;
       border: $tbar-border-nav-type $tbar-default-border;
       border-width: $tbar-popup-border-width;
-    }
-
-    .e-hor-nav  {
 
       &::after {
         @include tbar-btn-animation;
@@ -417,24 +212,140 @@
       }
     }
 
-    .e-tbar-btn {
+    &.e-toolpop {
 
-      &:active {
-        background: $tbar-btn-active-bg;
-        border-color: $tbar-press-border-color;
+      .e-hor-nav.e-nav-active,
+      .e-hor-nav.e-nav-active:not(.e-expended-nav) {
+        background: $tbar-pressed-bg;
+        box-shadow: $tbar-nav-pressed-box-shadow;
+        border-color: $tbar-popup-nav-pressed-border-color;
         border-style: $tbar-border-nav-type;
-        border-width: $tbar-btn-active-border-size;
-        border-radius: $tbar-btn-border-radius;
-        box-shadow: $tbar-btn-pressed-box-shadow;
-        color: $tbar-press-font;
+        border-width: $tbar-popup-nav-pressed-border-size;
+
+        &:focus {
+          border-color: $tbar-popup-nav-pressed-focus-border-color;
+          border-style: $tbar-border-nav-type;
+          border-width: $tbar-popup-nav-pressed-focus-border-size;
+        }
 
         .e-icons {
-          color: $tbar-btn-active-icons-color;
+          color: $tbar-active-font-color;
+
+          &:active {
+            color: $tbar-popup-nav-pressed-icons-active-color;
+          }
         }
+      }
+    }
 
-        .e-tbar-btn-text {
-          color: $tbar-btn-active-text-color;
+    .e-toolbar-pop {
+      background: $tbar-pop-bg;
+      border: $tbar-border-size $tbar-border-type $tbar-default-border;
+      box-shadow: $tbar-pop-box-shadow;
+
+      .e-toolbar-item {
+
+        .e-tbar-btn {
+          background: $tbar-popup-btn-bg;
+
+          &:hover {
+            background: $tbar-popup-btn-hover-bg;
+            box-shadow: $tbar-popup-btn-hover-box-shadow;
+            border-color: $tbar-hover-border-color;
+            border-style: $tbar-border-nav-type;
+            border-width: $tbar-popup-btn-hover-border-size;
+          }
+
+          &:active {
+            background: $tbar-popup-btn-active-bg;
+            box-shadow: $tbar-popup-btn-active-box-shadow;
+            border-color: $tbar-press-border-color;
+            border-style: $tbar-border-nav-type;
+            border-width: $tbar-popup-btn-hover-border-size;
+          }
+
+          &:focus {
+            background: $tbar-popup-btn-focus-bg;
+            box-shadow: $tbar-popup-btn-focus-box-shadow;
+            border-color: $tbar-btn-focus-border-color;
+            border-style: $tbar-border-nav-type;
+            border-width: $tbar-popup-btn-hover-border-size;
+          }
         }
+
+        .e-btn:focus {
+          outline: $tbar-popup-btn-focus-outline;
+        }
+
+        &:not(.e-separator) {
+          background: $tbar-item-pop-bg-color;
+        }
+      }
+    }
+
+    &.e-extended-toolbar {
+
+      .e-toolbar-extended {
+
+        .e-toolbar-item {
+
+          .e-tbar-btn {
+            background: $tbar-default-bg;
+            box-shadow: $tbar-btn-box-shadow;
+            border: $tbar-ext-btn-border;
+  
+            &:focus {
+              background: $tbar-focus-bg;
+              border-radius: $tbar-btn-border-radius;
+              border-color: $tbar-btn-focus-border-color;
+              border-style: $tbar-border-nav-type;
+              border-width: $tbar-btn-hover-border-size;
+              box-shadow: $tbar-ext-btn-focus-box-shadow;
+            }
+  
+            &:hover {
+              background: $tbar-hover-bg;
+              border-radius: $tbar-btn-border-radius;
+              border-color: $tbar-ext-btn-hover-border-color;
+              border-style: $tbar-border-nav-type;
+              border-width: $tbar-btn-hover-border-size;
+            }
+  
+            &:active {
+              background: $tbar-btn-press-bg;
+              border-radius: $tbar-btn-border-radius;
+              box-shadow: $tbar-btn-pressed-box-shadow;
+              border-color: $tbar-press-border-color;
+              border-style: $tbar-border-nav-type;
+              border-width: $tbar-btn-hover-border-size;
+            }
+          }
+
+          &.e-separator {
+            border: $tbar-separator-border-type $tbar-separator-border;
+            border-width: $tba-horizontal-separator;
+          }
+
+          &.e-overlay {
+            background: $tbar-default-bg;
+          }
+        }
+      }
+
+      .e-toolbar-pop {
+        background: $tbar-default-bg;
+      }
+    }
+
+    &.e-rtl .e-hor-nav {
+      background: $tbar-default-bg;
+      border: $tbar-border-nav-type $tbar-default-border;
+      border-left: 0;
+      border-width: $tbar-popup-rtl-border-width;
+
+      &:not(.e-nav-active):hover {
+        background: $tbar-hover-bg;
+        color: $tbar-hover-font;
       }
     }
   }