UNPKG

@gooddata/react-components

Version:

GoodData.UI - A powerful JavaScript library for building analytical applications

886 lines (833 loc) • 62.3 kB
meta.foundation-version { font-family: "/5.5.3/"; } meta.foundation-mq-small { font-family: "/only screen/"; width: 0; } meta.foundation-mq-small-only { font-family: "/only screen and (max-width: 40em)/"; width: 0; } meta.foundation-mq-medium { font-family: "/only screen and (min-width:40.0625em)/"; width: 40.0625em; } meta.foundation-mq-medium-only { font-family: "/only screen and (min-width:40.0625em) and (max-width:64em)/"; width: 40.0625em; } meta.foundation-mq-large { font-family: "/only screen and (min-width:64.0625em)/"; width: 64.0625em; } meta.foundation-mq-large-only { font-family: "/only screen and (min-width:64.0625em) and (max-width:90em)/"; width: 64.0625em; } meta.foundation-mq-xlarge { font-family: "/only screen and (min-width:90.0625em)/"; width: 90.0625em; } meta.foundation-mq-xlarge-only { font-family: "/only screen and (min-width:90.0625em) and (max-width:120em)/"; width: 90.0625em; } meta.foundation-mq-xxlarge { font-family: "/only screen and (min-width:120.0625em)/"; width: 120.0625em; } meta.foundation-data-attribute-namespace { font-family: false; } /* 0, 640px */ /* 641px, 1024px */ /* 1025px, 1440px */ /* 1441px, 1920px */ /* 1921px, ... */ /* allow vendor prefixes and disable max length */ /* stylelint-disable max-line-length */ /* stylelint-enable max-line-length */ /* allow vendor prefixes and disable max length */ /* stylelint-disable value-no-vendor-prefix, declaration-block-no-duplicate-properties, max-line-length */ .overlay-wrapper { z-index: 5001; } .overlay { font-family: avenir, "Helvetica Neue", arial, sans-serif; font-weight: 400; line-height: 1.4rem; color: #464e56; font-size: 14px; position: relative; padding: 0.1px; border-radius: 3px; font-family: avenir, "Helvetica Neue", arial, sans-serif; background-color: #fff; box-shadow: 0 1px 20px rgba(20,56,93,.2); } @media only screen and (max-width: 40em) { .overlay { border-radius: 0; } } .gd-spinner { display: inline-block; background-image: url("~@gooddata/goodstrap/lib/./core/styles/images/loading.svg"); background-repeat: no-repeat; background-position: top left; background-size: contain; animation: loadingSpinner 1s infinite linear; } .gd-spinner.small { width: 16px; height: 16px; } .gd-spinner.large { width: 32px; height: 32px; } @keyframes loadingSpinner { 0% { transform: rotate(0deg) translateZ(-0.1px); } 7.83333% { transform: rotate(0deg) translateZ(0.1px); } 8.33333% { transform: rotate(30deg) translateZ(0); } 16.16667% { transform: rotate(30deg) translateZ(0.1px); } 16.66667% { transform: rotate(60deg) translateZ(0); } 24.5% { transform: rotate(60deg) translateZ(0.1px); } 25% { transform: rotate(90deg) translateZ(0); } 32.83333% { transform: rotate(90deg) translateZ(0.1px); } 33.33333% { transform: rotate(120deg) translateZ(0); } 41.16667% { transform: rotate(120deg) translateZ(0.1px); } 41.66667% { transform: rotate(150deg) translateZ(0); } 49.5% { transform: rotate(150deg) translateZ(0.1px); } 50% { transform: rotate(180deg) translateZ(0); } 57.83333% { transform: rotate(180deg) translateZ(0.1px); } 58.33333% { transform: rotate(210deg) translateZ(0); } 66.16667% { transform: rotate(210deg) translateZ(0.1px); } 66.66667% { transform: rotate(240deg) translateZ(0); } 74.5% { transform: rotate(240deg) translateZ(0.1px); } 75% { transform: rotate(270deg) translateZ(0); } 82.83333% { transform: rotate(270deg) translateZ(0.1px); } 83.33333% { transform: rotate(300deg) translateZ(0); } 91.16667% { transform: rotate(300deg) translateZ(0.1px); } 91.66667% { transform: rotate(330deg) translateZ(0); } 99.5% { transform: rotate(330deg) translateZ(0.1px); } 100% { transform: rotate(360deg) translateZ(0); } } .gd-dot-spinner { position: relative; width: 34px; height: 34px; } .gd-dot-spinner-centered { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .gd-dot-spinner div { position: absolute; top: 50%; width: 6px; height: 6px; background: #94a1ad; opacity: 0.3; transform: translate(0, -50%) rotate(0); border-radius: 50%; transform-origin: 17px center; } .gd-dot-spinner .gd-dot-spinner-1 { transform: translate(0, -50%) rotate(45deg); animation: spinner-animation 0.53333s 0.06667s infinite; } .gd-dot-spinner .gd-dot-spinner-2 { transform: translate(0, -50%) rotate(90deg); animation: spinner-animation 0.53333s 0.13333s infinite; } .gd-dot-spinner .gd-dot-spinner-3 { transform: translate(0, -50%) rotate(135deg); animation: spinner-animation 0.53333s 0.2s infinite; } .gd-dot-spinner .gd-dot-spinner-4 { transform: translate(0, -50%) rotate(180deg); animation: spinner-animation 0.53333s 0.26667s infinite; } .gd-dot-spinner .gd-dot-spinner-5 { transform: translate(0, -50%) rotate(225deg); animation: spinner-animation 0.53333s 0.33333s infinite; } .gd-dot-spinner .gd-dot-spinner-6 { transform: translate(0, -50%) rotate(270deg); animation: spinner-animation 0.53333s 0.4s infinite; } .gd-dot-spinner .gd-dot-spinner-7 { transform: translate(0, -50%) rotate(315deg); animation: spinner-animation 0.53333s 0.46667s infinite; } .gd-dot-spinner .gd-dot-spinner-8 { transform: translate(0, -50%) rotate(360deg); animation: spinner-animation 0.53333s 0.53333s infinite; } @keyframes spinner-animation { 0% { opacity: 0.2; } 10% { opacity: 1; } 100% { opacity: 0.2; } } .loading-placeholder { position: relative; display: block; height: 24px; } .loading-placeholder::before { content: ""; display: inline-block; width: 199px; height: 14px; vertical-align: middle; background-image: url("~@gooddata/goodstrap/lib/./core/styles/./images/loading-placeholder.svg"); background-repeat: no-repeat; background-position: 0 0; } .loading-placeholder::after { content: ""; position: absolute; top: 0; right: -100px; bottom: 0; display: block; width: 100px; background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%); animation-name: loading-anim; animation-duration: 1s; animation-iteration-count: infinite; } .loading-placeholder-2::before { width: 240px; background-position: 0 -28px; } .loading-placeholder-3::before { width: 189px; background-position: 0 -56px; } @keyframes loading-anim { from { right: -100px; } to { right: calc(100% + 100px); } } /* ========================================================================== Variables ========================================================================== */ /* ========================================================================== Silent classes - more clever mixins ========================================================================== */ .gd-button-primary, .gd-button-link.gd-button-icon-only[class*="icon-"], .gd-button-icon-only.gd-button-link-dimmed[class*="icon-"], .gd-button-secondary, .gd-button-positive, .gd-button-negative, .gd-button-action { position: relative; display: inline-flex; justify-content: space-between; align-items: center; padding: 5px 14px; border: 1px solid transparent; font: 400 14px/20px avenir, "Helvetica Neue", arial, sans-serif; white-space: nowrap; vertical-align: middle; cursor: pointer; text-align: left; -moz-transition-property: all; -webkit-transition-property: all; transition-property: all; -moz-transition-duration: 0.25s; -webkit-transition-duration: 0.25s; transition-duration: 0.25s; -moz-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; border-radius: 3px; } .gd-button-primary::before, .gd-button-link.gd-button-icon-only[class*="icon-"]::before, .gd-button-icon-only.gd-button-link-dimmed[class*="icon-"]::before, .gd-button-secondary::before, .gd-button-positive::before, .gd-button-negative::before, .gd-button-action::before, .gd-button-primary::after, .gd-button-link.gd-button-icon-only[class*="icon-"]::after, .gd-button-icon-only.gd-button-link-dimmed[class*="icon-"]::after, .gd-button-secondary::after, .gd-button-positive::after, .gd-button-negative::after, .gd-button-action::after { position: absolute; top: 50%; height: 20px; line-height: 20px; color: #b0beca; transform: translateY(-50%); font-size: 18px; text-align: center; -moz-transition-property: color; -webkit-transition-property: color; transition-property: color; -moz-transition-duration: 0.25s; -webkit-transition-duration: 0.25s; transition-duration: 0.25s; -moz-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; } .gd-button-primary::before, .gd-button-link.gd-button-icon-only[class*="icon-"]::before, .gd-button-icon-only.gd-button-link-dimmed[class*="icon-"]::before, .gd-button-secondary::before, .gd-button-positive::before, .gd-button-negative::before, .gd-button-action::before { left: 10px; margin-right: 0.5em; } .gd-button-primary::after, .gd-button-link.gd-button-icon-only[class*="icon-"]::after, .gd-button-icon-only.gd-button-link-dimmed[class*="icon-"]::after, .gd-button-secondary::after, .gd-button-positive::after, .gd-button-negative::after, .gd-button-action::after { right: 7px; margin-left: 0.5em; } .gd-button-primary .gd-button-text, .gd-button-link.gd-button-icon-only[class*="icon-"] .gd-button-text, .gd-button-icon-only.gd-button-link-dimmed[class*="icon-"] .gd-button-text, .gd-button-secondary .gd-button-text, .gd-button-positive .gd-button-text, .gd-button-negative .gd-button-text, .gd-button-action .gd-button-text, .gd-button-primary .gd-button-icon, .gd-button-link.gd-button-icon-only[class*="icon-"] .gd-button-icon, .gd-button-icon-only.gd-button-link-dimmed[class*="icon-"] .gd-button-icon, .gd-button-secondary .gd-button-icon, .gd-button-positive .gd-button-icon, .gd-button-negative .gd-button-icon, .gd-button-action .gd-button-icon { position: relative; display: block; justify-content: space-between; align-items: center; } .gd-button-primary .gd-button-text, .gd-button-link.gd-button-icon-only[class*="icon-"] .gd-button-text, .gd-button-icon-only.gd-button-link-dimmed[class*="icon-"] .gd-button-text, .gd-button-secondary .gd-button-text, .gd-button-positive .gd-button-text, .gd-button-negative .gd-button-text, .gd-button-action .gd-button-text { top: 1px; flex: 1 1 auto; overflow: hidden; width: 100%; text-overflow: ellipsis; } .gd-button-primary .gd-button-icon, .gd-button-link.gd-button-icon-only[class*="icon-"] .gd-button-icon, .gd-button-icon-only.gd-button-link-dimmed[class*="icon-"] .gd-button-icon, .gd-button-secondary .gd-button-icon, .gd-button-positive .gd-button-icon, .gd-button-negative .gd-button-icon, .gd-button-action .gd-button-icon { flex: 0 0 auto; width: 18px; height: 18px; margin: 0 0.5em; line-height: 18px; color: #b0beca; font-size: 18px; text-align: center; text-decoration: none; background-size: contain; background-repeat: no-repeat; background-position: center; } .gd-button-primary .gd-button-icon::before, .gd-button-link.gd-button-icon-only[class*="icon-"] .gd-button-icon::before, .gd-button-icon-only.gd-button-link-dimmed[class*="icon-"] .gd-button-icon::before, .gd-button-secondary .gd-button-icon::before, .gd-button-positive .gd-button-icon::before, .gd-button-negative .gd-button-icon::before, .gd-button-action .gd-button-icon::before, .gd-button-primary .gd-button-icon::after, .gd-button-link.gd-button-icon-only[class*="icon-"] .gd-button-icon::after, .gd-button-icon-only.gd-button-link-dimmed[class*="icon-"] .gd-button-icon::after, .gd-button-secondary .gd-button-icon::after, .gd-button-positive .gd-button-icon::after, .gd-button-negative .gd-button-icon::after, .gd-button-action .gd-button-icon::after { color: inherit; -moz-transition-property: color; -webkit-transition-property: color; transition-property: color; -moz-transition-duration: 0.25s; -webkit-transition-duration: 0.25s; transition-duration: 0.25s; -moz-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; } .gd-button-primary:not(.gd-button-link):not(.gd-button-link-dimmed) .gd-button-icon:first-child, .gd-button-link.gd-button-icon-only:not(.gd-button-link):not(.gd-button-link-dimmed)[class*="icon-"] .gd-button-icon:first-child, .gd-button-icon-only.gd-button-link-dimmed:not(.gd-button-link):not(.gd-button-link-dimmed)[class*="icon-"] .gd-button-icon:first-child, .gd-button-secondary:not(.gd-button-link):not(.gd-button-link-dimmed) .gd-button-icon:first-child, .gd-button-positive:not(.gd-button-link):not(.gd-button-link-dimmed) .gd-button-icon:first-child, .gd-button-negative:not(.gd-button-link):not(.gd-button-link-dimmed) .gd-button-icon:first-child, .gd-button-action:not(.gd-button-link):not(.gd-button-link-dimmed) .gd-button-icon:first-child { margin-left: -4px; } .gd-button-primary:not(.gd-button-link):not(.gd-button-link-dimmed) .gd-button-icon:last-child, .gd-button-link.gd-button-icon-only:not(.gd-button-link):not(.gd-button-link-dimmed)[class*="icon-"] .gd-button-icon:last-child, .gd-button-icon-only.gd-button-link-dimmed:not(.gd-button-link):not(.gd-button-link-dimmed)[class*="icon-"] .gd-button-icon:last-child, .gd-button-secondary:not(.gd-button-link):not(.gd-button-link-dimmed) .gd-button-icon:last-child, .gd-button-positive:not(.gd-button-link):not(.gd-button-link-dimmed) .gd-button-icon:last-child, .gd-button-negative:not(.gd-button-link):not(.gd-button-link-dimmed) .gd-button-icon:last-child, .gd-button-action:not(.gd-button-link):not(.gd-button-link-dimmed) .gd-button-icon:last-child { margin-right: -4px; } .gd-button-primary:not(.gd-button-link):not(.gd-button-link-dimmed) .gd-button-icon:only-child, .gd-button-link.gd-button-icon-only:not(.gd-button-link):not(.gd-button-link-dimmed)[class*="icon-"] .gd-button-icon:only-child, .gd-button-icon-only.gd-button-link-dimmed:not(.gd-button-link):not(.gd-button-link-dimmed)[class*="icon-"] .gd-button-icon:only-child, .gd-button-secondary:not(.gd-button-link):not(.gd-button-link-dimmed) .gd-button-icon:only-child, .gd-button-positive:not(.gd-button-link):not(.gd-button-link-dimmed) .gd-button-icon:only-child, .gd-button-negative:not(.gd-button-link):not(.gd-button-link-dimmed) .gd-button-icon:only-child, .gd-button-action:not(.gd-button-link):not(.gd-button-link-dimmed) .gd-button-icon:only-child { width: 19px; height: 17px; line-height: 17px; margin-right: -9px; margin-left: -9px; font-size: 16px; } .gd-button-primary:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active::before, .gd-button-link.gd-button-icon-only[class*="icon-"]:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active::before, .gd-button-icon-only.gd-button-link-dimmed[class*="icon-"]:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active::before, .gd-button-secondary:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active::before, .gd-button-positive:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active::before, .gd-button-negative:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active::before, .gd-button-action:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active::before, .gd-button-primary:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active::after, .gd-button-link.gd-button-icon-only[class*="icon-"]:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active::after, .gd-button-icon-only.gd-button-link-dimmed[class*="icon-"]:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active::after, .gd-button-secondary:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active::after, .gd-button-positive:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active::after, .gd-button-negative:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active::after, .gd-button-action:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active::after { top: calc(50% + 1px); } .gd-button-primary:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active .gd-button-text, .gd-button-link.gd-button-icon-only:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active[class*="icon-"] .gd-button-text, .gd-button-icon-only.gd-button-link-dimmed:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active[class*="icon-"] .gd-button-text, .gd-button-secondary:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active .gd-button-text, .gd-button-positive:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active .gd-button-text, .gd-button-negative:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active .gd-button-text, .gd-button-action:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active .gd-button-text { top: 2px; } .gd-button-primary:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active .gd-button-icon, .gd-button-link.gd-button-icon-only:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active[class*="icon-"] .gd-button-icon, .gd-button-icon-only.gd-button-link-dimmed:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active[class*="icon-"] .gd-button-icon, .gd-button-secondary:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active .gd-button-icon, .gd-button-positive:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active .gd-button-icon, .gd-button-negative:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active .gd-button-icon, .gd-button-action:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed):active .gd-button-icon { margin-top: 2px; } .gd-button-primary:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed) .gd-button-icon:only-child, .gd-button-link.gd-button-icon-only:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed)[class*="icon-"] .gd-button-icon:only-child, .gd-button-icon-only.gd-button-link-dimmed:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed)[class*="icon-"] .gd-button-icon:only-child, .gd-button-secondary:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed) .gd-button-icon:only-child, .gd-button-positive:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed) .gd-button-icon:only-child, .gd-button-negative:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed) .gd-button-icon:only-child, .gd-button-action:not(.disabled):not(.gd-button-link):not(.gd-button-link-dimmed) .gd-button-icon:only-child { color: #778491; } .gd-button-primary:hover::before, .gd-button-link.gd-button-icon-only[class*="icon-"]:hover::before, .gd-button-icon-only.gd-button-link-dimmed[class*="icon-"]:hover::before, .gd-button-secondary:hover::before, .gd-button-positive:hover::before, .gd-button-negative:hover::before, .gd-button-action:hover::before, .gd-button-primary:hover::after, .gd-button-link.gd-button-icon-only[class*="icon-"]:hover::after, .gd-button-icon-only.gd-button-link-dimmed[class*="icon-"]:hover::after, .gd-button-secondary:hover::after, .gd-button-positive:hover::after, .gd-button-negative:hover::after, .gd-button-action:hover::after, .gd-button-primary:hover .gd-button-icon, .gd-button-link.gd-button-icon-only:hover[class*="icon-"] .gd-button-icon, .gd-button-icon-only.gd-button-link-dimmed:hover[class*="icon-"] .gd-button-icon, .gd-button-secondary:hover .gd-button-icon, .gd-button-positive:hover .gd-button-icon, .gd-button-negative:hover .gd-button-icon, .gd-button-action:hover .gd-button-icon { color: #14b2e2; } .gd-button-primary[class*="icon-"], .gd-button-link.gd-button-icon-only[class*="icon-"], .gd-button-icon-only.gd-button-link-dimmed[class*="icon-"], .gd-button-secondary[class*="icon-"], .gd-button-positive[class*="icon-"], .gd-button-negative[class*="icon-"], .gd-button-action[class*="icon-"] { padding-left: 37px; } .gd-button-primary[class*="icon-"].icon-right, .gd-button-link.gd-button-icon-only[class*="icon-"].icon-right, .gd-button-icon-only.gd-button-link-dimmed[class*="icon-"].icon-right, .gd-button-secondary[class*="icon-"].icon-right, .gd-button-positive[class*="icon-"].icon-right, .gd-button-negative[class*="icon-"].icon-right, .gd-button-action[class*="icon-"].icon-right { padding-left: 11px; padding-right: 32px; } .gd-button-primary .ss-icon, .gd-button-link.gd-button-icon-only[class*="icon-"] .ss-icon, .gd-button-icon-only.gd-button-link-dimmed[class*="icon-"] .ss-icon, .gd-button-secondary .ss-icon, .gd-button-positive .ss-icon, .gd-button-negative .ss-icon, .gd-button-action .ss-icon { vertical-align: middle; } /* Basic button variants ========================================================================== */ /* disable max length */ /* stylelint-disable max-line-length */ .gd-button + .gd-button { margin-left: 10px; } .gd-button-primary, .gd-button-link.gd-button-icon-only[class*="icon-"], .gd-button-icon-only.gd-button-link-dimmed[class*="icon-"], .gd-button-secondary { box-shadow: 0 1px 1px 0 rgba(20, 56, 93, 0.15); color: #778491; background: #fcfcfd; border-color: #ccd8e2; } .gd-button-primary:hover, .gd-button-link.gd-button-icon-only:hover[class*="icon-"], .gd-button-icon-only.gd-button-link-dimmed:hover[class*="icon-"], .gd-button-secondary:hover { box-shadow: 0 1px 1px 0 rgba(20, 56, 93, 0.15), inset 0 -1px 0 0 rgba(177, 193, 209, 0.6); color: #464e56; background: #f5f8fa; border-color: rgba(31, 52, 73, 0.2); } .gd-button-primary:focus, .gd-button-link.gd-button-icon-only:focus[class*="icon-"], .gd-button-icon-only.gd-button-link-dimmed:focus[class*="icon-"], .gd-button-primary.is-focus, .is-focus.gd-button-link.gd-button-icon-only[class*="icon-"], .is-focus.gd-button-icon-only.gd-button-link-dimmed[class*="icon-"], .gd-button-secondary:focus, .gd-button-secondary.is-focus { box-shadow: 0 0 3px 1px rgba(69, 199, 239, 0), 0 1px 2px 0 rgba(20, 56, 93, 0.15), inset 0 -1px 0 0 rgba(177, 193, 209, 0.6); border-color: rgba(20, 178, 226, 0.75); } .gd-button-primary:active, .gd-button-link.gd-button-icon-only:active[class*="icon-"], .gd-button-icon-only.gd-button-link-dimmed:active[class*="icon-"], .gd-button-primary.is-active, .is-active.gd-button-link.gd-button-icon-only[class*="icon-"], .is-active.gd-button-icon-only.gd-button-link-dimmed[class*="icon-"], .gd-button-secondary:active, .gd-button-secondary.is-active { box-shadow: inset 0 1px 0 0 rgba(177, 193, 209, 0.65); color: #464e56; border-color: #b1c1d1; background: #ecf0f5; /* Old browsers */ background-image: -webkit-linear-gradient(top, #dee6ef, #ecf0f5); /* Chrome 10+, Saf5.1+ */ background-image: -moz-linear-gradient(top, #dee6ef, #ecf0f5); /* FF3.6 */ background-image: -ms-linear-gradient(top, #dee6ef, #ecf0f5); /* IE10 */ background-image: linear-gradient(to top, #dee6ef, #ecf0f5); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#FFDEE6EF', EndColorStr='#FFECF0F5'); /* IE6-IE9 */ } .gd-button-positive, .gd-button-negative, .gd-button-action { border: 1px solid rgba(0, 0, 0, 0.1); color: #fff; } .gd-button-positive[class*="icon-"], .gd-button-positive .gd-button-icon, .gd-button-negative[class*="icon-"], .gd-button-negative .gd-button-icon, .gd-button-action[class*="icon-"], .gd-button-action .gd-button-icon { color: #fff; } .gd-button-positive[class*="icon-"]::before, .gd-button-positive[class*="icon-"]::after, .gd-button-positive[class*="icon-"] .gd-button-icon, .gd-button-positive[class*="icon-"]:hover::before, .gd-button-positive[class*="icon-"]:hover::after, .gd-button-positive[class*="icon-"]:hover .gd-button-icon, .gd-button-positive .gd-button-icon::before, .gd-button-positive .gd-button-icon::after, .gd-button-positive .gd-button-icon .gd-button-icon, .gd-button-positive .gd-button-icon:hover::before, .gd-button-positive .gd-button-icon:hover::after, .gd-button-positive .gd-button-icon:hover .gd-button-icon, .gd-button-negative[class*="icon-"]::before, .gd-button-negative[class*="icon-"]::after, .gd-button-negative[class*="icon-"] .gd-button-icon, .gd-button-negative[class*="icon-"]:hover::before, .gd-button-negative[class*="icon-"]:hover::after, .gd-button-negative[class*="icon-"]:hover .gd-button-icon, .gd-button-negative .gd-button-icon::before, .gd-button-negative .gd-button-icon::after, .gd-button-negative .gd-button-icon .gd-button-icon, .gd-button-negative .gd-button-icon:hover::before, .gd-button-negative .gd-button-icon:hover::after, .gd-button-negative .gd-button-icon:hover .gd-button-icon, .gd-button-action[class*="icon-"]::before, .gd-button-action[class*="icon-"]::after, .gd-button-action[class*="icon-"] .gd-button-icon, .gd-button-action[class*="icon-"]:hover::before, .gd-button-action[class*="icon-"]:hover::after, .gd-button-action[class*="icon-"]:hover .gd-button-icon, .gd-button-action .gd-button-icon::before, .gd-button-action .gd-button-icon::after, .gd-button-action .gd-button-icon .gd-button-icon, .gd-button-action .gd-button-icon:hover::before, .gd-button-action .gd-button-icon:hover::after, .gd-button-action .gd-button-icon:hover .gd-button-icon { color: #fff; } .gd-button-positive, .gd-button-negative, .gd-button-action, .gd-button-primary, .gd-button-link.gd-button-icon-only[class*="icon-"], .gd-button-icon-only.gd-button-link-dimmed[class*="icon-"] { font-weight: 700; } .gd-button-positive { box-shadow: 0 1px 1px 0 rgba(20, 56, 93, 0.09); background: #00c18d; } .gd-button-positive:hover { box-shadow: 0 1px 1px 0 rgba(20, 56, 93, 0.15), inset 0 -1px 0 0 rgba(0, 0, 0, 0.15); background: #00a277; } .gd-button-positive:focus { box-shadow: 0 0 3px 1px rgba(0, 224, 163, 0.5), 0 1px 1px 0 rgba(20, 56, 93, 0.15), inset 0 -2px 0 0 rgba(0, 0, 0, 0.15); } .gd-button-positive:active, .gd-button-positive.is-active { box-shadow: inset 0 2px 0 0 rgba(0, 0, 0, 0.15); background: #00a277; /* Old browsers */ background-image: -webkit-linear-gradient(top, #008460, #00a277); /* Chrome 10+, Saf5.1+ */ background-image: -moz-linear-gradient(top, #008460, #00a277); /* FF3.6 */ background-image: -ms-linear-gradient(top, #008460, #00a277); /* IE10 */ background-image: linear-gradient(to top, #008460, #00a277); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#FF008460', EndColorStr='#FF00A277'); /* IE6-IE9 */ } .gd-button-negative { box-shadow: 0 1px 0 0 rgba(20, 56, 93, 0.09); background: #e54d42; } .gd-button-negative:hover { box-shadow: 0 1px 1px 0 rgba(20, 56, 93, 0.15), inset 0 -1px 0 0 rgba(0, 0, 0, 0.15); background: #d62a1e; } .gd-button-negative:focus { box-shadow: 0 0 3px 1px rgba(235, 119, 111, 0.6), 0 1px 1px 0 rgba(20, 56, 93, 0.15), inset 0 -1px 0 0 rgba(0, 0, 0, 0.15); } .gd-button-negative:active, .gd-button-negative.is-active { box-shadow: inset 0 2px 0 0 rgba(0, 0, 0, 0.15); background: #d62a1e; /* Old browsers */ background-image: -webkit-linear-gradient(top, #aa2117, #d62a1e); /* Chrome 10+, Saf5.1+ */ background-image: -moz-linear-gradient(top, #aa2117, #d62a1e); /* FF3.6 */ background-image: -ms-linear-gradient(top, #aa2117, #d62a1e); /* IE10 */ background-image: linear-gradient(to top, #aa2117, #d62a1e); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#FFAA2117', EndColorStr='#FFD62A1E'); /* IE6-IE9 */ } .gd-button-action { box-shadow: 1px 1px 0 rgba(20, 56, 93, 0.09); background: #14b2e2; } .gd-button-action:hover { box-shadow: 0 1px 1px 0 rgba(20, 56, 93, 0.15), inset 0 -1px 0 0 rgba(0, 0, 0, 0.15); background: #129cc6; } .gd-button-action:focus { box-shadow: 0 0 3px 1px rgba(41, 190, 236, 0.6), 0 1px 1px 0 rgba(20, 56, 93, 0.15), inset 0 -1px 0 0 rgba(0, 0, 0, 0.15); } .gd-button-action:active, .gd-button-action.is-active { box-shadow: inset 0 2px 0 0 rgba(0, 0, 0, 0.15); background: #129cc6; /* Old browsers */ background-image: -webkit-linear-gradient(top, #0f86aa, #129cc6); /* Chrome 10+, Saf5.1+ */ background-image: -moz-linear-gradient(top, #0f86aa, #129cc6); /* FF3.6 */ background-image: -ms-linear-gradient(top, #0f86aa, #129cc6); /* IE10 */ background-image: linear-gradient(to top, #0f86aa, #129cc6); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#FF0F86AA', EndColorStr='#FF129CC6'); /* IE6-IE9 */ } /* Button links ========================================================================== */ .gd-button-link[class*="icon-"], .gd-button-link-dimmed[class*="icon-"] { position: relative; padding-left: 32px; } .gd-button-link[class*="icon-"].icon-right, .gd-button-link-dimmed[class*="icon-"].icon-right { padding-left: 11px; padding-right: 30px; } .gd-button-link[class*="icon-"].icon-right::after, .gd-button-link-dimmed[class*="icon-"].icon-right::after { position: absolute; right: 5px; font-size: 18px; } .gd-button-link, .gd-button-link-dimmed { box-sizing: border-box; display: inline-flex; padding: 0 6px; border: 1px solid transparent; font: 400 14px/30px avenir, "Helvetica Neue", arial, sans-serif; vertical-align: middle; color: #14b2e2; background: none; cursor: pointer; -moz-transition-property: all; -webkit-transition-property: all; transition-property: all; -moz-transition-duration: 0.25s; -webkit-transition-duration: 0.25s; transition-duration: 0.25s; -moz-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; } .gd-button-link > span, .gd-button-link-dimmed > span { text-decoration: none; } .gd-button-link::before, .gd-button-link-dimmed::before, .gd-button-link::after, .gd-button-link-dimmed::after { position: absolute; top: 50%; width: 20px; transform: translateY(-50%); font-size: 18px; text-align: center; -moz-transition-property: color; -webkit-transition-property: color; transition-property: color; -moz-transition-duration: 0.25s; -webkit-transition-duration: 0.25s; transition-duration: 0.25s; -moz-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; } .gd-button-link::before, .gd-button-link-dimmed::before, .gd-button-link::after, .gd-button-link-dimmed::after, .gd-button-link .gd-button-icon, .gd-button-link-dimmed .gd-button-icon { color: #14b2e2; } .gd-button-link::before, .gd-button-link-dimmed::before { left: 6px; } .gd-button-link::after, .gd-button-link-dimmed::after { right: 6px; } .gd-button-link .gd-button-icon, .gd-button-link-dimmed .gd-button-icon { width: 20px; margin: 0 6px; font-size: 18px; } .gd-button-link .gd-button-icon:first-child, .gd-button-link-dimmed .gd-button-icon:first-child { margin-left: 0; } .gd-button-link .gd-button-icon:last-child, .gd-button-link-dimmed .gd-button-icon:last-child { margin-right: 0; } .gd-button-link .gd-button-icon:only-child, .gd-button-link-dimmed .gd-button-icon:only-child { position: relative; left: -3px; } .gd-button-link:hover, .gd-button-link-dimmed:hover, .gd-button-link:active, .gd-button-link-dimmed:active, .gd-button-link.is-active, .is-active.gd-button-link-dimmed { color: #464e56; } .gd-button-link:hover::after, .gd-button-link-dimmed:hover::after, .gd-button-link:hover::before, .gd-button-link-dimmed:hover::before, .gd-button-link:hover .gd-button-icon, .gd-button-link-dimmed:hover .gd-button-icon, .gd-button-link:active::after, .gd-button-link-dimmed:active::after, .gd-button-link:active::before, .gd-button-link-dimmed:active::before, .gd-button-link:active .gd-button-icon, .gd-button-link-dimmed:active .gd-button-icon, .gd-button-link.is-active::after, .is-active.gd-button-link-dimmed::after, .gd-button-link.is-active::before, .is-active.gd-button-link-dimmed::before, .gd-button-link.is-active .gd-button-icon, .is-active.gd-button-link-dimmed .gd-button-icon { color: #14b2e2; } .gd-button-link:focus, .gd-button-link-dimmed:focus { box-shadow: 0 0 3px 0 rgba(20, 178, 226, 0.2); color: #14b2e2; border-color: rgba(20, 178, 226, 0.3); border-radius: 2px; } .gd-button-link:hover .gd-button-text, .gd-button-link-dimmed:hover .gd-button-text, .gd-button-link:focus .gd-button-text, .gd-button-link-dimmed:focus .gd-button-text, .gd-button-link:active .gd-button-text, .gd-button-link-dimmed:active .gd-button-text, .gd-button-link.is-active .gd-button-text, .is-active.gd-button-link-dimmed .gd-button-text { text-decoration: underline; } .gd-button-link-dimmed { color: #778491; } .gd-button-link-dimmed::before, .gd-button-link-dimmed::after, .gd-button-link-dimmed .gd-button-icon { color: #b0beca; } .gd-button-link-dimmed.is-active, .gd-button-link-dimmed:hover, .gd-button-link-dimmed:focus, .gd-button-link-dimmed:active { color: #000; } .gd-button-link-dimmed .gd-button-text { text-decoration: underline; } .gd-button-link.gd-button-icon-only[class*="icon-"], .gd-button-icon-only.gd-button-link-dimmed[class*="icon-"] { width: 31px; height: 29px; line-height: 27px; } .gd-button-link.gd-button-icon-only[class*="icon-"], .gd-button-icon-only.gd-button-link-dimmed[class*="icon-"], .gd-button-link.gd-button-icon-only[class*="icon-"]:hover, .gd-button-icon-only.gd-button-link-dimmed[class*="icon-"]:hover, .gd-button-link.gd-button-icon-only[class*="icon-"]:focus, .gd-button-icon-only.gd-button-link-dimmed[class*="icon-"]:focus, .gd-button-link.gd-button-icon-only[class*="icon-"]:active, .gd-button-icon-only.gd-button-link-dimmed[class*="icon-"]:active { border: 0; box-shadow: none; background: none; padding-left: 0; } .gd-button-link.gd-button-icon-only[class*="icon-"].gd-button-small::before, .gd-button-icon-only.gd-button-link-dimmed[class*="icon-"].gd-button-small::before { font-size: 16px; } .gd-button-link.gd-button-icon-only[class*="icon-"]::before, .gd-button-icon-only.gd-button-link-dimmed[class*="icon-"]::before, .gd-button-link.gd-button-icon-only[class*="icon-"] .gd-button-icon, .gd-button-icon-only.gd-button-link-dimmed[class*="icon-"] .gd-button-icon { color: #6d7680; } .gd-button-link.gd-button-icon-only[class*="icon-"]:active::before, .gd-button-icon-only.gd-button-link-dimmed[class*="icon-"]:active::before, .gd-button-link.gd-button-icon-only[class*="icon-"]:active .gd-button-icon, .gd-button-icon-only.gd-button-link-dimmed[class*="icon-"]:active .gd-button-icon { color: #129cc6; } .gd-button-link.gd-button-icon-only[class*="icon-"]:focus::before, .gd-button-icon-only.gd-button-link-dimmed[class*="icon-"]:focus::before, .gd-button-link.gd-button-icon-only[class*="icon-"]:focus .gd-button-icon, .gd-button-icon-only.gd-button-link-dimmed[class*="icon-"]:focus .gd-button-icon, .gd-button-link.gd-button-icon-only[class*="icon-"]:hover::before, .gd-button-icon-only.gd-button-link-dimmed[class*="icon-"]:hover::before, .gd-button-link.gd-button-icon-only[class*="icon-"]:hover .gd-button-icon, .gd-button-icon-only.gd-button-link-dimmed[class*="icon-"]:hover .gd-button-icon { color: #14b2e2; } .gd-button-link.gd-button-icon-only[class*="icon-"].disabled::before, .gd-button-icon-only.gd-button-link-dimmed[class*="icon-"].disabled::before, .gd-button-link.gd-button-icon-only[class*="icon-"].disabled .gd-button-icon, .gd-button-icon-only.gd-button-link-dimmed[class*="icon-"].disabled .gd-button-icon, .gd-button-link.gd-button-icon-only[class*="icon-"].disabled:hover::before, .gd-button-icon-only.gd-button-link-dimmed[class*="icon-"].disabled:hover::before, .gd-button-link.gd-button-icon-only[class*="icon-"].disabled:hover .gd-button-icon, .gd-button-icon-only.gd-button-link-dimmed[class*="icon-"].disabled:hover .gd-button-icon, .gd-button-link.gd-button-icon-only[class*="icon-"].disabled:focus::before, .gd-button-icon-only.gd-button-link-dimmed[class*="icon-"].disabled:focus::before, .gd-button-link.gd-button-icon-only[class*="icon-"].disabled:focus .gd-button-icon, .gd-button-icon-only.gd-button-link-dimmed[class*="icon-"].disabled:focus .gd-button-icon, .gd-button-link.gd-button-icon-only[class*="icon-"].disabled:active::before, .gd-button-icon-only.gd-button-link-dimmed[class*="icon-"].disabled:active::before, .gd-button-link.gd-button-icon-only[class*="icon-"].disabled:active .gd-button-icon, .gd-button-icon-only.gd-button-link-dimmed[class*="icon-"].disabled:active .gd-button-icon { color: #b0beca; } :not(button).gd-button-link, .gd-button-link-dimmed:not(button), :not(button).gd-button-link-dimmed { line-height: 0.8; } :not(button).gd-button-link:focus, .gd-button-link-dimmed:not(button):focus, :not(button).gd-button-link-dimmed:focus { outline: none; box-shadow: none; border-color: transparent; } .button-dropdown { font-weight: 400; } .button-dropdown::after, .button-dropdown::before, .button-dropdown .gd-button-icon { color: #94a1ad; } .button-dropdown:focus::after, .button-dropdown:focus::before, .button-dropdown:focus .gd-button-icon, .button-dropdown:hover::after, .button-dropdown:hover::before, .button-dropdown:hover .gd-button-icon, .button-dropdown:active::after, .button-dropdown:active::before, .button-dropdown:active .gd-button-icon, .button-dropdown.is-active::after, .button-dropdown.is-active::before, .button-dropdown.is-active .gd-button-icon { color: #6d7680; } /* Button sizes ========================================================================== */ .gd-button-small { height: 27px; padding: 0 11px; line-height: 25px; font-size: 12px; } .gd-button-small[class*="icon-"] { padding-left: 32px; } .gd-button-small[class*="icon-"]::before, .gd-button-small[class*="icon-"]::after { width: 18px; font-size: 15px; -moz-transition-property: color; -webkit-transition-property: color; transition-property: color; -moz-transition-duration: 0.25s; -webkit-transition-duration: 0.25s; transition-duration: 0.25s; -moz-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; } .gd-button-small[class*="icon-"]::before { left: 9px; } .gd-button-small[class*="icon-"]::after { right: 7px; } .gd-button-small[class*="icon-"].gd-button-icon-only { height: 27px; } .gd-button-small[class*="icon-"].gd-button-icon-only::before { width: auto; } .gd-button-small .gd-button-icon { width: 16px; height: 16px; line-height: 16px; font-size: 16px; } .gd-button-important { height: 38px; padding: 7px 19px; line-height: 22px; font-size: 16px; } .gd-button.gd-button-icon-only { width: 31px; height: 29px; line-height: 27px; color: #778491; padding-left: 0; } .gd-button.gd-button-icon-only::before { right: 0; left: 0; margin: 0; padding: 0; color: #778491; font-size: 16px; } .gd-button.gd-button-icon-only:hover::before, .gd-button.gd-button-icon-only:hover .gd-button-icon { color: #14b2e2; } /* Button states ========================================================================== */ .gd-button.disabled, .gd-button.disabled:hover, .gd-button.disabled:focus, .gd-button.disabled:active { box-shadow: none; background: transparent; cursor: default; border-color: transparent; text-decoration: none; } .gd-button-primary.disabled, .disabled.gd-button-link.gd-button-icon-only[class*="icon-"], .disabled.gd-button-icon-only.gd-button-link-dimmed[class*="icon-"], .gd-button-secondary.disabled { cursor: default; } .gd-button-primary.disabled, .disabled.gd-button-link.gd-button-icon-only[class*="icon-"], .disabled.gd-button-icon-only.gd-button-link-dimmed[class*="icon-"], .gd-button-primary.disabled:hover, .disabled.gd-button-link.gd-button-icon-only:hover[class*="icon-"], .disabled.gd-button-icon-only.gd-button-link-dimmed:hover[class*="icon-"], .gd-button-primary.disabled:focus, .disabled.gd-button-link.gd-button-icon-only:focus[class*="icon-"], .disabled.gd-button-icon-only.gd-button-link-dimmed:focus[class*="icon-"], .gd-button-primary.disabled:active, .disabled.gd-button-link.gd-button-icon-only:active[class*="icon-"], .disabled.gd-button-icon-only.gd-button-link-dimmed:active[class*="icon-"], .gd-button-secondary.disabled, .gd-button-secondary.disabled:hover, .gd-button-secondary.disabled:focus, .gd-button-secondary.disabled:active { color: #b0beca; background: rgba(252, 252, 253, 0.3); border-color: rgba(210, 219, 227, 0.75); } .gd-button-primary.disabled::before, .disabled.gd-button-link.gd-button-icon-only[class*="icon-"]::before, .disabled.gd-button-icon-only.gd-button-link-dimmed[class*="icon-"]::before, .gd-button-primary.disabled::after, .disabled.gd-button-link.gd-button-icon-only[class*="icon-"]::after, .disabled.gd-button-icon-only.gd-button-link-dimmed[class*="icon-"]::after, .gd-button-primary.disabled .gd-button-icon, .disabled.gd-button-link.gd-button-icon-only[class*="icon-"] .gd-button-icon, .disabled.gd-button-icon-only.gd-button-link-dimmed[class*="icon-"] .gd-button-icon, .gd-button-primary.disabled:hover::before, .disabled.gd-button-link.gd-button-icon-only[class*="icon-"]:hover::before, .disabled.gd-button-icon-only.gd-button-link-dimmed[class*="icon-"]:hover::before, .gd-button-primary.disabled:hover::after, .disabled.gd-button-link.gd-button-icon-only[class*="icon-"]:hover::after, .disabled.gd-button-icon-only.gd-button-link-dimmed[class*="icon-"]:hover::after, .gd-button-primary.disabled:hover .gd-button-icon, .disabled.gd-button-link.gd-button-icon-only:hover[class*="icon-"] .gd-button-icon, .disabled.gd-button-icon-only.gd-button-link-dimmed:hover[class*="icon-"] .gd-button-icon, .gd-button-primary.disabled:focus::before, .disabled.gd-button-link.gd-button-icon-only[class*="icon-"]:focus::before, .disabled.gd-button-icon-only.gd-button-link-dimmed[class*="icon-"]:focus::before, .gd-button-primary.disabled:focus::after, .disabled.gd-button-link.gd-button-icon-only[class*="icon-"]:focus::after, .disabled.gd-button-icon-only.gd-button-link-dimmed[class*="icon-"]:focus::after, .gd-button-primary.disabled:focus .gd-button-icon, .disabled.gd-button-link.gd-button-icon-only:focus[class*="icon-"] .gd-button-icon, .disabled.gd-button-icon-only.gd-button-link-dimmed:focus[class*="icon-"] .gd-button-icon, .gd-button-primary.disabled:active::before, .disabled.gd-button-link.gd-button-icon-only[class*="icon-"]:active::before, .disabled.gd-button-icon-only.gd-button-link-dimmed[class*="icon-"]:active::before, .gd-button-primary.disabled:active::after, .disabled.gd-button-link.gd-button-icon-only[class*="icon-"]:active::after, .disabled.gd-button-icon-only.gd-button-link-dimmed[class*="icon-"]:active::after, .gd-button-primary.disabled:active .gd-button-icon, .disabled.gd-button-link.gd-button-icon-only:active[class*="icon-"] .gd-button-icon, .disabled.gd-button-icon-only.gd-button-link-dimmed:active[class*="icon-"] .gd-button-icon, .gd-button-secondary.disabled::before, .gd-button-secondary.disabled::after, .gd-button-secondary.disabled .gd-button-icon, .gd-button-secondary.disabled:hover::before, .gd-button-secondary.disabled:hover::after, .gd-button-secondary.disabled:hover .gd-button-icon, .gd-button-secondary.disabled:focus::before, .gd-button-secondary.disabled:focus::after, .gd-button-secondary.disabled:focus .gd-button-icon, .gd-button-secondary.disabled:active::before, .gd-button-secondary.disabled:active::after, .gd-button-secondary.disabled:active .gd-button-icon { color: #b0beca; } .gd-button-positive.disabled { cursor: default; } .gd-button-positive.disabled, .gd-button-positive.disabled:hover, .gd-button-positive.disabled:focus, .gd-button-positive.disabled:active { color: #fff; background: rgba(0, 224, 163, 0.5); } .gd-button-positive.disabled::before, .gd-button-positive.disabled::after, .gd-button-positive.disabled .gd-button-icon, .gd-button-positive.disabled:hover::before, .gd-button-positive.disabled:hover::after, .gd-button-positive.disabled:hover .gd-button-icon, .gd-button-positive.disabled:focus::before, .gd-button-positive.disabled:focus::after, .gd-button-positive.disabled:focus .gd-button-icon, .gd-button-positive.disabled:active::before, .gd-button-positive.disabled:active::after, .gd-button-positive.disabled:active .gd-button-icon { color: #fff; } .gd-button-negative.disabled { cursor: default; } .gd-button-negative.disabled, .gd-button-negative.disabled:hover, .gd-button-negative.disabled:focus, .gd-button-negative.disabled:active { color: #fff; background: rgba(241, 161, 156, 0.6); } .gd-button-negative.disabled::before, .gd-button-negative.disabled::after, .gd-button-negative.disabled .gd-button-icon, .gd-button-negative.disabled:hover::before, .gd-button-negative.disabled:hover::after, .gd-button-negative.disabled:hover .gd-button-icon, .gd-button-negative.disabled:focus::before, .gd-button-negative.disabled:focus::after, .gd-button-negative.disabled:focus .gd-button-icon, .gd-button-negative.disabled:active::before, .gd-button-negative.disabled:active::after, .gd-button-negative.disabled:active .gd-button-icon { color: #fff; } .gd-button-action.disabled { cursor: default; } .gd-button-action.disabled, .gd-button-action.disabled:hover, .gd-button-action.disabled:focus, .gd-button-action.disabled:active { color: #fff; background: rgba(69, 199, 239, 0.6); -ms-filter: progid:DXImageTransform.Microsoft.gradient(enabled=false) ""; filter: progid:DXImageTransform.Microsoft.gradient(enabled=false) ""; } .gd-button-action.disabled::before, .gd-button-action.disabled::after, .gd-button-action.disabled .gd-button-icon, .gd-button-action.disabled:hover::before, .gd-button-action.disabled:hover::after, .gd-button-action.disabled:hover .gd-button-icon, .gd-button-action.disabled:focus::before, .gd-button-action.disabled:focus::after, .gd-button-action.disabled:focus .gd-button-icon, .gd-button-action.disabled:active::before, .gd-button-action.disabled:active::after, .gd-button-action.disabled:active .gd-button-icon { color: #fff; } .gd-button-link.disabled, .disabled.gd-button-link-dimmed { cursor: default; } .gd-button-link.disabled, .disabled.gd-button-link-dimmed, .gd-button-link.disabled:hover, .disabled.gd-button-link-dimmed:hover, .gd-button-link.disabled:focus, .disabled.gd-button-link-dimmed:focus, .gd-button-link.disabled:active, .disabled.gd-button-link-dimmed:active { color: #ccd8e2; border-color: transparent; } .gd-button-link.disabled > span, .disabled.gd-button-link-dimmed > span, .gd-button-link.disabled:hover > span, .disabled.gd-button-link-dimmed:hover > span, .gd-button-link.disabled:focus > span, .disabled.gd-button-link-dimmed:focus > span, .gd-button-link.disabled:active > span, .disabled.gd-button-link-dimmed:active > span { text-decoration: none; } .gd-button-link.disabled::before, .disabled.gd-button-link-dimmed::before, .gd-button-link.disabled::after, .disabled.gd-button-link-dimmed::after, .gd-button-link.disabled .gd-button-icon, .disabled.gd-button-link-dimmed .gd-button-icon { color: #ccd8e2; } .gd-button-link.gd-button-icon-only[class*="icon-"]::before, .gd-button-icon-only.gd-button-link-dimmed[class*="icon-"]::before, .gd-button-link.gd-button-icon-only[class*="icon-"]::after, .gd-button-icon-only.gd-button-link-dimmed[class*="icon-"]::after { right: 0; left: 0; margin: 0 auto; padding: 0; } .gd-button-group .gd-button { position: relative; z-index: 1; margin: 0 -1px 0 0; border-radius: 0; } .gd-button-group .gd-button:focus { z-index: 2; } .gd-button-group .gd-button:not(:focus) { box-shadow: none; } .gd-button-group > .gd-button:first-child, .gd-button-group > *:not(.gd-button):first-child .gd-button { border-radius: 3px 0 0 3px; } .gd-button-group > .gd-button:last-child, .gd-button-group > *:not(.gd-button):last-child .gd-button { margin-right: 0; border-radius: 0 3px 3px 0; } /* Alternative markup support ========================================================================== */ a[class*="gd-button-"] { box-sizing: border-box; display: inline-block; } a[class*="gd-button-"], a[class*="gd-button-"]:hover, a[class*="gd-button-"]:focus { text-decoration: none; } a[class*="gd-button-"], a[class*="gd-button-"]:active { outline: none; } a[class*="gd-button-"] .gd-button-text { display: initial; } a.gd-button-link:hover .gd-button-text, a.gd-button-link-dimmed:ho