bia-framework/components/core-icon/core-icon.css

Bia Framework to work with angular 2

/*#endregion */
/* ###################### MIXINS ##########################*/
/*Core Visibility */
/* 0, 640px */
/* 641px, 1024px */
/* 1025px, 1440px */
/* 1441px, 1920px */
/* 1921px */
[class^="icon"], [class*=" icon"] {
  -webkit-app-region: no-drag; }
  [class^="icon"].selectable, [class*=" icon"].selectable {
    cursor: pointer; }
  [class^="icon"].align-center, [class*=" icon"].align-center {
    margin: 0 auto; }
  [class^="icon"] path, [class*=" icon"] path {
    fill: inherit; }
  [class^="icon"].icon-theme-dark.icon--color-secondary, [class*=" icon"].icon-theme-dark.icon--color-secondary {
    fill: rgba(255, 255, 255, 0.7); }
  [class^="icon"].icon-theme-light.icon--color-secondary, [class*=" icon"].icon-theme-light.icon--color-secondary {
    fill: rgba(0, 0, 0, 0.7); }

/*default class icon*/
.icon-size-xxsm {
  width: 16px;
  height: 16px; }

.icon-size-xsm {
  width: 24px;
  height: 24px; }

.icon-size-sm {
  width: 36px;
  height: 36px; }

.icon-size-md {
  width: 48px;
  height: 48px; }

.icon-size-md-l {
  width: 64px;
  height: 64px; }

.icon-size-lg {
  width: 96px;
  height: 96px; }

.icon-size-xlg {
  width: 128px;
  height: 128px; }

.icon-size-xxlg {
  width: 60px;
  height: 60px; }

@media only screen and (min-width: 40.063em) {
  /* Container Directions */
  .icon_size-medium-up-xs:before {
    font-size: 24px; }

  /* Container Directions */
  .icon_size-medium-up-sm:before {
    font-size: 36px; }

  /* Container Directions */
  .icon_size-medium-up-md:before {
    font-size: 48px; }

  /* Container Directions */
  .icon_size-medium-up-md-l:before {
    font-size: 64px; }

  /* Container Directions */
  .icon_size-medium-up-lg:before {
    font-size: 96px; }

  /* Container Directions */
  .icon_size-medium-up-xlg:before {
    font-size: 128px; }

  /* Container Directions */
  .icon_size-medium-up-xxlg:before {
    font-size: 60px; } }
@media only screen and (max-width: 40em) {
  /* Container Directions */
  .icon_size-small-only-xs:before {
    font-size: 24px; }

  /* Container Directions */
  .icon_size-small-only-sm:before {
    font-size: 36px; }

  /* Container Directions */
  .icon_size-small-only-md:before {
    font-size: 48px; }

  /* Container Directions */
  .icon_size-small-only-md-l:before {
    font-size: 64px; }

  /* Container Directions */
  .icon_size-small-only-lg:before {
    font-size: 96px; }

  /* Container Directions */
  .icon_size-small-only-xlg:before {
    font-size: 128px; }

  /* Container Directions */
  .icon_size-small-only-xxlg:before {
    font-size: 60px; } }
@media only screen {
  /* Container Directions */
  .icon_size-small-up-xs:before {
    font-size: 24px; }

  /* Container Directions */
  .icon_size-small-up-sm:before {
    font-size: 36px; }

  /* Container Directions */
  .icon_size-small-up-md:before {
    font-size: 48px; }

  /* Container Directions */
  .icon_size-small-up-md-l:before {
    font-size: 64px; }

  /* Container Directions */
  .icon_size-small-up-lg:before {
    font-size: 96px; }

  /* Container Directions */
  .icon_size-small-up-xlg:before {
    font-size: 128px; }

  /* Container Directions */
  .icon_size-small-up-xxlg:before {
    font-size: 60px; } }
@media only screen and (min-width: 40.063em) and (max-width: 64em) {
  /* Container Directions */
  .icon_size-medium-only-xs:before {
    font-size: 24px; }

  /* Container Directions */
  .icon_size-medium-only-sm:before {
    font-size: 36px; }

  /* Container Directions */
  .icon_size-medium-only-md:before {
    font-size: 48px; }

  /* Container Directions */
  .icon_size-medium-only-md-l:before {
    font-size: 64px; }

  /* Container Directions */
  .icon_size-medium-only-lg:before {
    font-size: 96px; }

  /* Container Directions */
  .icon_size-medium-only-xlg:before {
    font-size: 128px; }

  /* Container Directions */
  .icon_size-medium-only-xxlg:before {
    font-size: 60px; } }
