/* *= depend_on semantic_ui/theme.config *= depend_on semantic_ui/config/globals/reset.overrides *= depend_on semantic_ui/config/globals/reset.variables *= depend_on semantic_ui/config/globals/site.overrides *= depend_on semantic_ui/config/globals/site.variables *= depend_on semantic_ui/config/modules/rating.overrides *= depend_on semantic_ui/config/modules/rating.variables */ /*! * # Semantic UI - Rating * http://github.com/semantic-org/semantic-ui/ * * * Copyright 2014 Contributors * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ @type : 'module'; @element : 'rating'; @import (multiple) 'semantic_ui/theme.config'; /******************************* Rating *******************************/ .ui.rating { display: @display; vertical-align: @verticalAlign; } .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: @iconWidth; height: auto; text-align: center; padding: 0em; font-weight: normal; font-style: normal; } /******************************* Types *******************************/ /*------------------- Star --------------------*/ /* Inactive */ .ui.star.rating .icon { width: @starIconWidth; color: @starInactiveColor; } /* Active Star */ .ui.star.rating .active.icon { color: @starActiveColor !important; text-shadow: @starActiveShadow; } /* Selected Star */ .ui.star.rating .icon.selected, .ui.star.rating .icon.selected.active { color: @starSelectedColor !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: @heartIconWidth; color: @heartInactiveColor; } /* Active Heart */ .ui.heart.rating .active.icon { color: @heartActiveColor !important; text-shadow: @heartActiveShadow; } /* Selected Heart */ .ui.heart.rating .icon.selected, .ui.heart.rating .icon.selected.active { color: @heartSelectedColor !important; } /******************************* States *******************************/ /* Inactive Icon */ .ui.rating .icon { color: @inactiveColor; } /* Active Icon */ .ui.rating .active.icon { color: @activeColor; } /* Selected Icon */ .ui.rating .icon.selected, .ui.rating .icon.selected.active { color: @hoverColor; } /*------------------- Disabled --------------------*/ /* disabled rating */ .ui.disabled.rating .icon { cursor: default; } /*------------------- Interacting (Active) --------------------*/ /* Selected Rating */ .ui.rating.selected .active.icon { opacity: @interactiveIconOpacity; } .ui.rating.selected .icon.selected, .ui.rating .icon.selected { opacity: @interactiveSelectedIconOpacity; } /******************************* Variations *******************************/ .ui.mini.rating .icon { font-size: @mini; } .ui.tiny.rating .icon { font-size: @tiny; } .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; } .ui.massive.rating .icon { font-size: @massive; } .loadUIOverrides();