diff --git a/src/definitions/elements/input.less b/src/definitions/elements/input.less index 6496e31be..2b8ca6cee 100755 --- a/src/definitions/elements/input.less +++ b/src/definitions/elements/input.less @@ -85,17 +85,45 @@ } /*-------------------- - Loading + Loading ---------------------*/ -.ui.loading.input > .icon { - background: url(@loadingImage) no-repeat 50% 50%; +.ui.loading.loading.input > .icon:before { + position: absolute; + content: ''; + top: 50%; + left: 50%; + + margin: @loaderMargin; + width: @loaderSize; + height: @loaderSize; + + border-radius: @circularRadius; + border: @loaderLineWidth solid @loaderFillColor; } -.ui.loading.input > .icon:before, -.ui.loading.input > .icon:after { - display: none; +.ui.loading.loading.input > .icon:after { + position: absolute; + content: ''; + top: 50%; + left: 50%; + + margin: @loaderMargin; + width: @loaderSize; + height: @loaderSize; + + animation: button-spin @loaderSpeed linear; + animation-iteration-count: infinite; + + border-radius: @circularRadius; + + border-color: @loaderLineColor transparent transparent; + border-style: solid; + border-width: @loaderLineWidth; + + box-shadow: 0px 0px 0px 1px transparent; } + /*-------------------- Focus ---------------------*/ @@ -236,7 +264,6 @@ Labeled ---------------------*/ - /* Adjacent Label */ .ui.labeled.input { display: table; @@ -369,6 +396,14 @@ border-bottom-left-radius: 0px; } +/*-------------------- + Inverted +---------------------*/ + +.ui.inverted.input input { + border: none; +} + /*-------------------- Fluid ---------------------*/ diff --git a/src/themes/default/elements/input.variables b/src/themes/default/elements/input.variables index 840165ddb..bdb8553f2 100644 --- a/src/themes/default/elements/input.variables +++ b/src/themes/default/elements/input.variables @@ -88,13 +88,16 @@ @focusBoxShadow: none; /* Error */ -@errorBackground: #FFFAFA; -@errorBorder: #E7BEBE; -@errorColor: #D95C5C; +@errorBackground: @negativeBackgroundColor; +@errorBorder: @negativeBorderColor; +@errorColor: @negativeColor; @errorBoxShadow: none; -/* Loading */ -@loadingImage: "@{imagePath}/loader-mini.gif"; +/* Loader */ +@loaderSize: 1.2857em; +@loaderOffset: -(@loaderSize / 2); +@loaderMargin: @loaderOffset 0em 0em @loaderOffset; +@invertedLoaderFillColor: rgba(0, 0, 0, 0.15); /*------------------- Variations diff --git a/src/themes/round/elements/button.variables b/src/themes/round/elements/button.variables index d078106e1..6f63a21e1 100644 --- a/src/themes/round/elements/button.variables +++ b/src/themes/round/elements/button.variables @@ -26,11 +26,6 @@ @iconMargin: 0em @iconDistance 0em -(@iconDistance / 2); @iconVerticalAlign: top; -/* Loader */ -@loaderPath: "@{imagePath}/loader-mini.gif"; -@hugeLoaderPath: "@{imagePath}/loader-small.gif"; -@massiveLoaderPath: "@{imagePath}/loader-medium.gif"; - /*------------------- Group --------------------*/