pxt-core/react-common/styles/controls/Button.less

Microsoft MakeCode provides Blocks / JavaScript / Python tools and editors

.common-button {
    cursor: pointer;
    position: relative;
    display: inline-block;
    min-height: 1rem;
    outline: none;
    border: none;
    vertical-align: middle;
    color: @buttonTextColorLightBackground;
    background: @buttonBackgroundColor;
    font-family: @pageFont;
    margin: 0 0.25rem 0 0;
    padding: 0.8rem 2rem 0.95rem;
    text-transform: none;
    text-shadow: none;
    font-weight: 400;
    line-height: 1em;
    font-style: normal;
    font-size: 16px;
    text-align: center;
    text-decoration: none;
    border-radius: 0.2em;
    user-select: none;
    transition: opacity .1s ease,background-color .1s ease,box-shadow .1s ease,color .1s ease,background .1s ease;
    -webkit-tap-highlight-color: transparent;
}

.common-button:hover {
    filter: grayscale(.15) brightness(.85) contrast(1.3);
}

.common-button .right {
    margin-left: 0.5rem;
}

.common-button-flex {
    white-space: nowrap;
}

/****************************************************
 *                  Color Variants                   *
 ****************************************************/

.common-button.primary {
    background: @primaryColor;
    color: @buttonTextColorDarkBackground;
    border: 1px solid @primaryColor;
}

.common-button.secondary {
    background: @secondaryColor;
    color: @buttonTextColorDarkBackground;
    border: 1px solid @secondaryColor;
}

.common-button.teal {
    background: @teal;
    color: @buttonTextColorDarkBackground;
    border: 1px solid @teal;
}

.common-button.orange {
    background: @orange;
    color: @buttonTextColorDarkBackground;
    border: 1px solid @orange;
}

.common-button.red {
    background: @red;
    color: @buttonTextColorDarkBackground;
    border: 1px solid @red;
}

.common-button.green {
    background: @green;
    color: @buttonTextColorDarkBackground;
    border: 1px solid @green;
}

.common-button.gray, .common-button.grey {
    background: @buttonGrayColor;
    color: @buttonTextColorLightBackground;
    border: 1px solid @buttonGrayColor;
}

.common-button.primary.inverted {
    background: @buttonTextColorDarkBackground;
    color: @primaryColor;
}

.common-button.teal.inverted {
    background: @buttonTextColorDarkBackground;
    color: @teal;
}

.common-button.orange.inverted {
    background: @buttonTextColorDarkBackground;
    color: @orange;
}

.common-button.red.inverted {
    background: @buttonTextColorDarkBackground;
    color: @red;
}

.common-button.green.inverted {
    background: @buttonTextColorDarkBackground;
    color: @green;
}


/****************************************************
 *                Disabled Buttons                  *
 ****************************************************/

.common-button.disabled:hover {
    filter: none;
}

.common-button.disabled,
.common-button.disabled.primary,
.common-button.disabled.primary.inverted,
.common-button.disabled.secondary,
.common-button.disabled.secondary.inverted,
.common-button.disabled.teal,
.common-button.disabled.teal.inverted,
.common-button.disabled.orange,
.common-button.disabled.orange.inverted,
.common-button.disabled.red,
.common-button.disabled.red.inverted,
.common-button.disabled.green,
.common-button.disabled.green.inverted
 {
    cursor: default;
    background-color: @buttonBackgroundColorDisabled;
    color: @buttonTextColorLightBackground;
    border: @buttonBackgroundColorDisabled;
}

.common-button.menu-button.disabled {
    opacity: 0.8;
}

.common-button.menu-button.disabled:hover,
.common-button.menu-button.disabled:active {
    background: none;
}

/****************************************************
 *                      Focus                       *
 ****************************************************/

.common-button:focus-visible::after {
    content: "";
    position: absolute;
    inset: 4px;
    border: 1px solid transparent;
    outline: @buttonFocusOutlineLightBackground;
    z-index: 1;
    border-radius: 0.2em;
}

