Restyle code element, remove docs example overflow, improve docs examples (#25054)

* Restyle code element, clean up variables

- Removes the padding and background-color
- Changes the color to a brand color ()
- Add new variables to kbd element styles to account for removing the code ones
- Remove overrides that were needed previously

* only break between words, and override it in the pre

* make file inputs 100% wide

* scope custom file changes in input group for sizing

* shorter button labels for responsive

* narrower cards

* button was too wide

* downsize

* fewer links in pagination

* redo cell text

* improve overflow docs

scss/_code.scss

@@ -8,24 +8,20 @@ samp {
 
 // Inline code
 code {
-  padding: $code-padding-y $code-padding-x;
   font-size: $code-font-size;
   color: $code-color;
-  background-color: $code-bg;
-  @include border-radius($border-radius);
+  word-break: break-word;
 
   // Streamline the style when inside anchors to avoid broken underline and more
   a > & {
-    padding: 0;
     color: inherit;
-    background-color: inherit;
   }
 }
 
 // User input typically entered via keyboard
 kbd {
-  padding: $code-padding-y $code-padding-x;
-  font-size: $code-font-size;
+  padding: $kbd-padding-y $kbd-padding-x;
+  font-size: $kbd-font-size;
   color: $kbd-color;
   background-color: $kbd-bg;
   @include border-radius($border-radius-sm);
@@ -47,11 +43,9 @@ pre {
 
   // Account for some code outputs that place code tags in pre tags
   code {
-    padding: 0;
     font-size: inherit;
     color: inherit;
-    background-color: transparent;
-    @include border-radius(0);
+    word-break: normal;
   }
 }
 

scss/_forms.scss

@@ -76,6 +76,7 @@ select.form-control {
 .form-control-file,
 .form-control-range {
   display: block;
+  width: 100%;
 }
 
 

scss/_input-group.scss

@@ -41,6 +41,15 @@
   // Custom file inputs have more complex markup, thus requiring different
   // border-radius overrides.
   .custom-file {
+    display: flex;
+    align-items: center;
+    width: 100%;
+
+    .custom-file-input {
+      width: 100%;
+      min-width: 0;
+    }
+
     &:not(:first-child):not(:last-of-type) .custom-file-control,
     &:not(:first-child):not(:last-of-type) .custom-file-control::before { @include border-radius(0); }
     &:first-child .custom-file-control,
@@ -48,6 +57,10 @@
     &:last-of-type:not(:first-child) .custom-file-control,
     &:last-of-type:not(:first-child) .custom-file-control::before { @include border-left-radius(0); }
   }
+
+  .custom-select {
+    width: 100%;
+  }
 }
 
 

scss/_variables.scss

@@ -865,12 +865,12 @@ $close-text-shadow:                 0 1px 0 $white !default;
 
 // Code
 
-$code-font-size:                    90% !default;
-$code-padding-y:                    .2rem !default;
-$code-padding-x:                    .4rem !default;
-$code-color:                        #bd4147 !default;
-$code-bg:                           $gray-100 !default;
+$code-font-size:                    87.5% !default;
+$code-color:                        $pink !default;
 
+$kbd-padding-y:                     .2rem !default;
+$kbd-padding-x:                     .4rem !default;
+$kbd-font-size:                     $code-font-size !default;
 $kbd-color:                         $white !default;
 $kbd-bg:                            $gray-900 !default;