themefisher / sleek-bootstrap

Sleek Dashboard - Free Bootstrap Admin Template and UI Kit

Home Page:https://themefisher.com/products/sleek

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

RFC: change uncommon breadcrumb style

rchavik opened this issue · comments

I noticed 3 things:

  • uncommon separator. the diamond separator looks awkward for me. Especially when used to display file paths
  • text-transform: capitalize on .breadcrumb .breadcrumb-item a and `.breadcrumb .breadcrumb-item' ideally should be disabled/removed. it might be better to leave this to users to customize.
  • no visible difference between clickable vs non-clickable crumb

Following is an example of breadcrumbs displaying file path.
image

Ideally, it should be something like this:

image

This patch addresses the first 2 items:

diff --git a/scss/_bredcrumb.scss b/scss/_bredcrumb.scss
index 9c44208..6ccb989 100644
--- a/scss/_bredcrumb.scss
+++ b/scss/_bredcrumb.scss
@@ -13,13 +13,11 @@
     justify-content: space-between;
   }
 }
-.breadcrumb {  
+.breadcrumb {
   .breadcrumb-item {
     font-size: 0.98rem;
-    text-transform: capitalize;
     a {
       color: $secondary;
-      text-transform: capitalize;
     }
   }
   &.breadcrumb-inverse {
@@ -94,10 +92,6 @@
   }
 }
 .breadcrumb-item+.breadcrumb-item::before {
-  content: '\f763';
-  font-family: $font-family-icon;
-  transform: rotate(45deg);
-  font-size: 7px;
+  content: '/';
   color: $secondary;
-
 }

This is my current attempt to adopt sleek: http://demo.croogo.org/4.0/admin/file-manager (link is to the filemanager plugin that uses the above breadcrumb styles)

I can haz comment? 😄