materia: improve inline svgs

thomaspark · Oct 31, 2021 · a970ce4 · a970ce4
1 parent 8092e33
commit a970ce4
Show file tree

Hide file tree

Showing 8 changed files with 78 additions and 44 deletions.
diff --git a/dist/materia/_bootswatch.scss b/dist/materia/_bootswatch.scss
@@ -293,7 +293,7 @@ select,
 select.form-control {
   appearance: none;
   padding: .5rem 0;
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='4' viewBox='0 0 8 4'%3e%3cpolygon fill='%23666' points='8 0 4 4 0 0'/%3e%3c/svg%3e%0a");
+  background-image: escape-svg(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 4'%3e%3cpolygon fill='#{$gray-600}' points='8 0 4 4 0 0'/%3e%3c/svg%3e%0a"));
   background-size: 8px 4px;
   background-repeat: no-repeat;
   background-position: right center;
@@ -315,7 +315,7 @@ select.form-control {
 
   &:focus {
     box-shadow: $input-focus-box-shadow;
-    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='4' viewBox='0 0 8 4'%3e%3cpolygon fill='%23212121' points='8 0 4 4 0 0'/%3e%3c/svg%3e%0a");
+    background-image: escape-svg(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 4'%3e%3cpolygon fill='#{$gray-900}' points='8 0 4 4 0 0'/%3e%3c/svg%3e%0a"));
   }
 
   &[multiple] {

diff --git a/dist/materia/_variables.scss b/dist/materia/_variables.scss
@@ -81,7 +81,7 @@ $custom-control-indicator-size:  1.25rem !default;
 $custom-control-indicator-bg:    $white !default;
 $custom-checkbox-indicator-border-radius: 2px !default;
 $custom-control-indicator-disabled-bg: $gray-100 !default;
-$custom-radio-indicator-icon-checked: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='4' fill='#2196f3'/></svg>") !default;
+$custom-radio-indicator-icon-checked: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='4' fill='#{$blue}'/></svg>") !default;
 $custom-select-border-radius:       0 !default;
 $custom-select-box-shadow:          none !default;
 

diff --git a/dist/materia/bootstrap.css b/dist/materia/bootstrap.css
@@ -6,7 +6,7 @@
  * Based on Bootstrap
 */
 /*!
- * Bootstrap v4.6.0 (https://getbootstrap.com/)
+ * Bootstrap v4.6.1 (https://getbootstrap.com/)
  * Copyright 2011-2021 The Bootstrap Authors
  * Copyright 2011-2021 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
@@ -2040,11 +2040,6 @@ pre code {
   border: 0;
 }
 
-.form-control:-moz-focusring {
-  color: transparent;
-  text-shadow: 0 0 0 #666;
-}
-
 .form-control:focus {
   color: #666;
   background-color: transparent;
@@ -2092,6 +2087,11 @@ input[type="month"].form-control {
   appearance: none;
 }
 
+select.form-control:-moz-focusring {
+  color: transparent;
+  text-shadow: 0 0 0 #666;
+}
+
 select.form-control:focus::-ms-value {
   color: #666;
   background-color: transparent;
@@ -2266,7 +2266,7 @@ textarea.form-control {
 
 .was-validated .form-control:valid, .form-control.is-valid {
   border-color: #4caf50;
-  padding-right: calc(1.5em + 2rem);
+  padding-right: calc(1.5em + 2rem) !important;
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%234caf50' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
   background-repeat: no-repeat;
   background-position: right calc(0.375em + 0.5rem) center;
@@ -2278,14 +2278,19 @@ textarea.form-control {
   box-shadow: 0 0 0 0.2rem rgba(76, 175, 80, 0.25);
 }
 
+.was-validated select.form-control:valid, select.form-control.is-valid {
+  padding-right: 0 !important;
+  background-position: right 0 center;
+}
+
 .was-validated textarea.form-control:valid, textarea.form-control.is-valid {
   padding-right: calc(1.5em + 2rem);
   background-position: top calc(0.375em + 0.5rem) right calc(0.375em + 0.5rem);
 }
 
 .was-validated .custom-select:valid, .custom-select.is-valid {
   border-color: #4caf50;
-  padding-right: calc(0.75em + 2.5rem);
+  padding-right: calc(0.75em + 2.5rem) !important;
   background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23222' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right 0 center/8px 10px no-repeat, transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%234caf50' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") center right 1rem/calc(0.75em + 1rem) calc(0.75em + 1rem) no-repeat;
 }
 
@@ -2372,7 +2377,7 @@ textarea.form-control {
 
 .was-validated .form-control:invalid, .form-control.is-invalid {
   border-color: #e51c23;
-  padding-right: calc(1.5em + 2rem);
+  padding-right: calc(1.5em + 2rem) !important;
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23e51c23' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23e51c23' stroke='none'/%3e%3c/svg%3e");
   background-repeat: no-repeat;
   background-position: right calc(0.375em + 0.5rem) center;
@@ -2384,14 +2389,19 @@ textarea.form-control {
   box-shadow: 0 0 0 0.2rem rgba(229, 28, 35, 0.25);
 }
 
+.was-validated select.form-control:invalid, select.form-control.is-invalid {
+  padding-right: 0 !important;
+  background-position: right 0 center;
+}
+
 .was-validated textarea.form-control:invalid, textarea.form-control.is-invalid {
   padding-right: calc(1.5em + 2rem);
   background-position: top calc(0.375em + 0.5rem) right calc(0.375em + 0.5rem);
 }
 
 .was-validated .custom-select:invalid, .custom-select.is-invalid {
   border-color: #e51c23;
-  padding-right: calc(0.75em + 2.5rem);
+  padding-right: calc(0.75em + 2.5rem) !important;
   background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23222' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right 0 center/8px 10px no-repeat, transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23e51c23' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23e51c23' stroke='none'/%3e%3c/svg%3e") center right 1rem/calc(0.75em + 1rem) calc(0.75em + 1rem) no-repeat;
 }
 
@@ -3675,20 +3685,27 @@ input[type="button"].btn-block {
 }
 
 .input-group > .custom-file:not(:last-child) .custom-file-label,
+.input-group > .custom-file:not(:last-child) .custom-file-label::after {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
 .input-group > .custom-file:not(:first-child) .custom-file-label {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
 
 .input-group:not(.has-validation) > .form-control:not(:last-child),
 .input-group:not(.has-validation) > .custom-select:not(:last-child),
+.input-group:not(.has-validation) > .custom-file:not(:last-child) .custom-file-label,
 .input-group:not(.has-validation) > .custom-file:not(:last-child) .custom-file-label::after {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
 
 .input-group.has-validation > .form-control:nth-last-child(n + 3),
 .input-group.has-validation > .custom-select:nth-last-child(n + 3),
+.input-group.has-validation > .custom-file:nth-last-child(n + 3) .custom-file-label,
 .input-group.has-validation > .custom-file:nth-last-child(n + 3) .custom-file-label::after {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
@@ -6612,8 +6629,11 @@ a.close.disabled {
   -ms-flex-pack: center;
   justify-content: center;
   width: 15%;
+  padding: 0;
   color: #fff;
   text-align: center;
+  background: none;
+  border: 0;
   opacity: 0.5;
   transition: opacity 0.15s ease;
 }
@@ -6734,7 +6754,7 @@ a.close.disabled {
   display: inline-block;
   width: 2rem;
   height: 2rem;
-  vertical-align: text-bottom;
+  vertical-align: -0.125em;
   border: 0.25em solid currentColor;
   border-right-color: transparent;
   border-radius: 50%;
@@ -6776,7 +6796,7 @@ a.close.disabled {
   display: inline-block;
   width: 2rem;
   height: 2rem;
-  vertical-align: text-bottom;
+  vertical-align: -0.125em;
   background-color: currentColor;
   border-radius: 50%;
   opacity: 0;
@@ -10345,9 +10365,6 @@ a.text-dark:hover, a.text-dark:focus {
     border: 1px solid #bbb;
     page-break-inside: avoid;
   }
-  thead {
-    display: table-header-group;
-  }
   tr,
   img {
     page-break-inside: avoid;
@@ -11343,7 +11360,7 @@ select.form-control {
   -moz-appearance: none;
   appearance: none;
   padding: .5rem 0;
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='4' viewBox='0 0 8 4'%3e%3cpolygon fill='%23666' points='8 0 4 4 0 0'/%3e%3c/svg%3e%0a");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 4'%3e%3cpolygon fill='%23666' points='8 0 4 4 0 0'/%3e%3c/svg%3e%0a");
   background-size: 8px 4px;
   background-repeat: no-repeat;
   background-position: right center;
@@ -11368,7 +11385,7 @@ select.form-control.input-lg {
 select:focus,
 select.form-control:focus {
   box-shadow: inset 0 -2px 0 #2196f3;
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='4' viewBox='0 0 8 4'%3e%3cpolygon fill='%23212121' points='8 0 4 4 0 0'/%3e%3c/svg%3e%0a");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 4'%3e%3cpolygon fill='%23212121' points='8 0 4 4 0 0'/%3e%3c/svg%3e%0a");
 }
 
 select[multiple],

diff --git a/dist/materia/bootstrap.min.css b/dist/materia/bootstrap.min.css
diff --git a/docs/4/materia/_bootswatch.scss b/docs/4/materia/_bootswatch.scss
@@ -293,7 +293,7 @@ select,
 select.form-control {
   appearance: none;
   padding: .5rem 0;
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='4' viewBox='0 0 8 4'%3e%3cpolygon fill='%23666' points='8 0 4 4 0 0'/%3e%3c/svg%3e%0a");
+  background-image: escape-svg(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 4'%3e%3cpolygon fill='#{$gray-600}' points='8 0 4 4 0 0'/%3e%3c/svg%3e%0a"));
   background-size: 8px 4px;
   background-repeat: no-repeat;
   background-position: right center;
@@ -315,7 +315,7 @@ select.form-control {
 
   &:focus {
     box-shadow: $input-focus-box-shadow;
-    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='4' viewBox='0 0 8 4'%3e%3cpolygon fill='%23212121' points='8 0 4 4 0 0'/%3e%3c/svg%3e%0a");
+    background-image: escape-svg(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 4'%3e%3cpolygon fill='#{$gray-900}' points='8 0 4 4 0 0'/%3e%3c/svg%3e%0a"));
   }
 
   &[multiple] {

diff --git a/docs/4/materia/_variables.scss b/docs/4/materia/_variables.scss
@@ -81,7 +81,7 @@ $custom-control-indicator-size:  1.25rem !default;
 $custom-control-indicator-bg:    $white !default;
 $custom-checkbox-indicator-border-radius: 2px !default;
 $custom-control-indicator-disabled-bg: $gray-100 !default;
-$custom-radio-indicator-icon-checked: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='4' fill='#2196f3'/></svg>") !default;
+$custom-radio-indicator-icon-checked: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='4' fill='#{$blue}'/></svg>") !default;
 $custom-select-border-radius:       0 !default;
 $custom-select-box-shadow:          none !default;