gulplesssemantic-uitheming
Semantic-UI theming focused input text color
It's my first time theming Semantic-UI and I can't find an option to modify the focused input text color. I have been able to change every color but this one. I am using the default theme.
Here is my site.variables so far:
/*******************************
User Global Variables
*******************************/
/*-------------------
Fonts
--------------------*/
@fontName: 'Montserrat';
/*-------------------
Base Sizes
--------------------*/
/* This is the single variable that controls them all */
@emSize: 14px;
/* The size of page text */
@fontSize: 14px;
/*-------------------
Brand Colors
--------------------*/
@primaryColor: @orange;
@secondaryColor: @white;
@segmentColor: @gray;
/*-------------------
Page
--------------------*/
@pageBackground: @black;
/*-------------------
Links
--------------------*/
@linkColor: @orange;
/*--------------
Form Input
---------------*/
/* This adjusts the default form input across all elements */
@inputBackground: @darkGray;
/* Input Text Color */
@inputColor: @orange;
@inputPlaceholderColor: darken(@textColor, 75);
@inputPlaceholderFocusColor: darken(@textColor, 45);
/*-------------------
Focused Input
--------------------*/
/* Used on inputs, textarea etc */
@focusedFormBorderColor: @primaryColor;
/* Used on dropdowns, other larger blocks */
@focusedFormMutedBorderColor: @primaryColor;
/*-------------------
Page
--------------------*/
@textColor: @white;
/*-------------------
Site Colors
--------------------*/
/*--- Colors ---*/
@orange: #f05026;
@black: #101113;
@gray: #2f2d2e;
/*--- Dark Colors ---*/
@darkGray: #141314;
I also tried to modify the @focusColor property in the input.variables, but it didn't work either.
Here are the inputs in their different states:
Solution
Unless this was changed since the last time I used Semantic-UI, I don't remember that being a variable you can change. You would be best off using some CSS to accomplish what you want. See below:
input:focus {
color: red
}