css fixes, dropdown fixes

scss/ui/_breadcrumbs.scss

@@ -15,7 +15,7 @@
 
 @each $name, $symbol in $breadcrumb-variants {
   .breadcrumb-#{$name} {
-    .breadcrumb-item + .breadcrumb-item::before {
+    .breadcrumb-item + .breadcrumb-item:before {
       content: $symbol;
     }
   }

scss/ui/_calendars.scss

@@ -74,7 +74,7 @@
 .calendar-range {
   position: relative;
 
-  &::before {
+  &:before {
     position: absolute;
     top: 50%;
     right: 0;
@@ -94,11 +94,11 @@
     }
   }
 
-  &.range-start::before {
+  &.range-start:before {
     left: 50%;
   }
 
-  &.range-end::before {
+  &.range-end:before {
     right: 50%;
   }
 }

scss/ui/_cards.scss

@@ -53,7 +53,7 @@
   position: relative;
   background-color: rgba($primary, .03);
 
-  &::before {
+  &:before {
     position: absolute;
     top: -1px;
     right: -1px;
@@ -90,7 +90,7 @@
 .card-stacked {
   position: relative;
 
-  &::after {
+  &:after {
     position: absolute;
     top: -5px;
     right: 5px;
@@ -108,7 +108,7 @@
   padding: $card-spacer-y $card-spacer-x;
   background: #666666 no-repeat center/cover;
 
-  &::before {
+  &:before {
     position: absolute;
     top: 0;
     right: 0;
@@ -119,13 +119,13 @@
   }
 
   &:first-child,
-  &:first-child::before {
+  &:first-child:before {
     border-radius: $border-radius $border-radius 0 0;
   }
 }
 
 .card-cover-blurred {
-  &::before {
+  &:before {
     backdrop-filter: blur(2px);
   }
 }

scss/ui/_dropdowns.scss

@@ -46,7 +46,7 @@
 .dropdown-menu-arrow {
   margin-top: .75rem;
 
-  &::before {
+  &:before {
     content: "";
     position: absolute;
     top: -4px;
@@ -64,7 +64,7 @@
   }
 
   &.dropdown-menu-right {
-    &::before {
+    &:before {
       right: 12px;
       left: auto;
     }
@@ -76,4 +76,10 @@
     margin-top: subtract(-$dropdown-padding-y, 1px);
     margin-left: 0;
   }
+
+  .dropdown-toggle {
+    &:after {
+      margin-left: auto;
+    }
+  }
 }

scss/ui/_forms.scss

@@ -85,7 +85,7 @@ Form control
   color: $red;
 }
 
-.custom-control-label::before {
+.custom-control-label:before {
   background: transparent;
   border: 1px solid $border-color;
 }

scss/ui/_highlight.scss

@@ -201,14 +201,14 @@
     color: #999;
   }
 
-  .language-bash::before,
-  .language-sh::before {
+  .language-bash:before,
+  .language-sh:before {
     color: #009;
     content: "$ ";
     user-select: none;
   }
 
-  .language-powershell::before {
+  .language-powershell:before {
     color: #009;
     content: "PM> ";
     user-select: none;

scss/ui/_lists.scss

@@ -103,7 +103,7 @@
 
 @media screen and (min-width: 768px) {
   .list-timeline:not(.list-timeline-simple) {
-    &::before {
+    &:before {
       position: absolute;
       top: 0;
       bottom: 0;

scss/ui/_loaders.scss

@@ -16,7 +16,7 @@
   color: $blue;
   vertical-align: middle;
 
-  &::after {
+  &:after {
     position: absolute;
     top: 0;
     left: 0;

scss/ui/_progress.scss

@@ -44,8 +44,8 @@
 }
 
 .progress-bar-indeterminate {
-  &::after,
-  &::before {
+  &:after,
+  &:before {
     position: absolute;
     top: 0;
     bottom: 0;
@@ -55,7 +55,7 @@
     will-change: left, right;
   }
 
-  &::before {
+  &:before {
     animation: progress-indeterminate 2.1s cubic-bezier(.65, .815, .735, .395) infinite;
   }
 }

scss/ui/_ribbons.scss

@@ -15,7 +15,7 @@
   background: $primary;
   border-color: $primary;
 
-  &::before {
+  &:before {
     position: absolute;
     right: 0;
     bottom: 100%;
@@ -53,7 +53,7 @@
   width: 2rem;
   padding: .25rem 0;
 
-  &::before {
+  &:before {
     top: 0;
     right: 100%;
     bottom: auto;
@@ -66,7 +66,7 @@
     right: auto;
     left: .75rem;
 
-    &::before {
+    &:before {
       top: 0;
       right: 100%;
       left: auto;
@@ -78,7 +78,7 @@
   right: auto;
   left: -($ribbon-margin);
 
-  &::before {
+  &:before {
     top: auto;
     bottom: 100%;
     left: 0;
@@ -96,7 +96,7 @@
 .ribbon-bookmark {
   padding-left: .25rem;
 
-  &::after {
+  &:after {
     position: absolute;
     top: 0;
     right: 100%;
@@ -115,7 +115,7 @@
     padding-right: .5rem;
     padding-left: .5rem;
 
-    &::after {
+    &:after {
       right: auto;
       left: 100%;
       border-right-color: transparent;
@@ -130,7 +130,7 @@
     padding-bottom: .25rem;
     padding-left: 0;
 
-    &::after {
+    &:after {
       top: 100%;
       right: 0;
       left: 0;

scss/ui/_steps.scss

@@ -4,12 +4,12 @@
   .step-item {
     padding-top: add($dot-size, 4px);
 
-    &::after {
+    &:after {
       top: add($dot-size / 2, 2px);
       height: $border-width;
     }
 
-    &::before {
+    &:before {
       width: $dot-size;
       height: $dot-size;
     }
@@ -18,13 +18,13 @@
 
 @mixin step-color($color) {
   .step-item {
-    &::after,
-    &::before {
+    &:after,
+    &:before {
       color: $white;
       background: $color;
     }
 
-    &.active::before {
+    &.active:before {
       color: inherit;
       border-color: $color;
     }
@@ -65,7 +65,7 @@
     }
   }
 
-  &:not(:first-child)::after {
+  &:not(:first-child):after {
     position: absolute;
     left: -50%;
     width: 100%;
@@ -73,7 +73,7 @@
     transform: translateY(-50%);
   }
 
-  &::before {
+  &:before {
     position: absolute;
     top: 0;
     left: 50%;
@@ -89,19 +89,19 @@
   &.active {
     font-weight: $font-weight-bold;
 
-    &::before {
+    &:before {
       background: #fff;
     }
 
     & ~ .step-item {
       color: $text-muted;
 
-      &::after,
-      &::before {
+      &:after,
+      &:before {
         background: $steps-color-inactive;
       }
 
-      &::before {
+      &:before {
         color: $text-muted !important;
       }
     }
@@ -115,14 +115,14 @@
   .step-item {
     counter-increment: steps;
 
-    &::before {
+    &:before {
       font-size: 1rem;
       line-height: 1.5rem;
       content: counter(steps);
     }
 
     &.active ~ .step-item {
-      &::before {
+      &:before {
         background: #fff;
       }
     }

scss/ui/_typo.scss

@@ -45,7 +45,7 @@ blockquote {
     display: block;
     text-align: right;
 
-    &::before {
+    &:before {
       content: "— ";
     }
   }

scss/ui/forms/_form-imagecheck.scss

@@ -30,7 +30,7 @@ Image check
     border-color: $border-color;
   }
 
-  &::before {
+  &:before {
     position: absolute;
     top: .25rem;
     left: .25rem;

scss/ui/typo/_hr.scss

@@ -16,19 +16,19 @@ Hr text
   @include subheader;
   line-height: 1rem;
 
-  &::after,
-  &::before {
+  &:after,
+  &:before {
     flex: 1 1 auto;
     height: $hr-height;
     background-color: currentColor;
     opacity: $hr-opacity;
   }
 
-  &::before {
+  &:before {
     margin-right: .5rem;
   }
 
-  &::after {
+  &:after {
     content: "";
     margin-left: .5rem;
   }
@@ -40,7 +40,7 @@ Hr text
   }
 
   &.hr-text-center {
-    &::before {
+    &:before {
       content: "";
     }
 
@@ -51,11 +51,11 @@ Hr text
   }
 
   &.hr-text-right {
-    &::before {
+    &:before {
       content: "";
     }
 
-    &::after {
+    &:after {
       content: none;
     }