fomantic-ui 2.9.0-beta.29 → 2.9.0-beta.290

package/src/definitions/modules/dropdown.less

@@ -128,7 +128,7 @@
   font-size: @itemFontSize;
   color: @itemColor;
 
-  padding: @itemPadding !important;
+  padding: @itemPadding;
   text-transform: @itemTextTransform;
   font-weight: @itemFontWeight;
   box-shadow: @itemBoxShadow;
@@ -191,7 +191,7 @@
   border-top: none;
 }
 
-.ui.dropdown.dropdown .menu > .input {
+.ui.ui.ui.dropdown .menu > .input {
   width: auto;
   display: flex;
   margin: @menuInputMargin;
@@ -259,7 +259,7 @@
 }
 
 /* Hide Arrow */
-.ui.dropdown .menu .menu:after {
+.ui.dropdown .menu .menu::after {
   display: none;
 }
 
@@ -329,8 +329,8 @@
 ---------------*/
 
 /* Remove Menu Item Divider */
-.ui.dropdown .ui.menu > .item:before,
-.ui.menu .ui.dropdown .menu > .item:before {
+.ui.dropdown .ui.menu > .item::before,
+.ui.menu .ui.dropdown .menu > .item::before {
   display: none;
 }
 
@@ -367,9 +367,15 @@
   .ui.dropdown.icon.button > .dropdown.icon {
     margin: 0;
   }
-  .ui.button.dropdown .menu {
+  .ui.dropdown.button .menu {
     min-width: 100%;
   }
+  .ui.dropdown.button:not(.pointing):not(.floating).active {
+    border-radius: @borderRadius @borderRadius 0 0;
+  }
+  .ui.dropdown.button:not(.pointing):not(.floating) > .menu {
+    border-radius: 0 0 @borderRadius @borderRadius;
+  }
 }
 
 
@@ -455,8 +461,8 @@ select.ui.dropdown {
     box-shadow: @selectionMenuBoxShadow;
     transition: @selectionMenuTransition;
   }
-  .ui.selection.dropdown .menu:after,
-  .ui.selection.dropdown .menu:before {
+  .ui.selection.dropdown .menu::after,
+  .ui.selection.dropdown .menu::before {
     display: none;
   }
 
@@ -556,7 +562,7 @@ select.ui.dropdown {
   /* Menu Item */
   .ui.selection.dropdown .menu > .item {
     border-top: @selectionItemDivider;
-    padding: @selectionItemPadding !important;
+    padding: @selectionItemPadding;
     white-space: normal;
     word-wrap: normal;
   }
@@ -573,10 +579,12 @@ select.ui.dropdown {
   }
 
   /* Active */
+  .ui.selection.simple.dropdown:hover,
   .ui.selection.active.dropdown {
     border-color: @selectionVisibleBorderColor;
     box-shadow: @selectionVisibleBoxShadow;
   }
+  .ui.selection.simple.dropdown:hover .menu,
   .ui.selection.active.dropdown .menu {
     border-color: @selectionVisibleBorderColor;
     box-shadow: @selectionVisibleMenuBoxShadow;
@@ -634,7 +642,7 @@ select.ui.dropdown {
     /* CSS specific to iOS devices or firefox mobile only  */
     @supports (-webkit-touch-callout: none) or (-webkit-overflow-scrolling: touch) or (-moz-appearance:none) {
       @media (-moz-touch-enabled), (pointer: coarse) {
-        .ui.dropdown .scrollhint.menu:not(.hidden):before {
+        .ui.dropdown .scrollhint.menu:not(.hidden)::before {
           animation: scrollhint @scrollhintDuration @scrollhintEasing @scrollhintIteration;
           content: '';
           z-index: @scrollhintZIndex;
@@ -649,7 +657,7 @@ select.ui.dropdown {
           border-image: linear-gradient(to bottom, @scrollhintStartColor, @scrollhintEndColor) 1 100%;
         }
 
-        .ui.inverted.dropdown .scrollhint.menu:not(.hidden):before {
+        .ui.inverted.dropdown .scrollhint.menu:not(.hidden)::before {
           border-image: linear-gradient(to bottom, @invertedScrollhintStartColor, @invertedScrollhintEndColor) 1 100%;
         }
 
@@ -785,11 +793,15 @@ select.ui.dropdown {
     opacity: @clearableIconOpacity;
     z-index: @selectionIconZIndex;
   }
-  .ui.selection.dropdown > .remove.icon {
-    right: @clearableIconSelectionPosition;
+  & when (@variationDropdownSelection) {
+    .ui.selection.dropdown > .remove.icon {
+      right: @clearableIconSelectionPosition;
+    }
   }
-  .ui.inline.dropdown > .remove.icon {
-    right: @clearableIconInlinePosition;
+  & when (@variationDropdownInline) {
+    .ui.inline.dropdown > .remove.icon {
+      right: @clearableIconInlinePosition;
+    }
   }
 
   .ui.clearable.dropdown .text,
@@ -993,7 +1005,7 @@ select.ui.dropdown {
   .ui.loading.selection.dropdown > i.icon {
     padding: @relative21px @relative18px !important;
   }
-  .ui.loading.dropdown > i.icon:before {
+  .ui.loading.dropdown > i.icon::before {
     position: absolute;
     content: '';
     top: 50%;
@@ -1006,7 +1018,7 @@ select.ui.dropdown {
     border-radius: @circularRadius;
     border: @loaderLineWidth solid @loaderFillColor;
   }
-  .ui.loading.dropdown > i.icon:after {
+  .ui.loading.dropdown > i.icon::after {
     position: absolute;
     content: '';
     top: 50%;
@@ -1024,8 +1036,8 @@ select.ui.dropdown {
   }
 
   /* Coupling */
-  .ui.loading.dropdown.button > i.icon:before,
-  .ui.loading.dropdown.button > i.icon:after {
+  .ui.loading.dropdown.button > i.icon::before,
+  .ui.loading.dropdown.button > i.icon::after {
     display: none;
   }
 
@@ -1073,12 +1085,12 @@ select.ui.dropdown {
   display: none !important;
 }
 
-& when (@variationDropdownStates) {
+& when not (@variationDropdownStates = false) {
   /*--------------------
           States
   ----------------------*/
-  each(@formStates, {
-    @state: replace(@key, '@', '');
+  each(@variationDropdownStates, {
+    @state: @value;
     @c: @formStates[@@state][dropdownLabelColor];
     @bdc: @formStates[@@state][borderColor];
 
@@ -1198,24 +1210,24 @@ select.ui.dropdown {
     margin: @leftSubMenuMargin !important;
     border-radius: @leftSubMenuBorderRadius !important;
   }
-}
 
-.ui.dropdown .item .left.dropdown.icon,
-.ui.dropdown .left.menu .item .dropdown.icon {
-  width: auto;
-  float: @leftMenuDropdownIconFloat;
-  margin: @leftMenuDropdownIconMargin;
-}
-.ui.dropdown .item .left.dropdown.icon,
-.ui.dropdown .left.menu .item .dropdown.icon {
-  width: auto;
-  float: @leftMenuDropdownIconFloat;
-  margin: @leftMenuDropdownIconMargin;
-}
-.ui.dropdown .item .left.dropdown.icon + .text,
-.ui.dropdown .left.menu .item .dropdown.icon + .text {
-  margin-left: @itemDropdownIconDistance;
-  margin-right: 0;
+  .ui.dropdown .item .left.dropdown.icon,
+  .ui.dropdown .left.menu .item .dropdown.icon {
+    width: auto;
+    float: @leftMenuDropdownIconFloat;
+    margin: @leftMenuDropdownIconMargin;
+  }
+  .ui.dropdown .item .left.dropdown.icon,
+  .ui.dropdown .left.menu .item .dropdown.icon {
+    width: auto;
+    float: @leftMenuDropdownIconFloat;
+    margin: @leftMenuDropdownIconMargin;
+  }
+  .ui.dropdown .item .left.dropdown.icon + .text,
+  .ui.dropdown .left.menu .item .dropdown.icon + .text {
+    margin-left: @itemDropdownIconDistance;
+    margin-right: 0;
+  }
 }
 
 & when (@variationDropdownUpward) {
@@ -1228,7 +1240,6 @@ select.ui.dropdown {
     top: auto;
     bottom: 100%;
     box-shadow: @upwardMenuBoxShadow;
-    border-radius: @upwardMenuBorderRadius;
   }
 
   /* Upward Sub Menu */
@@ -1237,42 +1248,54 @@ select.ui.dropdown {
     bottom: 0 !important;
   }
 
-  /* Active Upward */
-  .ui.simple.upward.active.dropdown,
-  .ui.simple.upward.dropdown:hover {
-    border-radius: @borderRadius @borderRadius 0 0 !important;
-  }
-  .ui.upward.dropdown.button:not(.pointing):not(.floating).active {
-    border-radius: @borderRadius @borderRadius 0 0;
+  & when (@variationDropdownSimple) {
+    /* Active Upward */
+    .ui.simple.upward.active.dropdown,
+    .ui.simple.upward.dropdown:hover {
+      border-radius: 0 0 @borderRadius @borderRadius;
+    }
   }
 
-  /* Selection */
-  .ui.upward.selection.dropdown .menu {
-    border-top-width: @menuBorderWidth !important;
-    border-bottom-width: 0 !important;
-    box-shadow: @upwardSelectionMenuBoxShadow;
-  }
-  .ui.upward.selection.dropdown:hover {
-    box-shadow: @upwardSelectionHoverBoxShadow;
+  & when (@variationDropdownButton) {
+    /* Button */
+    .ui.upward.dropdown.button:not(.pointing):not(.floating).active {
+      border-radius: 0 0 @borderRadius @borderRadius;
+    }
+    .ui.upward.dropdown.button:not(.pointing):not(.floating) > .menu {
+      border-radius: @borderRadius @borderRadius 0 0;
+    }
   }
 
-  /* Active Upward */
-  .ui.active.upward.selection.dropdown {
-    border-radius: @upwardSelectionVisibleBorderRadius !important;
-  }
+  & when (@variationDropdownSelection) {
+    /* Selection */
+    .ui.ui.upward.selection.dropdown .menu {
+      border-top-width: @menuBorderWidth !important;
+      border-bottom-width: 0 !important;
+      box-shadow: @upwardSelectionMenuBoxShadow;
+      border-radius: @upwardSelectionMenuBorderRadius;
+    }
+    .ui.upward.selection.dropdown:hover {
+      box-shadow: @upwardSelectionHoverBoxShadow;
+    }
 
-  /* Visible Upward */
-  .ui.upward.selection.dropdown.visible {
-    box-shadow: @upwardSelectionVisibleBoxShadow;
-    border-radius: @upwardSelectionVisibleBorderRadius !important;
-  }
+    /* Active Upward */
+    .ui.active.upward.selection.dropdown {
+      border-radius: @upwardSelectionVisibleBorderRadius !important;
+    }
 
-  /* Visible Hover Upward */
-  .ui.upward.active.selection.dropdown:hover {
-    box-shadow: @upwardSelectionActiveHoverBoxShadow;
-  }
-  .ui.upward.active.selection.dropdown:hover .menu {
-    box-shadow: @upwardSelectionActiveHoverMenuBoxShadow;
+    /* Visible Upward */
+    .ui.upward.selection.dropdown.visible {
+      box-shadow: @upwardSelectionVisibleBoxShadow;
+      border-radius: @upwardSelectionVisibleBorderRadius !important;
+    }
+
+    /* Visible Hover Upward */
+    .ui.upward.active.selection.dropdown:hover {
+      box-shadow: @upwardSelectionActiveHoverBoxShadow;
+    }
+    .ui.upward.active.selection.dropdown:hover .menu {
+      box-shadow: @upwardSelectionActiveHoverMenuBoxShadow;
+    }
   }
 }
 
@@ -1378,23 +1401,25 @@ select.ui.dropdown {
   }
 }
 
-/*--------------
-     Columnar
----------------*/
-.ui.column.dropdown > .menu {
-  flex-wrap:wrap;
-}
-.ui.dropdown[class*="two column"] > .menu > .item {
-  width: 50%;
-}
-.ui.dropdown[class*="three column"] > .menu > .item {
-  width: 33%;
-}
-.ui.dropdown[class*="four column"] > .menu > .item {
-  width: 25%;
-}
-.ui.dropdown[class*="five column"] > .menu > .item {
-  width: 20%;
+& when (@variationDropdownColumnar) {
+  /*--------------
+       Columnar
+  ---------------*/
+  .ui.column.dropdown > .menu {
+    flex-wrap: wrap;
+  }
+  .ui.dropdown[class*="two column"] > .menu > .item {
+    width: 50%;
+  }
+  .ui.dropdown[class*="three column"] > .menu > .item {
+    width: 33%;
+  }
+  .ui.dropdown[class*="four column"] > .menu > .item {
+    width: 25%;
+  }
+  .ui.dropdown[class*="five column"] > .menu > .item {
+    width: 20%;
+  }
 }
 
 & when (@variationDropdownSimple) {
@@ -1404,8 +1429,8 @@ select.ui.dropdown {
 
   /* Displays without javascript */
 
-  .ui.simple.dropdown .menu:before,
-  .ui.simple.dropdown .menu:after {
+  .ui.simple.dropdown .menu::before,
+  .ui.simple.dropdown .menu::after {
     display: none;
   }
   .ui.simple.dropdown .menu {
@@ -1421,16 +1446,27 @@ select.ui.dropdown {
     transition: @simpleTransition;
     margin-top: 0 !important;
   }
+  & when (@variationDropdownUpward) {
+    .ui.simple.dropdown .upward.menu {
+      margin-bottom: @simpleUpwardMenuMargin;
+    }
+    .ui.simple.selection.dropdown .upward.menu {
+      margin-bottom: @simpleUpwardSelectionMenuMargin;
+    }
+    .ui.menu:not(.vertical) .ui.simple.dropdown.item .upward.menu {
+      margin-bottom: @simpleUpwardItemMenuMargin;
+    }
+  }
 
   .ui.simple.active.dropdown,
   .ui.simple.dropdown:hover {
-    border-bottom-left-radius: 0 !important;
-    border-bottom-right-radius: 0 !important;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
   }
 
   .ui.simple.active.dropdown > .menu,
   .ui.simple.dropdown:hover > .menu {
-    overflow: visible;
+    overflow: auto;
     width: auto;
     height: auto;
     top: 100%;
@@ -1438,7 +1474,7 @@ select.ui.dropdown {
   }
   .ui.simple.dropdown > .menu > .item:active > .menu,
   .ui.simple.dropdown .menu .item:hover > .menu {
-    overflow: visible;
+    overflow: auto;
     width: auto;
     height: auto;
     top: 0 !important;
@@ -1446,8 +1482,8 @@ select.ui.dropdown {
     opacity: 1;
   }
   .ui.simple.dropdown > .menu > .item:active > .left.menu,
-  .ui.simple.dropdown .menu .item:hover > .left.menu, 
-  .right.menu .ui.simple.dropdown > .menu > .item:active > .menu:not(.right), 
+  .ui.simple.dropdown .menu .item:hover > .left.menu,
+  .right.menu .ui.simple.dropdown > .menu > .item:active > .menu:not(.right),
   .right.menu .ui.simple.dropdown > .menu .item:hover > .menu:not(.right) {
     left: auto;
     right: 100%;
@@ -1495,7 +1531,7 @@ select.ui.dropdown {
       Floating
   ---------------*/
 
-  .ui.floating.dropdown .menu {
+  .ui.floating.dropdown > .menu {
     left: 0;
     right: auto;
     box-shadow: @floatingMenuBoxShadow !important;
@@ -1523,7 +1559,7 @@ select.ui.dropdown {
     border-radius: @pointingMenuBorderRadius;
   }
 
-  .ui.pointing.dropdown > .menu:not(.hidden):after {
+  .ui.pointing.dropdown > .menu:not(.hidden)::after {
     display: block;
     position: absolute;
     pointer-events: none;
@@ -1538,7 +1574,7 @@ select.ui.dropdown {
     z-index: @pointingArrowZIndex;
   }
 
-  .ui.pointing.dropdown > .menu:not(.hidden):after {
+  .ui.pointing.dropdown > .menu:not(.hidden)::after {
     top: @pointingArrowOffset;
     left: 50%;
     margin: 0 0 0 @pointingArrowOffset;
@@ -1559,7 +1595,7 @@ select.ui.dropdown {
     right: auto;
     margin: @pointingArrowDistanceFromEdge 0 0;
   }
-  .ui.top.left.pointing.dropdown > .menu:after {
+  .ui.top.left.pointing.dropdown > .menu::after {
     top: @pointingArrowOffset;
     left: @pointingArrowDistanceFromEdge;
     right: auto;
@@ -1574,8 +1610,8 @@ select.ui.dropdown {
     left: auto;
     margin: @pointingArrowDistanceFromEdge 0 0;
   }
-  .ui.top.pointing.dropdown > .left.menu:after,
-  .ui.top.right.pointing.dropdown > .menu:after {
+  .ui.top.pointing.dropdown > .left.menu::after,
+  .ui.top.right.pointing.dropdown > .menu::after {
     top: @pointingArrowOffset;
     left: auto !important;
     right: @pointingArrowDistanceFromEdge !important;
@@ -1590,7 +1626,7 @@ select.ui.dropdown {
     right: auto;
     margin: 0 0 0 @pointingArrowDistanceFromEdge;
   }
-  .ui.left.pointing.dropdown > .menu:after {
+  .ui.left.pointing.dropdown > .menu::after {
     top: 1em;
     left: @pointingArrowOffset;
     margin: 0 0 0 0;
@@ -1601,7 +1637,7 @@ select.ui.dropdown {
     right: 100% !important;
     margin: 0 @pointingArrowDistanceFromEdge 0 0;
   }
-  .ui.left:not(.top):not(.bottom).pointing.dropdown > .left.menu:after {
+  .ui.left:not(.top):not(.bottom).pointing.dropdown > .left.menu::after {
     top: 1em;
     left: auto;
     right: @pointingArrowOffset;
@@ -1617,7 +1653,7 @@ select.ui.dropdown {
     right: 100%;
     margin: 0 @pointingArrowDistanceFromEdge 0 0;
   }
-  .ui.right.pointing.dropdown > .menu:after {
+  .ui.right.pointing.dropdown > .menu::after {
     top: 1em;
     left: auto;
     right: @pointingArrowOffset;
@@ -1633,7 +1669,7 @@ select.ui.dropdown {
     right: auto;
     margin: 0 0 @pointingArrowDistanceFromEdge ;
   }
-  .ui.bottom.pointing.dropdown > .menu:after {
+  .ui.bottom.pointing.dropdown > .menu::after {
     top: auto;
     bottom: @pointingArrowOffset;
     right: auto;
@@ -1651,7 +1687,7 @@ select.ui.dropdown {
     left: 0;
     right: auto;
   }
-  .ui.bottom.left.pointing.dropdown > .menu:after {
+  .ui.bottom.left.pointing.dropdown > .menu::after {
     left: @pointingArrowDistanceFromEdge;
     right: auto;
   }
@@ -1661,7 +1697,7 @@ select.ui.dropdown {
     right: 0;
     left: auto;
   }
-  .ui.bottom.right.pointing.dropdown > .menu:after {
+  .ui.bottom.right.pointing.dropdown > .menu::after {
     left: auto;
     right: @pointingArrowDistanceFromEdge;
   }
@@ -1674,8 +1710,8 @@ select.ui.dropdown {
     margin: 0 0 @pointingMenuDistance;
     border-radius: @pointingUpwardMenuBorderRadius;
   }
-  .ui.pointing.upward.dropdown .menu:after,
-  .ui.top.pointing.upward.dropdown .menu:after {
+  .ui.pointing.upward.dropdown .menu::after,
+  .ui.top.pointing.upward.dropdown .menu::after {
     top: 100% !important;
     bottom: auto !important;
     box-shadow: @pointingUpwardArrowBoxShadow;
@@ -1688,7 +1724,7 @@ select.ui.dropdown {
     bottom: 0 !important;
     margin: 0 @pointingArrowDistanceFromEdge 0 0;
   }
-  .ui.right.pointing.upward.dropdown:not(.top):not(.bottom) .menu:after {
+  .ui.right.pointing.upward.dropdown:not(.top):not(.bottom) .menu::after {
     top: auto !important;
     bottom: 0 !important;
     margin: 0 0 @pointingArrowDistanceFromEdge 0;
@@ -1702,7 +1738,7 @@ select.ui.dropdown {
     bottom: 0 !important;
     margin: 0 0 0 @pointingArrowDistanceFromEdge;
   }
-  .ui.left.pointing.upward.dropdown:not(.top):not(.bottom) .menu:after {
+  .ui.left.pointing.upward.dropdown:not(.top):not(.bottom) .menu::after {
     top: auto !important;
     bottom: 0 !important;
     margin: 0 0 @pointingArrowDistanceFromEdge 0;
@@ -1809,6 +1845,8 @@ select.ui.dropdown {
       color: @invertedSelectionVisibleTextColor;
     }
 
+    .ui.selection.simple.dropdown:hover .inverted.menu,
+    .ui.inverted.selection.simple.dropdown:hover .menu,
     .ui.selection.active.dropdown .inverted.menu,
     .ui.inverted.selection.active.dropdown .menu,
     .ui.inverted.selection.active.dropdown:hover {
@@ -1895,25 +1933,38 @@ select.ui.dropdown {
   }
 
   /* Scrollbars */
-  .ui.dropdown .inverted.menu::-webkit-scrollbar-track,
-  .ui.inverted.dropdown .menu::-webkit-scrollbar-track {
-    background: @trackInvertedBackground;
-  }
-  .ui.dropdown .inverted.menu::-webkit-scrollbar-thumb,
-  .ui.inverted.dropdown .menu::-webkit-scrollbar-thumb {
-    background: @thumbInvertedBackground;
-  }
-  .ui.dropdown .inverted.menu::-webkit-scrollbar-thumb:window-inactive,
-  .ui.inverted.dropdown .menu::-webkit-scrollbar-thumb:window-inactive {
-    background: @thumbInvertedInactiveBackground;
-  }
-  .ui.dropdown .inverted.menu::-webkit-scrollbar-thumb:hover,
-  .ui.inverted.dropdown .menu::-webkit-scrollbar-thumb:hover {
-    background: @thumbInvertedHoverBackground;
+  & when (@useCustomScrollbars) {
+    .ui.dropdown .inverted.menu::-webkit-scrollbar-track,
+    .ui.inverted.dropdown .menu::-webkit-scrollbar-track {
+      background: @trackInvertedBackground;
+    }
+    .ui.dropdown .inverted.menu::-webkit-scrollbar-thumb,
+    .ui.inverted.dropdown .menu::-webkit-scrollbar-thumb {
+      background: @thumbInvertedBackground;
+    }
+    .ui.dropdown .inverted.menu::-webkit-scrollbar-thumb:window-inactive,
+    .ui.inverted.dropdown .menu::-webkit-scrollbar-thumb:window-inactive {
+      background: @thumbInvertedInactiveBackground;
+    }
+    .ui.dropdown .inverted.menu::-webkit-scrollbar-thumb:hover,
+    .ui.inverted.dropdown .menu::-webkit-scrollbar-thumb:hover {
+      background: @thumbInvertedHoverBackground;
+    }
+    .ui.dropdown .inverted.menu,
+    .ui.inverted.dropdown .menu {
+      /* IE11 */
+      scrollbar-face-color: @thumbInvertedBackgroundHex;
+      scrollbar-shadow-color: @thumbInvertedBackgroundHex;
+      scrollbar-track-color: @trackInvertedBackgroundHex;
+      scrollbar-arrow-color: @trackInvertedBackgroundHex;
+
+      /* firefox : first color thumb, second track */
+      scrollbar-color:  @thumbInvertedBackground @trackInvertedBackground;
+    }
   }
   & when (@variationDropdownPointing) {
-    .ui.pointing.dropdown > .inverted.menu:after,
-    .ui.inverted.pointing.dropdown > .menu:after {
+    .ui.pointing.dropdown > .inverted.menu::after,
+    .ui.inverted.pointing.dropdown > .menu::after {
       background: @invertedPointingArrowBackground;
       box-shadow: @invertedPointingArrowBoxShadow;
     }

package/src/definitions/modules/embed.less

@@ -85,7 +85,7 @@
   height: 100%;
   z-index: 2;
 }
-.ui.embed > i.icon:after {
+.ui.embed > i.icon::after {
   position: absolute;
   top: 0;
   left: 0;
@@ -97,7 +97,7 @@
   opacity: @placeholderBackgroundOpacity;
   transition: @placeholderBackgroundTransition;
 }
-.ui.embed > i.icon:before {
+.ui.embed > i.icon::before {
   position: absolute;
   top: 50%;
   left: 50%;
@@ -118,11 +118,11 @@
      Hover
 ---------------*/
 
-.ui.embed i.icon:hover:after {
+.ui.embed i.icon:hover::after {
   background: @hoverPlaceholderBackground;
   opacity: @hoverPlaceholderBackgroundOpacity;
 }
-.ui.embed i.icon:hover:before {
+.ui.embed i.icon:hover::before {
   color: @hoverIconColor;
 }