angular2-simple-ui/public/css/variables.less

Angular 2 Simple Material Design UI Components customisable with Simple 30 KB CSS with LESS support and full features support , just plugin up and run for clarity look at sample examples

@theme:#00395D;
@black:#000000;
@white:#ffffff;
@hover-dark: #cccccc;
@hover: #F7F7F7;;
@border:#dddddd;
@disabled:#aaaaaa;
@shadow:#444444;
@danger:#f44336;//error , validate input color
@success:#4caf50; 
@info:#29b1e5;
@font-family: "Roboto", sans-serif;
@table-font-family: "Roboto Mono", monospace;
@body-font: @font-family;
@heading-font: @font-family;
@fg-color:@black;  // font color
@bg-color:@white; // background color
@btn-bg-color:@black; 
@btn-color: @white;
@selected-color:@theme ;// select, radio buttons and checkboxes selected color
@label-color:@theme;
@progressbar-color:@theme;
@table-background-color:@bg-color;
@table-border:@border;
@table-odd:@bg-color;
@table-even:@hover;
@table-striped:@hover;
@table-striped:@table-even;
@table-hover: @hover-dark;
@pagination-text-color:@fg-color;
@pagination-container-background-color:@table-background-color;


@navbar-bg:@theme;
@nav-link-color:#FFFFFF;
@navbar-brand-color:#FFFFFF;

@nav-icon-border:5px solid #00AEEF;;
@nav-icon-background-color:#0c8ec2;

@navbar-hover-color:@white;
@navbar-hover-bg-color:@navbar-bg;
@navbar-hover-border-bottom:2px  solid #00AEEF;;
@navbar-hover-border-top:0;
@navbar-hover-border-left:0;
@navbar-hover-border-right:0;

@navbar-active-color:#00AEEF;
@navbar-active-bg-color:@navbar-bg;
@navbar-active-border-bottom:2px  solid #00AEEF;;
@navbar-active-border-top:0;
@navbar-active-border-left:0;
@navbar-active-border-right:0;

@star-size:34px;
@star-checked-color:#FFED85;
@star-disabled-color:@disabled;
@highdensity: ~"only screen and (-webkit-min-device-pixel-ratio: 1.5)",
              ~"only screen and (min--moz-device-pixel-ratio: 1.5)",
              ~"only screen and (-o-min-device-pixel-ratio: 3/2)",
              ~"only screen and (min-device-pixel-ratio: 1.5)";
@mobile:      ~" (max-width: 600px)";
@tablet:      ~" (max-width: 992px) and (min-width: 601px)";
@mobile-tablet:      ~" (max-width:992px)";
@desktop:     ~"  (max-width: 1128px) and (min-width: 993px)";
@desktop-xl:  ~" (min-width: 1129px)";
@check-size:24px;