colette/src/styl/_themes/_btnSkin.styl

A CSS and JS starter kit for 20 Minutes web projects

// Buttons skins
//
// All editorial colors are available to style the button according to its context.
//
// Text color is choosen for contrast between white and black.
// But `native` and `snapchat` buttons have text in `$color-base`.
//
// This skin can be used on `.btn`, `.btnIcon` and `.icon`.
//
// .btnSkin-default          - default color button
// .btnSkin-sport            - sport color button
// .btnSkin-entertainment    - entertainment color button
// .btnSkin-economy          - economy color button
// .btnSkin-community        - community color button
// .btnSkin-weird            - weird color button
// .btnSkin-partner          - partner color button
// .btnSkin-planet           - planet color button
// .btnSkin-media            - media color button
// .btnSkin-hightech         - hightech color button
// .btnSkin-summer           - summer color button
//
// Markup: ./btnSkin.twig
//
// Styleguide: Themes.Buttons

// Default Social Buttons skin
//
// All social colors are available to style the button according to its context.
//
// Button skin are not supported for IE (css custom properties).
//
// Social Button skins can be used with `.btn` and `.btnIcon`
// They are not compatible with `.btn-line`
//
// .btnSkin-dailymotion      - dailymotion color button
// .btnSkin-facebook         - facebook color button
// .btnSkin-flipboard        - flipboard color button
// .btnSkin-github           - github color button
// .btnSkin-googleplus       - googleplus color button
// .btnSkin-hootsuite        - hootsuite color button
// .btnSkin-linkedin         - linkedin color button
// .btnSkin-instagram        - instagram color button
// .btnSkin-messenger        - messenger color button
// .btnSkin-pinterest        - pinterest color button
// .btnSkin-pocket           - pocket color button
// .btnSkin-sms              - sms color button
// .btnSkin-snapchat         - snapchat color button
// .btnSkin-twitter          - twitter color button
// .btnSkin-whatsapp         - whatsapp color button
// .btnSkin-youtube          - youtube color button
//
// Markup: ./btnSkin-socials.twig
//
// Weight: 1
//
// Styleguide: Themes.Buttons.Socials

$btnSkin-colors = merge($colors-themes, $colors-socials, {
    base: $color-base,
    highlight: $color-highlight,
})

.btnSkin
    for key, value in $btnSkin-colors
        &-{replace('social-', '', replace('theme-', '', key))}
            // TODO : replace when we drop support of IE
            // --btn-color s('var(--color-%s)', unquote(key))
            // --btn-text-color s('var(--color-%s-foreground)', unquote(key))
            // IE support for colors : replace when we drop support of IE
            background-color s('var(--color-%s)', unquote(key))
            border-color s('var(--color-%s)', unquote(key))
            color s('var(--color-%s-foreground)', unquote(key))

            &.btn-line
                // TODO : replace when we drop support of IE
                // --btn-text-color s('var(--color-%s)', unquote(key))
                // IE support for colors : replace when we drop support of IE
                color s('var(--color-%s)', unquote(key))
                background-color transparent
                border-color s('var(--color-%s)', unquote(key))