chore: fix some styling issues

ghiscoding · May 10, 2024 · e555a10 · e555a10
1 parent c8e50cb
commit e555a10
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 24 deletions.
diff --git a/bootstrap5-i18n-demo/src/examples/slickgrid/App.tsx b/bootstrap5-i18n-demo/src/examples/slickgrid/App.tsx
@@ -86,7 +86,7 @@ export default function Routes() {
   return (
     <div>
       <NavBar></NavBar>
-      <div className="container-fluid">
+      <div>
         <div className="panel-wm">
           <section id="panel-left" className="panel-wm-left au-animate">
             <ul className="well nav nav-pills nav-stacked">

diff --git a/bootstrap5-i18n-demo/src/styles.scss b/bootstrap5-i18n-demo/src/styles.scss
@@ -1,8 +1,8 @@
-@import '@slickgrid-universal/common/dist/styles/sass/variables';
-
 $navbar-height: 56px;
 $side-menu-width: 250px;
 
+@import '@slickgrid-universal/common/dist/styles/sass/variables';
+
 .bold {
   font-weight: bold;
 }
@@ -11,14 +11,6 @@ $side-menu-width: 250px;
   font-style: italic;
 }
 
-.faded {
-  opacity: 0.2;
-}
-
-.faded:hover {
-  opacity: 0.5;
-}
-
 .font18 {
   font-size: 18px;
 }
@@ -27,14 +19,28 @@ $side-menu-width: 250px;
   padding: 5px;
 }
 
-.btn-group-xs>.btn,
-.btn-xs {
-  padding: 6px 2px;
-  font-size: .875rem;
-  line-height: .5;
-  border-radius: .2rem;
-  margin: 0 2px;
+.btn-icon {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.btn-group-xs > .btn, .btn-xs {
+  padding  : 1px 5px;
+  font-size  : 12px;
+  line-height  : 1.5;
+  border-radius : 3px;
+  margin: 0;
   font-size: 12px;
+  height: 22px;
+  vertical-align: middle;
+}
+
+.mdi-pencil.pointer:hover {
+  color: #00bfff;
+}
+.mdi-trash-can.pointer:hover {
+  color: #ff002b;
 }
 
 .body-content {
@@ -57,11 +63,11 @@ $side-menu-width: 250px;
 }
 
 .faded {
-  opacity: 0.2;
+  opacity: 0.7;
 }
 
 .faded:hover {
-  opacity: 0.5;
+  opacity: 0.9;
 }
 
 section {
@@ -81,7 +87,7 @@ section {
 }
 
 .panel-wm {
-  padding-top: $navbar-height;
+  padding: #{$navbar-height} 0 0 0;
 
   .nav-stacked {
     padding-bottom: 30px;
@@ -97,15 +103,15 @@ section {
   }
 
   .panel-wm-content {
-    padding-left: ($side-menu-width + 5px);
-    padding-right: 15px;
+    margin-left: $side-menu-width;
+    padding: 0 1rem;
   }
 
   .panel-wm-left {
     position: fixed;
     z-index: 400;
     transition: left 0.15s;
-    top: calc(#{$navbar-height});
+    top: $navbar-height;
     bottom: 0;
     left: 0;
     background-color: #f5f5f5;