office-ui-fabric-react/lib/components/Rating/Rating.styles.js

Reusable React components for building experiences for Office 365.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var Styling_1 = require("../../Styling");
function getStyles(props) {
    var disabled = props.disabled, theme = props.theme;
    var semanticColors = theme.semanticColors, palette = theme.palette;
    var ratingSmallIconSize = '16px';
    var ratingLargeIconSize = '20px';
    return {
        ratingStar: [
            'ms-RatingStar-container',
            {
                display: 'inline-block',
                position: 'relative'
            }
        ],
        ratingStarBack: [
            'ms-RatingStar-back',
            {
                // TODO: Use a proper semantic color for this
                color: palette.neutralTertiary,
                width: '100%'
            },
            disabled && {
                color: semanticColors.disabledBodyText,
                selectors: (_a = {},
                    _a[Styling_1.HighContrastSelector] = {
                        color: 'GrayText'
                    },
                    _a)
            }
        ],
        ratingStarFront: [
            'ms-RatingStar-front',
            {
                position: 'absolute',
                height: '100 %',
                left: '0',
                top: '0',
                textAlign: 'center',
                verticalAlign: 'middle',
                overflow: 'hidden',
                color: semanticColors.bodyTextChecked,
                selectors: (_b = {},
                    _b[Styling_1.HighContrastSelector] = {
                        'color': 'Highlight'
                    },
                    _b)
            }
        ],
        ratingButton: [
            Styling_1.getFocusStyle(theme, 0),
            'ms-Rating-button',
            {
                background: 'none',
                margin: '3px 3px 0px 0px',
                padding: '0px',
                border: 'none',
                cursor: 'pointer',
                selectors: {
                    '&:disabled': {
                        cursor: 'default'
                    },
                    '&[disabled]': {
                        cursor: 'default'
                    }
                }
            },
            disabled && {
                cursor: 'default'
            },
        ],
        rootIsSmall: [
            'ms-Rating--small',
            {
                fontSize: ratingSmallIconSize,
                lineHeight: ratingSmallIconSize
            }
        ],
        rootIsLarge: [
            'ms-Rating--large',
            {
                fontSize: ratingLargeIconSize,
                lineHeight: ratingLargeIconSize
            }
        ],
        labelText: [
            'ms-Rating-labelText',
            Styling_1.hiddenContentStyle
        ],
        ratingFocusZone: [
            'ms-Rating-focuszone',
            {
                display: 'inline-block',
                paddingBottom: '1px'
            }
        ]
    };
    var _a, _b;
}
exports.getStyles = getStyles;
//# sourceMappingURL=Rating.styles.js.map