diff --git a/src/definitions/elements/input.less b/src/definitions/elements/input.less index 6408969f4..a3baf88b1 100755 --- a/src/definitions/elements/input.less +++ b/src/definitions/elements/input.less @@ -186,6 +186,31 @@ padding: 0em; } +/* Transparent Icon */ +.ui.transparent.icon.input > .icon { + width: @transparentIconWidth; +} +.ui.transparent.icon.input > input { + padding-left: 0em !important; + padding-right: @transparentIconMargin !important; +} +.ui.transparent[class*="left icon"].input > input { + padding-left: 0em !important; + padding-left: @transparentIconMargin !important; +} + +/* Transparent Inverted */ +.ui.transparent.inverted.input input::-moz-placeholder { + color: @transparentInvertedPlaceholderColor; +} +.ui.transparent.inverted.input { + color: @transparentInvertedColor; +} +.ui.transparent.inverted.input input { + color: inherit; +} + + /*-------------------- Icon ---------------------*/ @@ -242,19 +267,6 @@ padding-right: @horizontalPadding !important; } -/* Transparent Icon */ -.ui.transparent.icon.input > .icon { - width: @transparentIconWidth; -} -.ui.transparent.icon.input > input { - padding-left: 0em !important; - padding-right: @transparentIconMargin !important; -} -.ui.transparent[class*="left icon"].input > input { - padding-left: 0em !important; - padding-left: @transparentIconMargin !important; -} - /* Focus */ .ui.icon.input > input:focus ~ .icon { opacity: 1; @@ -400,10 +412,12 @@ Inverted ---------------------*/ +/* Standard */ .ui.inverted.input input { border: none; } + /*-------------------- Fluid ---------------------*/ @@ -412,7 +426,6 @@ display: block; } - /*-------------------- Size ---------------------*/ diff --git a/src/themes/default/elements/input.variables b/src/themes/default/elements/input.variables index 0f84ce1a2..cc33f3624 100644 --- a/src/themes/default/elements/input.variables +++ b/src/themes/default/elements/input.variables @@ -103,6 +103,11 @@ Variations --------------------*/ +/* Inverted */ +@transparentInvertedPlaceholderColor: @invertedUnselectedTextColor; +@transparentInvertedColor: @white; + + /* Sizing */ @mini: 0.8125rem; @small: 0.875rem;