@media only screen and (min-width: 64.063em) and (max-width: 90em) {
  /* Container Directions */
  .icon_size-large-only-xs:before {
    font-size: 24px; }

  /* Container Directions */
  .icon_size-large-only-sm:before {
    font-size: 36px; }

  /* Container Directions */
  .icon_size-large-only-md:before {
    font-size: 48px; }

  /* Container Directions */
  .icon_size-large-only-md-l:before {
    font-size: 64px; }

  /* Container Directions */
  .icon_size-large-only-lg:before {
    font-size: 96px; }

  /* Container Directions */
  .icon_size-large-only-xlg:before {
    font-size: 128px; }

  /* Container Directions */
  .icon_size-large-only-xxlg:before {
    font-size: 60px; } }
@media only screen and (min-width: 64.063em) {
  /* Container Directions */
  .icon_size-large-up-xs:before {
    font-size: 24px; }

  /* Container Directions */
  .icon_size-large-up-sm:before {
    font-size: 36px; }

  /* Container Directions */
  .icon_size-large-up-md:before {
    font-size: 48px; }

  /* Container Directions */
  .icon_size-large-up-md-l:before {
    font-size: 64px; }

  /* Container Directions */
  .icon_size-large-up-lg:before {
    font-size: 96px; }

  /* Container Directions */
  .icon_size-large-up-xlg:before {
    font-size: 128px; }

  /* Container Directions */
  .icon_size-large-up-xxlg:before {
    font-size: 60px; } }
.icon--color-primary {
  fill: #8BC34A; }

.icon--color-accent {
  fill: #00B8D4; }

.icon--color-primary-dark {
  fill: #558B2F; }

.icon--color-white {
  fill: white; }

.icon--color-primary-light {
  fill: #AED581; }

.icon--color-primary-50 {
  fill: #F1F8E9; }

.icon--color-primary-100 {
  fill: #DCEDC8; }

.icon--color-primary-200 {
  fill: #C5E1A5; }

.icon--color-primary-300 {
  fill: #AED581; }

.icon--color-primary-400 {
  fill: #9CCC65; }

.icon--color-primary-500 {
  fill: #8BC34A; }

.icon--color-primary-600 {
  fill: #7CB342; }

.icon--color-primary-700 {
  fill: #689F38; }

.icon--color-primary-800 {
  fill: #558B2F; }

.icon--color-primary-900 {
  fill: #33691E; }

.icon--color-secondary-dark {
  fill: rgba(255, 255, 255, 0.7); }

.icon--color-secondary-light {
  fill: rgba(0, 0, 0, 0.7); }

.icon--color-success {
  fill: #8BC34A; }

.icon--color-info {
  fill: #AA89E6; }

.icon--color-secondary-text {
  fill: rgba(0, 0, 0, 0.54); }

.icon--color-warning {
  fill: #FFC107; }

.icon--color-danger {
  fill: #ff5499; }

.icon--color-light {
  fill: white; }

.icon--color-dark {
  fill: #58666e; }

.icon--color-text {
  fill: rgba(0, 0, 0, 0.87); }

.icon-spin {
  margin: auto;
  text-align: center;
  -webkit-animation: spin 1.0s linear infinite normal;
  -moz-animation: spin 1.0s linear infinite normal;
  -o-animation: spin 1.0s linear infinite normal;
  animation: spin 1.0s linear infinite normal; }

/*------------------------------*/
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0); }
  100% {
    -webkit-transform: rotate(-359deg);
    -moz-transform: rotate(-359deg);
    -ms-transform: rotate(-359deg);
    -o-transform: rotate(-359deg);
    transform: rotate(-359deg); } }
@-moz-keyframes spin {
  0% {
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0); }
  100% {
    -webkit-transform: rotate(-359deg);
    -moz-transform: rotate(-359deg);
    -ms-transform: rotate(-359deg);
    -o-transform: rotate(-359deg);
    transform: rotate(-359deg); } }
@-o-keyframes spin {
  0% {
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0); }
  100% {
    -webkit-transform: rotate(-359deg);
    -moz-transform: rotate(-359deg);
    -ms-transform: rotate(-359deg);
    -o-transform: rotate(-359deg);
    transform: rotate(-359deg); } }
@keyframes spin {
  0% {
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0); }
  100% {
    -webkit-transform: rotate(-359deg);
    -moz-transform: rotate(-359deg);
    -ms-transform: rotate(-359deg);
    -o-transform: rotate(-359deg);
    transform: rotate(-359deg); } }

/*# sourceMappingURL=core-icon.css.map */