responsivewebframework/src/less/variables-icons.less

Jalasoft Foundation Front End Framework ========================================

// Variables icon
//==============
@icon-font-path: "../fonts/";
@icon-font-name: "jala-icons";

@font-size-1x: 50px;
@lebelOpacity: 0.5;

@colorsuccess: rgb(105, 170, 110);
@colorinfo: rgb(51,136,255);
@colorwarning: #ffc923;
@colordanger: rgb(190, 4, 17);

@opacity-icon20: 0.2;
@opacity-icon40: 0.4;
@opacity-icon60: 0.6;
@opacity-icon80: 0.8;
@opacity-icon100: 1;

@icon-size-absolute-s30: 30px;
@icon-size-absolute-s50: 50px;
@icon-size-absolute-s70: 70px;
@icon-size-absolute-s90: 90px;
@icon-size-absolute-s110: 110px;

@content-icon-warning: "\d41f";
@content-icon-volume2: "\d41e";
@content-icon-volume: "\d41d";
@content-icon-info: "\d41c";
@content-icon-tree-view: "\d41b";
@content-icon-next-bread: "\d41a";
@content-icon-deployup: "\d419";
@content-icon-plus: "\d418";
@content-icon-equis: "\d417";
@content-icon-throbber: "\d416";
@content-icon-settings: "\d415";
@content-icon-search: "\d414";
@content-icon-refresh: "\d413";
@content-icon-products: "\d412";
@content-icon-phonecall: "\d411";
@content-icon-next: "\d410";
@content-icon-messaging: "\d40f";
@content-icon-inbox: "\d40e";
@content-icon-image: "\d40d";
@content-icon-error: "\d40c";
@content-icon-deploy: "\d40b";
@content-icon-delete: "\d40a";
@content-icon-configuration: "\d409";
@content-icon-checkbox: "\d408";
@content-icon-back: "\d407";
@content-icon-approved: "\d406";
@content-icon-alert: "\d41f";
@content-icon-slider: "\d420";
@content-icon-slidertoday: "\d421";


/* Font Declaration
====================*/
@font-face {
  font-family: 'jala-icons';
  src:url('@{icon-font-path}@{icon-font-name}.eot?wmkbtl');
  src:url('@{icon-font-path}@{icon-font-name}.eot?#iefixwmkbtl') format('embedded-opentype'),
  url('@{icon-font-path}@{icon-font-name}.woff?wmkbtl') format('woff'),
  url('@{icon-font-path}@{icon-font-name}.ttf?wmkbtl') format('truetype'),
  url('@{icon-font-path}@{icon-font-name}.svg?wmkbtl#jala-icons') format('svg');
  font-weight: normal;
  font-style: normal;
}

/* Icon Prototype
==================*/
[class*="icon"], [class*="tree-item"], a, .active-child:before {
  font-family: 'jala-icons';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  display: inline-block;
  text-align: center;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Icon size relative
==================*/
[class*="icon"][class*="-x1"] {
  font-size: @font-size-1x;
}

[class*="icon"][class*="-x2"] {
  font-size: @font-size-1x*1.33;
}

[class*="icon"][class*="-x3"] {
  font-size: @font-size-1x*1.66;
}

[class*="icon"][class*="-x4"] {
  font-size: @font-size-1x*1.99;
}

[class*="icon"][class*="-x5"] {
  font-size: @font-size-1x*2.32;
}

[class*="icon"][class*="-xbase"] {
  font-size: @font-size-base;
}

/* Icons size absolute
==================*/
[class*="icon"][class*="-s30"] {
  font-size: @icon-size-absolute-s30;
}
[class*="icon"][class*="-s50"] {
  font-size: @icon-size-absolute-s50;
}
[class*="icon"][class*="-s70"] {
  font-size: @icon-size-absolute-s70;
}
[class*="icon"][class*="-s90"] {
  font-size: @icon-size-absolute-s90;
}
[class*="icon"][class*="-s110"] {
  font-size: @icon-size-absolute-s110;
}

/* Icons opacity absolute
==================*/
[class*="icon"][class*="-op20"] {
  opacity: @opacity-icon20;
}
[class*="icon"][class*="-op40"] {
  opacity: @opacity-icon40;
}
[class*="icon"][class*="-op60"] {
  opacity: @opacity-icon60;
}
[class*="icon"][class*="-op80"] {
  opacity: @opacity-icon80;
}
[class*="icon"][class*="-op100"] {
  opacity: @opacity-icon100;
}

/* Icons colors standars
==================*/
[class*="-colorsuccess"] {
  color: @colorsuccess;
}

[class*="-colorwarning"]{
  color: @colorwarning;
}

[class*="-colorinfo"] {
  color: @colorinfo;
}

[class*="-colordanger"] {
  color: @colordanger;
}