rating.less

/*
 * # Semantic - Rating
 * http://github.com/semantic-org/semantic-ui/
 *
 *
 * Copyright 2014 Contributor
 * Released under the MIT license
 * http://opensource.org/licenses/MIT
 *
 */

/*******************************
            Theme
*******************************/

@type    : 'module';
@element : 'rating';

@import '../../semantic.config';


/*******************************
           Rating
*******************************/

.ui.rating {
  display: @display;

  font-size: 0em;
  vertical-align: @verticalAlign;
  margin: @margin;
}
.ui.rating:last-child {
  margin-right: 0em;
}

.ui.rating:before {
  display: block;
  content: '';
  visibility: hidden;
  clear: both;
  height: 0;
}

/* Icon */
.ui.rating .icon {
  cursor: pointer;

  margin: 0em;
  width: @iconHitbox;
  text-align: center;
  height: auto;
  padding: 0em;

  font-weight: normal;
  font-style: normal;
  vertical-align: top;
}


/*******************************
             Types
*******************************/

/*-------------------
        Star
--------------------*/

/* Inactive */
.ui.star.rating .icon {
  width: @starIconHitbox;
  color: @starInactiveColor;
}

/* Active Star */
.ui.star.rating .active.icon {
  color: @starActiveColor !important;
  text-shadow: @starActiveShadow;
}

/* Hovered Star */
.ui.star.rating .icon.hover,
.ui.star.rating .icon.hover.active {
  color: @starHoverColor !important;
}

.ui.star.rating.partial {
  position: relative;
  z-index: 1;
}
.ui.star.rating.partial:before {
  position: absolute;
  z-index: -1;
}



/*-------------------
        Heart
--------------------*/

.ui.heart.rating .icon {
  width: @heartIconHitbox;
  color: @heartInactiveColor;
}

/* Active Heart */
.ui.heart.rating .active.icon {
  color: @heartActiveColor !important;
  text-shadow: @heartActiveShadow;
}

/* Hovered Heart */
.ui.heart.rating .icon.hover,
.ui.heart.rating .icon.hover.active {
  color: @heartHoverColor !important;
}


/*******************************
             States
*******************************/


/* Inactive Icon */
.ui.rating .icon {
  color: @inactiveColor;
}

/* Active Icon */
.ui.rating .active.icon {
  color: @activeColor;
}

/* Hovered Icon */
.ui.rating .icon.hover,
.ui.rating .icon.hover.active {
  color: @hoverColor;
}


/*-------------------
       Disabled
--------------------*/

/* disabled rating */
.ui.disabled.rating .icon {
  cursor: default;
}


/*-------------------
     Interacting
--------------------*/

/* Selected Rating */
.ui.rating.hover .active.icon {
  opacity: @interactiveIconOpacity;
}
.ui.rating.hover .icon.hover,
.ui.rating .icon.hover {
  opacity: @interactiveHoveredIconOpacity;
}



/*******************************
          Variations
*******************************/

.ui.small.rating .icon {
  font-size: @small;
}
.ui.rating .icon {
  font-size: @medium;
}
.ui.large.rating .icon {
  font-size: @large;
}
.ui.huge.rating .icon {
  font-size: @huge;
}

/* Realign */
.ui.large.rating,
.ui.huge.rating {
  vertical-align: @oversizedVerticalAlign;
}

.loadUIOverrides();