angular2-boiler-plate/public/css/variables.less

Angular 2 Boiler plate that integrated with WebPack, TypeScript, DatePicker, RxJs for Reactive Extensions in Java Script , Karma , Jasmine for unit testing , WebKit ,protractor e2e testing

@theme:linear-gradient(to bottom, #00adee 0%, #0096d1 100%);;
@black:#000000;
@white:#ffffff;
@hover-dark: #cccccc;
@hover: #f1f1f1;
@border:#dddddd;
@disabled:#aaaaaa;
@shadow:#444444;
@danger:#f44336;//error , validate input color
@success:#4caf50; 
@info:#87ceeb;
@font-family: "Roboto", sans-serif;
@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:@hover;
@table-even:@bg-color;
@table-striped:@hover;
@table-striped:@table-even;
@table-hover: @hover-dark;
@pagination-text-color:@fg-color;
@pagination-container-background-color:@table-background-color;
@nav-link-color:@bg-color;
@navbar-bg:@theme;
@navbar-hover-color:@black;
@navbar-hover-bg-color:@hover;
@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;