.common-button.menu-button:focus-visible::after,
.common-button.primary:focus-visible::after,
.common-button.secondary:focus-visible::after,
.common-button.teal:focus-visible::after,
.common-button.orange:focus-visible::after,
.common-button.red:focus-visible::after,
.common-button.green:focus-visible::after,
.common-button.facebook:focus-visible::after,
.common-button.twitter:focus-visible::after,
.common-button.discourse:focus-visible::after {
    outline: @buttonFocusOutlineDarkBackground;
}

.common-button.inverted:focus-visible::after {
    outline: @buttonFocusOutlineLightBackground;
}


/****************************************************
 *                   Menu Buttons                   *
 ****************************************************/

.common-button.menu-button {
    background: none;
    border: none;
    color: @buttonMenuTextColor;
    height: 100%;
    padding: 0em 1rem 0rem;
    margin: 0;
    border-radius: 0;
    font-size: 20px;

    i.fas, i.far, .icon, .xicon {
        font-size: 24px;
    }
}

.common-button.menu-button:hover {
    background: @buttonMenuBackgroundHoverColor;
}

.common-button.menu-button:active {
    background: @buttonMenuBackgroundActiveColor;
}

.common-button.menu-button.inverted,
.common-button.menu-button.inverted:hover  {
    background: @buttonMenuBackgroundColorInverted;
    color: @buttonMenuTextColorInverted;
}

.common-button.text-only, .common-button.inverted.text-only {
    border: none;
    background: none;
}

/****************************************************
 *                   Link Buttons                   *
 ****************************************************/

.common-button.link-button {
    background: none;
    border: none;
    padding: 0;
    color: @buttonLinkColor;
}

.common-button.link-button:hover {
    text-decoration: underline;
}

.common-button.link-button:focus-visible::after {
    outline: none;
    border: none;
    text-decoration: underline;
}

.common-button.link-button:focus-visible {
    outline: none;
    border: none;
    text-decoration: underline;
}

.common-button.link-button.kiosk {
    color: @commonTextColor;
}

/****************************************************
 *                   Square Buttons                 *
 ****************************************************/

 .common-button.square-button {
    width: 3rem;
    height: 3rem;
    overflow: hidden;
    padding: 0;

    i, i.fas, i.far {
        margin: 0;
    }
}


/****************************************************
 *                   Circle Buttons                 *
 ****************************************************/

 .common-button.circle-button {
    &:extend(.common-button.square-button);
    border-radius: 2rem;
}

.common-button.circle-button:focus-visible::after {
    border-radius: 2rem;
}

/****************************************************
 *                 Button Group                     *
 ****************************************************/

 .common-button-group {
    display: flex;
    flex-direction: row;

    .common-button {
        border-radius: 0;
        margin: 0;
    }

    .common-button.inverted:not(:last-child) {
        border-right: none;
    }

    .common-button:first-child {
        border-top-left-radius: 0.2em;
        border-bottom-left-radius: 0.2em;
    }
    .common-button:last-child {
        border-top-right-radius: 0.2em;
        border-bottom-right-radius: 0.2em;

        margin: 0 0.25rem 0 0;
    }
 }


/****************************************************
 *                   Social Buttons                 *
 ****************************************************/

.common-button.social-button {
    font-size: 1.5rem;

    img {
        max-width: 100%;
    }
}

.common-button.facebook {
    background: #4267B2;
    color: @buttonTextColorDarkBackground;
}

.common-button.twitter {
    background: #1DA1F2;
    color: @buttonTextColorDarkBackground;
}

.common-button.discourse {
    background: #333333;
    color: @buttonTextColorDarkBackground;
}

.common-button.device-share {
    background: #333333;
    color: @buttonTextColorDarkBackground;
}

.common-button.whatsapp {
    background: #59CE72;
    color: @buttonTextColorDarkBackground;
}

.common-button.microsoft-teams {
    background: #35258F;
    color: @buttonTextColorDarkBackground;
}

/****************************************************
 *                 High Contrast                    *
 ****************************************************/

.high-contrast, .hc {
    .common-button {
        color: @highContrastTextColor !important;
        background: @highContrastBackgroundColor !important;
        border-color: @highContrastTextColor !important;

        &:hover, &:focus {
            outline: @highContrastFocusOutline !important;
            z-index: @highContrastFocusZIndex;
        }
    }
}