Avoid setting base font size on root HTML element

TrestleAdmin · Jul 24, 2024 · 39d92dd · 39d92dd
1 parent 7dad9a1
commit 39d92dd
Show file tree

Hide file tree

Showing 29 changed files with 176 additions and 204 deletions.
diff --git a/app/assets/bundle/trestle/admin.css b/app/assets/bundle/trestle/admin.css
diff --git a/frontend/css/components/_alerts.scss b/frontend/css/components/_alerts.scss
@@ -4,7 +4,6 @@
 
   h3 {
     margin-bottom: 0.125rem;
-    font-size: 1.5rem;
     font-weight: 600;
   }
 
@@ -25,37 +24,37 @@
   }
 
   @include media-breakpoint-down(md) {
-    --#{$prefix}alert-padding-y: 1rem;
+    --#{$prefix}alert-padding-y: 0.875rem;
   }
 
   @include media-breakpoint-down(sm) {
-    --#{$prefix}alert-padding-x: 0.75rem;
+    --#{$prefix}alert-padding-x: 0.625rem;
     --#{$prefix}alert-padding-y: 0.75rem;
 
     h3 {
-      font-size: 1.25rem;
+      font-size: 1.125rem;
     }
 
     p {
-      font-size: 0.85rem;
+      font-size: 0.75rem;
     }
   }
 }
 
 .alert-icon {
   margin-right: var(--#{$prefix}alert-padding-x);
 
-  font-size: 2.75rem;
-  width: 2.75rem;
+  font-size: 2.375rem;
+  width: 2.375rem;
 
   text-align: center;
 
   @include media-breakpoint-down(sm) {
     margin-left: calc(var(--#{$prefix}alert-padding-x) * 0.25);
     margin-right: calc(var(--#{$prefix}alert-padding-x) * 0.75);
 
-    font-size: 2.25rem;
-    width: 2.25rem;
+    font-size: 2rem;
+    width: 2rem;
   }
 }
 

diff --git a/frontend/css/components/_avatar.scss b/frontend/css/components/_avatar.scss
@@ -1,7 +1,7 @@
 .avatar {
   --avatar-bg: #ccc;
-  --avatar-size: 40px;
-  --avatar-fallback-font-size: 0.8rem;
+  --avatar-size: 2.5rem;
+  --avatar-fallback-font-size: 0.75rem;
 
   display: inline-block;
   position: relative;
@@ -47,10 +47,11 @@
 }
 
 .avatar-sm {
-  --avatar-size: 24px;
+  --avatar-size: 1.5rem;
+  --avatar-fallback-font-size: 0.625rem;
 }
 
 .avatar-lg {
-  --avatar-size: 64px;
+  --avatar-size: 4rem;
   --avatar-fallback-font-size: 1.5rem;
 }
diff --git a/frontend/css/components/_breadcrumbs.scss b/frontend/css/components/_breadcrumbs.scss
@@ -1,10 +1,10 @@
 .breadcrumb {
-  --bs-breadcrumb-font-size: 0.85rem;
-  --bs-breadcrumb-item-padding-x: 0.35rem;
+  --#{$prefix}breadcrumb-font-size: 0.75rem;
+  --#{$prefix}breadcrumb-item-padding-x: 0.35rem;
 
   @include media-breakpoint-down(md) {
-    --bs-breadcrumb-font-size: 0.75rem;
-    --bs-breadcrumb-item-padding-x: 0.25rem;
+    --#{$prefix}breadcrumb-font-size: 0.625rem;
+    --#{$prefix}breadcrumb-item-padding-x: 0.25rem;
   }
 }
 

diff --git a/frontend/css/components/_buttons.scss b/frontend/css/components/_buttons.scss
@@ -6,15 +6,15 @@
       display: inline-block;
       @include icon-fa($fa-var-spinner);
       @extend .fa-spin;
-      margin-right: 10px;
+      margin-right: 0.625rem;
     }
   }
 
   > i {
     font-size: 90%;
 
     + .btn-label {
-      margin-left: 5px;
+      margin-left: 0.25rem;
     }
   }
 }
@@ -126,7 +126,7 @@
 
   @include button-child-visible('icon', '> i') {
     > i + .btn-label {
-      margin-left: 5px;
+      margin-left: 0.25rem;
     }
   };
 

diff --git a/frontend/css/components/_datepicker.scss b/frontend/css/components/_datepicker.scss
@@ -4,9 +4,9 @@
   right: 0;
   z-index: 4;
 
-  width: 34px;
-  height: 34px;
-  line-height: 34px;
+  width: 2rem;
+  height: 2rem;
+  line-height: 2rem;
   text-align: center;
 
   color: #ccc;

diff --git a/frontend/css/components/_dropdown.scss b/frontend/css/components/_dropdown.scss
@@ -7,31 +7,37 @@
 
   &:before {
     top: -$dropdown-arrow-outer-width;
-    left: 12px;
+    left: 0.75rem;
 
     border-left: $dropdown-arrow-width solid transparent;
     border-right: $dropdown-arrow-width solid transparent;
-    border-bottom: $dropdown-arrow-width solid $dropdown-border-color;
+    border-bottom: $dropdown-arrow-width solid var(--#{$prefix}dropdown-border-color);
   }
 
   &:after {
     top: -$dropdown-arrow-width;
-    left: 11px;
+    left: 0.75rem;
+
+    margin-left: -1px;
+    margin-right: 0;
 
     border-left: $dropdown-arrow-outer-width solid transparent;
     border-right: $dropdown-arrow-outer-width solid transparent;
-    border-bottom: $dropdown-arrow-outer-width solid $dropdown-bg;
+    border-bottom: $dropdown-arrow-outer-width solid var(--#{$prefix}dropdown-bg);
   }
 
   &.dropdown-menu-end {
     &:before {
       left: auto;
-      right: 12px;
+      right: 0.75rem;
     }
 
     &:after {
       left: auto;
-      right: 11px;
+      right: 0.75rem;
+
+      margin-left: 0;
+      margin-right: -1px;
     }
   }
 
@@ -41,35 +47,21 @@
       bottom: -$dropdown-arrow-outer-width;
 
       border-bottom: 0;
-      border-top: $dropdown-arrow-width solid $dropdown-border-color;
+      border-top: $dropdown-arrow-width solid var(--#{$prefix}dropdown-border-color);
     }
 
     &:after {
       top: auto;
       bottom: -$dropdown-arrow-width;
 
       border-bottom: 0;
-      border-top: $dropdown-arrow-outer-width solid $dropdown-bg;
+      border-top: $dropdown-arrow-outer-width solid var(--bs-dropdown-bg);
     }
   }
-}
-
-.dropdown-menu-dark {
-  &:before {
-    border-bottom-color: $dropdown-dark-border-color;
-  }
 
-  &:after {
-    border-bottom-color: $dropdown-dark-bg;
-  }
-
-  .dropup & {
-    &:before {
-      border-top-color: $dropdown-dark-border-color;
-    }
-
-    &:after {
-      border-top-color: $dropdown-dark-bg;
-    }
+  @include media-breakpoint-down(md) {
+    --#{$prefix}dropdown-font-size: 0.75rem;
+    --#{$prefix}dropdown-padding-y: 0.375rem;
+    --#{$prefix}dropdown-item-padding-x: 0.75rem;
   }
 }
diff --git a/frontend/css/components/_forms.scss b/frontend/css/components/_forms.scss
@@ -1,6 +1,6 @@
 .form-group {
   position: relative;
-  margin-bottom: 1rem;
+  margin-bottom: 0.875rem;
 
   &.has-error {
     > .form-label {
@@ -21,14 +21,14 @@ ul.invalid-feedback {
 
 .form-text {
   color: $form-text-color;
-  font-size: 0.9rem;
+  font-size: 0.8125rem;
 
   @include media-breakpoint-up(sm) {
     &.floating {
       position: absolute;
       top: 0;
       right: 0;
-      margin: 2px 0;
+      margin: 0.125rem 0;
     }
   }
 }
@@ -46,6 +46,6 @@ ul.invalid-feedback {
   .form-control,
   .form-select,
   .input-group-text {
-    font-size: 16px;
+    font-size: 1rem;
   }
 }
diff --git a/frontend/css/components/_media-grid.scss b/frontend/css/components/_media-grid.scss
@@ -105,7 +105,7 @@
 }
 
 .media-grid-auto {
-  --media-grid-item-size: 240px;
+  --media-grid-item-size: 15rem;
 
   grid-template-columns: repeat(auto-fill, minmax(var(--media-grid-item-size), 1fr));
 }
diff --git a/frontend/css/components/_modal.scss b/frontend/css/components/_modal.scss
@@ -61,7 +61,7 @@
 }
 
 .modal-title {
-  font-size: 1.3rem;
+  font-size: 1.125rem;
   font-weight: 500;
   text-shadow: rgba(black, 0.5) 0 1px 1px;
   color: white;
@@ -70,7 +70,7 @@
 .modal-tabs {
   .nav-tabs {
     background: $body-bg;
-    padding: 10px 15px 0 15px;
+    padding: 0.625rem 1rem 0 1rem;
   }
 }
 
@@ -112,11 +112,11 @@
     }
 
     h3 {
-      font-size: 1.25rem;
+      font-size: 1.125rem;
     }
 
     p {
-      font-size: 0.9rem;
+      font-size: 0.825rem;
     }
   }
 }

diff --git a/frontend/css/components/_pagination.scss b/frontend/css/components/_pagination.scss
@@ -6,7 +6,7 @@
   gap: 0.75rem;
 
   p {
-    font-size: 0.85rem;
+    font-size: 0.75rem;
     margin: 0;
   }
 
@@ -33,7 +33,7 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: 0.5rem;
+    gap: 0.375rem;
 
     .pagination {
       margin: 0 auto;

diff --git a/frontend/css/components/_popover.scss b/frontend/css/components/_popover.scss
@@ -1,5 +1,5 @@
 .popover-header {
   font-weight: 500;
-  font-size: 0.85rem;
+  font-size: 0.75rem;
   border-bottom-color: $popover-header-border;
 }
diff --git a/frontend/css/components/_scopes.scss b/frontend/css/components/_scopes.scss
@@ -35,7 +35,7 @@
 
 .scope-group {
   line-height: 2;
-  font-size: 0.85rem;
+  font-size: 0.75rem;
   padding: 0.5rem 1rem 0.25rem 0.75rem;
 
   background: #f7f7f7;
@@ -47,27 +47,21 @@
   display: flex;
   flex-wrap: wrap;
 
+  gap: 0.25rem 0.35rem;
+
   position: relative;
   align-items: center;
 
   margin-bottom: 0;
   padding: 0;
-
-  li {
-    margin: 0.125rem 0.35rem 0.125rem 0;
-
-    &:last-child {
-      margin-right: 0;
-    }
-  }
 }
 
 .scope {
   display: inline-block;
 
   background-color: $scope-bg;
 
-  font-size: 0.8rem;
+  font-size: 0.6875rem;
   font-weight: normal;
   white-space: nowrap;