177 lines
3.5 KiB
Text
177 lines
3.5 KiB
Text
/*!
|
|
* # Fomantic-UI - Rating
|
|
* http://github.com/fomantic/Fomantic-UI/
|
|
*
|
|
*
|
|
* Released under the MIT license
|
|
* http://opensource.org/licenses/MIT
|
|
*
|
|
*/
|
|
|
|
|
|
/*******************************
|
|
Theme
|
|
*******************************/
|
|
|
|
@type : 'module';
|
|
@element : 'rating';
|
|
|
|
@import (multiple) '../../theme.config';
|
|
|
|
/*******************************
|
|
Rating
|
|
*******************************/
|
|
|
|
.ui.rating {
|
|
display: inline-flex;
|
|
white-space: @whiteSpace;
|
|
vertical-align: @verticalAlign;
|
|
}
|
|
.ui.rating:last-child {
|
|
margin-right: 0;
|
|
}
|
|
|
|
/* Icon */
|
|
.ui.rating .icon {
|
|
padding: 0;
|
|
margin: 0;
|
|
text-align: center;
|
|
font-weight: @normal;
|
|
font-style: normal;
|
|
flex: 1 0 auto;
|
|
cursor: @iconCursor;
|
|
width: @iconWidth;
|
|
height: @iconHeight;
|
|
transition: @iconTransition;
|
|
line-height: 1;
|
|
backface-visibility: hidden;
|
|
}
|
|
|
|
|
|
/*******************************
|
|
Types
|
|
*******************************/
|
|
|
|
|
|
/*-------------------
|
|
Standard
|
|
--------------------*/
|
|
|
|
/* Inactive Icon */
|
|
.ui.rating .icon {
|
|
background: @inactiveBackground;
|
|
color: @inactiveColor;
|
|
}
|
|
|
|
/* Active Icon */
|
|
.ui.rating .active.icon {
|
|
background: @activeBackground;
|
|
color: @activeColor;
|
|
}
|
|
|
|
/* Partially Active Icon */
|
|
.ui.rating .icon.partial.active {
|
|
background: linear-gradient(to right, @activeColor 0% var(--full), @inactiveColor var(--full) 100%);
|
|
background-clip: text;
|
|
color: transparent;
|
|
}
|
|
|
|
/* Selected Icon */
|
|
.ui.rating .icon.selected,
|
|
.ui.rating .icon.selected.active,
|
|
.ui.rating .icon.selected.partial.active {
|
|
background: @selectedBackground;
|
|
color: @selectedColor;
|
|
background-clip: unset;
|
|
}
|
|
|
|
/*--------------
|
|
Colors
|
|
-------------- */
|
|
|
|
each(@colors, {
|
|
@color: replace(@key, '@', '');
|
|
@c: @colors[@@color][color];
|
|
@l: @colors[@@color][light];
|
|
@h: @colors[@@color][hover];
|
|
@lh: @colors[@@color][lightHover];
|
|
|
|
.ui.@{color}.rating .active.icon {
|
|
color: @l;
|
|
text-shadow: 0px -@shadowWidth 0px @c,
|
|
-@shadowWidth 0px 0px @c,
|
|
0px @shadowWidth 0px @c,
|
|
@shadowWidth 0px 0px @c;
|
|
}
|
|
.ui.@{color}.rating .icon.selected,
|
|
.ui.@{color}.rating .icon.selected.active,
|
|
.ui.@{color}.rating .icon.selected.partial.active {
|
|
background: inherit;
|
|
color: @lh;
|
|
text-shadow: 0px -@shadowWidth 0px @h,
|
|
-@shadowWidth 0px 0px @h,
|
|
0px @shadowWidth 0px @h,
|
|
@shadowWidth 0px 0px @h;
|
|
|
|
-webkit-text-stroke: unset;
|
|
background-clip: unset;
|
|
}
|
|
.ui.@{color}.rating .icon.partial.active {
|
|
background: linear-gradient(to right, @l 0% var(--full), @inactiveColor var(--full) 100%);
|
|
text-shadow: none;
|
|
-webkit-text-stroke: @c 0.78px;
|
|
background-clip: text;
|
|
color: transparent;
|
|
}
|
|
})
|
|
|
|
|
|
/*******************************
|
|
States
|
|
*******************************/
|
|
|
|
& when (@variationRatingDisabled) {
|
|
/*-------------------
|
|
Disabled
|
|
--------------------*/
|
|
|
|
/* disabled rating */
|
|
.ui.disabled.rating .icon {
|
|
cursor: default;
|
|
}
|
|
}
|
|
|
|
|
|
/*-------------------
|
|
User Interactive
|
|
--------------------*/
|
|
|
|
/* Selected Rating */
|
|
.ui.rating.selected .active.icon {
|
|
opacity: @interactiveActiveIconOpacity;
|
|
}
|
|
.ui.rating.selected .icon.selected,
|
|
.ui.rating .icon.selected {
|
|
opacity: @interactiveSelectedIconOpacity;
|
|
}
|
|
|
|
|
|
|
|
/*******************************
|
|
Variations
|
|
*******************************/
|
|
|
|
.ui.rating {
|
|
font-size: @medium;
|
|
}
|
|
& when not (@variationRatingSizes = false) {
|
|
each(@variationRatingSizes, {
|
|
@s: @@value;
|
|
.ui.@{value}.rating {
|
|
font-size: @s;
|
|
}
|
|
})
|
|
}
|
|
|
|
|
|
.loadUIOverrides();
|