UNPKG

@gooddata/react-components

Version:

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

1,383 lines (1,191 loc) • 122 kB
/** * FixedDataTable v0.8.28 * * Copyright Schrodinger, LLC * All rights reserved. * * This source code is licensed under the BSD-style license found in the * LICENSE file in the root directory of this source tree. An additional grant * of patent rights can be found in the PATENTS file in the same directory. */ /** * Copyright Schrodinger, LLC * All rights reserved. * * This source code is licensed under the BSD-style license found in the * LICENSE file in the root directory of this source tree. An additional grant * of patent rights can be found in the PATENTS file in the same directory. * * @providesModule fixedDataTableCellGroupLayout */ .fixedDataTableCellGroupLayout_cellGroup { -webkit-backface-visibility: hidden; backface-visibility: hidden; left: 0; overflow: hidden; position: absolute; top: 0; white-space: nowrap; } .fixedDataTableCellGroupLayout_cellGroup > .public_fixedDataTableCell_main { display: inline-block; vertical-align: top; white-space: normal; } .fixedDataTableCellGroupLayout_cellGroupWrapper { position: absolute; top: 0; } /** * Copyright Schrodinger, LLC * All rights reserved. * * This source code is licensed under the BSD-style license found in the * LICENSE file in the root directory of this source tree. An additional grant * of patent rights can be found in the PATENTS file in the same directory. * * @providesModule fixedDataTableCellLayout */ .fixedDataTableCellLayout_main { border-right-style: solid; border-right-width: 1px; border-width: 0 1px 0 0; box-sizing: border-box; display: block; overflow: hidden; position: absolute; white-space: normal; } .fixedDataTableCellLayout_lastChild { border-width: 0 1px 1px 0; } .fixedDataTableCellLayout_alignRight { text-align: right; } .fixedDataTableCellLayout_alignCenter { text-align: center; } .fixedDataTableCellLayout_wrap1 { display: table; } .fixedDataTableCellLayout_wrap2 { display: table-row; } .fixedDataTableCellLayout_wrap3 { display: table-cell; vertical-align: middle; } .fixedDataTableCellLayout_columnResizerContainer { position: absolute; right: 0px; width: 6px; z-index: 1; } .fixedDataTableCellLayout_columnResizerContainer:hover { cursor: ew-resize; } .fixedDataTableCellLayout_columnResizerContainer:hover .fixedDataTableCellLayout_columnResizerKnob { visibility: visible; } .fixedDataTableCellLayout_columnResizerKnob { position: absolute; right: 0px; visibility: hidden; width: 4px; } /** * Copyright Schrodinger, LLC * All rights reserved. * * This source code is licensed under the BSD-style license found in the * LICENSE file in the root directory of this source tree. An additional grant * of patent rights can be found in the PATENTS file in the same directory. * * @providesModule fixedDataTableColumnResizerLineLayout */ .fixedDataTableColumnResizerLineLayout_mouseArea { cursor: ew-resize; position: absolute; right: -5px; width: 12px; } .fixedDataTableColumnResizerLineLayout_main { border-right-style: solid; border-right-width: 1px; box-sizing: border-box; position: absolute; z-index: 10; pointer-events: none; } body[dir="rtl"] .fixedDataTableColumnResizerLineLayout_main { /* the resizer line is in the wrong position in RTL with no easy fix. * Disabling is more useful than displaying it. * #167 (github) should look into this and come up with a permanent fix. */ display: none !important; } .fixedDataTableColumnResizerLineLayout_hiddenElem { display: none !important; } /** * Copyright Schrodinger, LLC * All rights reserved. * * This source code is licensed under the BSD-style license found in the * LICENSE file in the root directory of this source tree. An additional grant * of patent rights can be found in the PATENTS file in the same directory. * * @providesModule fixedDataTableLayout */ .fixedDataTableLayout_main { border-style: solid; border-width: 1px; box-sizing: border-box; overflow: hidden; position: relative; } .fixedDataTableLayout_header, .fixedDataTableLayout_hasBottomBorder { border-bottom-style: solid; border-bottom-width: 1px; } .fixedDataTableLayout_footer .public_fixedDataTableCell_main { border-top-style: solid; border-top-width: 1px; } .fixedDataTableLayout_topShadow, .fixedDataTableLayout_bottomShadow { height: 4px; left: 0; position: absolute; right: 0; z-index: 1; } .fixedDataTableLayout_bottomShadow { margin-top: -4px; } .fixedDataTableLayout_rowsContainer { overflow: hidden; position: relative; } .fixedDataTableLayout_horizontalScrollbar { bottom: 0; position: absolute; } /** * Copyright Schrodinger, LLC * All rights reserved. * * This source code is licensed under the BSD-style license found in the * LICENSE file in the root directory of this source tree. An additional grant * of patent rights can be found in the PATENTS file in the same directory. * * @providesModule fixedDataTableRowLayout */ .fixedDataTableRowLayout_main { box-sizing: border-box; overflow: hidden; position: absolute; top: 0; } .fixedDataTableRowLayout_body { left: 0; position: absolute; top: 0; } .fixedDataTableRowLayout_rowExpanded { box-sizing: border-box; left: 0; position: absolute; } .fixedDataTableRowLayout_fixedColumnsDivider { -webkit-backface-visibility: hidden; backface-visibility: hidden; border-left-style: solid; border-left-width: 1px; left: 0; position: absolute; top: 0; width: 0; } .fixedDataTableRowLayout_columnsShadow { position: absolute; width: 4px; } .fixedDataTableRowLayout_columnsRightShadow { right: 1px; } .fixedDataTableRowLayout_rowWrapper { position: absolute; top: 0; } /** * Copyright Schrodinger, LLC * All rights reserved. * * This source code is licensed under the BSD-style license found in the * LICENSE file in the root directory of this source tree. An additional grant * of patent rights can be found in the PATENTS file in the same directory. * * @providesModule ScrollbarLayout */ .ScrollbarLayout_main { box-sizing: border-box; outline: none; overflow: hidden; position: absolute; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .ScrollbarLayout_mainVertical { bottom: 0; right: 0; top: 0; width: 15px; } .ScrollbarLayout_mainHorizontal { bottom: 0; height: 15px; left: 0; transition-property: background-color height; } /* Touching the scroll-track directly makes the scroll-track bolder */ .ScrollbarLayout_mainHorizontal.public_Scrollbar_mainActive, .ScrollbarLayout_mainHorizontal:hover { height: 17px; } .ScrollbarLayout_face { left: 0; overflow: hidden; position: absolute; z-index: 1; transition-duration: 250ms; transition-timing-function: ease; transition-property: width; } /** * This selector renders the "nub" of the scrollface. The nub must * be rendered as pseudo-element so that it won't receive any UI events then * we can get the correct `event.offsetX` and `event.offsetY` from the * scrollface element while dragging it. */ .ScrollbarLayout_face:after { border-radius: 6px; content: ''; display: block; position: absolute; transition: background-color 250ms ease; } .ScrollbarLayout_faceHorizontal { bottom: 0; left: 0; top: 0; } .ScrollbarLayout_faceHorizontal:after { bottom: 4px; left: 0; top: 4px; width: 100%; } .ScrollbarLayout_faceHorizontal.public_Scrollbar_faceActive:after, .ScrollbarLayout_main:hover .ScrollbarLayout_faceHorizontal:after { bottom: calc(4px/2); } .ScrollbarLayout_faceVertical { left: 0; right: 0; top: 0; } .ScrollbarLayout_faceVertical:after { height: 100%; left: 4px; right: 4px; top: 0; } .ScrollbarLayout_main:hover .ScrollbarLayout_faceVertical:after, .ScrollbarLayout_faceVertical.public_Scrollbar_faceActive:after { left: calc(4px/2); right: calc(4px/2); } /** * Copyright Schrodinger, LLC * All rights reserved. * * This source code is licensed under the BSD-style license found in the * LICENSE file in the root directory of this source tree. An additional grant * of patent rights can be found in the PATENTS file in the same directory. * * @providesModule fixedDataTable * */ /** * Table. */ .public_fixedDataTable_main { border-color: #d3d3d3; } .public_fixedDataTable_header, .public_fixedDataTable_hasBottomBorder { border-color: #d3d3d3; } .public_fixedDataTable_header .public_fixedDataTableCell_main { font-weight: bold; } .public_fixedDataTable_header, .public_fixedDataTable_scrollbarSpacer, .public_fixedDataTable_header .public_fixedDataTableCell_main { background-color: #f6f7f8; background-image: linear-gradient(#fff, #efefef); } .public_fixedDataTable_scrollbarSpacer { position: absolute; z-index: 99; top: 0; } .public_fixedDataTable_footer .public_fixedDataTableCell_main { background-color: #f6f7f8; border-color: #d3d3d3; } .public_fixedDataTable_topShadow { background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0)); } .public_fixedDataTable_bottomShadow { background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0)); } .public_fixedDataTable_horizontalScrollbar .public_Scrollbar_mainHorizontal { background-color: #fff; } /** * Copyright Schrodinger, LLC * All rights reserved. * * This source code is licensed under the BSD-style license found in the * LICENSE file in the root directory of this source tree. An additional grant * of patent rights can be found in the PATENTS file in the same directory. * * @providesModule fixedDataTableCell */ /** * Table cell. */ .public_fixedDataTableCell_main { background-color: #fff; border-color: #d3d3d3; } .public_fixedDataTableCell_highlighted { background-color: #f4f4f4; } .public_fixedDataTableCell_cellContent { padding: 8px; } .public_fixedDataTableCell_columnResizerKnob { background-color: #0284ff; } .public_fixedDataTableCell_hasReorderHandle .public_fixedDataTableCell_cellContent { margin-left: 12px; } /** * Column reorder goodies. */ .fixedDataTableCellLayout_columnReorderContainer { border-color: #0284ff; background-color: rgba(0, 0, 0, 0.1); width: 12px; margin-right: -12px; float: left; cursor: move; } .fixedDataTableCellLayout_columnReorderContainer:after { content: '::'; position: absolute; top: 50%; left: 1px; transform: translateY(-50%); } /** * Copyright Schrodinger, LLC * All rights reserved. * * This source code is licensed under the BSD-style license found in the * LICENSE file in the root directory of this source tree. An additional grant * of patent rights can be found in the PATENTS file in the same directory. * * @providesModule fixedDataTableColumnResizerLine * */ /** * Column resizer line. */ .public_fixedDataTableColumnResizerLine_main { border-color: #0284ff; } /** * Copyright Schrodinger, LLC * All rights reserved. * * This source code is licensed under the BSD-style license found in the * LICENSE file in the root directory of this source tree. An additional grant * of patent rights can be found in the PATENTS file in the same directory. * * @providesModule fixedDataTableRow */ /** * Table row. */ .public_fixedDataTableRow_main { background-color: #fff; } .public_fixedDataTableRow_highlighted, .public_fixedDataTableRow_highlighted .public_fixedDataTableCell_main { background-color: #f6f7f8; } .public_fixedDataTableRow_fixedColumnsDivider { border-color: #d3d3d3; } .public_fixedDataTableRow_columnsShadow { background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0)); } .public_fixedDataTableRow_columnsRightShadow { transform: rotate(180deg); } /** * Copyright Schrodinger, LLC * All rights reserved. * * This source code is licensed under the BSD-style license found in the * LICENSE file in the root directory of this source tree. An additional grant * of patent rights can be found in the PATENTS file in the same directory. * * @providesModule Scrollbar * */ /** * Scrollbars. */ /* Touching the scroll-track directly makes the scroll-track bolder */ .public_Scrollbar_main.public_Scrollbar_mainActive, .public_Scrollbar_main { background-color: #fff; border-left: 1px solid #d3d3d3; } .public_Scrollbar_mainOpaque, .public_Scrollbar_mainOpaque.public_Scrollbar_mainActive, .public_Scrollbar_mainOpaque:hover { background-color: #fff; } .public_Scrollbar_face:after { background-color: #c2c2c2; } .public_Scrollbar_main:hover .public_Scrollbar_face:after, .public_Scrollbar_mainActive .public_Scrollbar_face:after, .public_Scrollbar_faceActive:after { background-color: #7d7d7d; } 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; } .gd-color-highlight { background: #14b2e2; } .gd-color-positive { background: #00c18d; } .gd-color-negative { background: #e54d42; } .gd-color-warning { background: #fada23; } .gd-color-highlight-dimmed { background: #e8f7fc; } .gd-color-positive-dimmed { background: #e6f9f4; } .gd-color-negative-dimmed { background: #fcedec; } .gd-color-warning-dimmed { background: #fef8d3; } .gd-color-light { border: 1px solid #ddd; background: #fcfcfd; } .gd-color-disabled { background: #b0beca; } .gd-color-state-blank { background: #94a1ad; } .gd-color-link { background: #6d7680; } .gd-color-text { background: #464e56; } .gd-color-dark { background: #000; } @font-face { font-family: "Indigo"; src: url("~@gooddata/goodstrap/lib/./core/styles/fonts/Indigo-v2.eot"); src: url("~@gooddata/goodstrap/lib/./core/styles/fonts/Indigo-v2.eot?#iefix") format("embedded-opentype"), url("~@gooddata/goodstrap/lib/./core/styles/fonts/Indigo-v2.woff") format("woff"), url("~@gooddata/goodstrap/lib/./core/styles/fonts/Indigo-v2.ttf") format("truetype"), url("~@gooddata/goodstrap/lib/./core/styles/fonts/Indigo-v2.svg#Indigo-v2") format("svg"); font-weight: normal; font-style: normal; } [class^="icon-"]::before, [class*=" icon-"]::before, [class^="icon-"].icon-right::after, [class*=" icon-"].icon-right::after { font-family: "Indigo", sans-serif; speak: none; font-style: normal; font-weight: normal; font-variant: normal; /* Better Font Rendering looks better in Chrome, corresponds to Sketch mockups */ -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: subpixel-antialiased; text-transform: none; } [class^="icon-"].icon-right::before, [class*=" icon-"].icon-right::before { content: ""; display: none; } .icon-trend-down::before, .icon-trend-down.icon-right::after { content: "\e600"; } .icon-trend-up::before, .icon-trend-up.icon-right::after { content: "\e601"; } .icon-user::before, .icon-user.icon-right::after { content: "\e602"; } .icon-ghost::before, .icon-ghost.icon-right::after { content: "\e603"; } .icon-redo::before, .icon-redo.icon-right::after { content: "\e604"; } .icon-undo::before, .icon-undo.icon-right::after { content: "\e605"; } .icon-pause::before, .icon-pause.icon-right::after { content: "\e606"; } .icon-users::before, .icon-users.icon-right::after { content: "\e607"; } .icon-cloud-rain::before, .icon-rain::before, .icon-cloud-rain.icon-right::after, .icon-right.icon-rain::after { content: "\e608"; } .icon-calendar::before, .icon-calendar.icon-right::after { content: "\e609"; } .icon-circle-exclamation::before, .icon-circle-exclamation.icon-right::after { content: "\e60a"; } .icon-circle-question::before, .icon-circle-question.icon-right::after { content: "\e60b"; } .icon-dropright::before, .icon-dropright.icon-right::after { content: "\e60c"; } .icon-dropdown::before, .icon-dropdown.icon-right::after { content: "\e60d"; } .icon-question::before, .icon-question.icon-right::after { content: "\e60e"; } .icon-number::before, .icon-number.icon-right::after { content: "\e60f"; } .icon-navigateleft::before, .icon-navigateleft.icon-right::after { content: "\e610"; } .icon-navigateright::before, .icon-navigateright.icon-right::after { content: "\e611"; } .icon-navigatedown::before, .icon-navigatedown.icon-right::after { content: "\e612"; } .icon-navigateup::before, .icon-navigateup.icon-right::after { content: "\e613"; } .icon-pencil::before, .icon-pencil.icon-right::after { content: "\e614"; } .icon-magic::before, .icon-magic.icon-right::after { content: "\e615"; } .icon-cloud-upload::before, .icon-uploadcloud::before, .icon-upload::before, .icon-cloud-upload.icon-right::after, .icon-right.icon-uploadcloud::after, .icon-right.icon-upload::after { content: "\e616"; } .icon-lock::before, .icon-lock.icon-right::after { content: "\e617"; } .icon-unlock::before, .icon-unlock.icon-right::after { content: "\e618"; } .icon-settings::before, .icon-config::before, .icon-settings.icon-right::after, .icon-right.icon-config::after { content: "\e619"; } .icon-trash::before, .icon-trash.icon-right::after { content: "\e61a"; } .icon-at-sign::before, .icon-at-sign.icon-right::after { content: "\e61b"; } .icon-envelope::before, .icon-envelope.icon-right::after { content: "\e61c"; } .icon-visible::before, .icon-visible.icon-right::after { content: "\e61d"; } .icon-invisible::before, .icon-invisible.icon-right::after { content: "\e61e"; } .icon-save::before, .icon-save.icon-right::after { content: "\e61f"; } .icon-printer::before, .icon-printer.icon-right::after { content: "\e620"; } .icon-file::before, .icon-file.icon-right::after { content: "\e621"; } .icon-folder::before, .icon-folder.icon-right::after { content: "\e622"; } .icon-enter::before, .icon-enter.icon-right::after { content: "\e623"; } .icon-earth::before, .icon-earth.icon-right::after { content: "\e624"; } .icon-bell::before, .icon-bell.icon-right::after { content: "\e625"; } .icon-horn::before, .icon-horn.icon-right::after { content: "\e626"; } .icon-sync::before, .icon-sync.icon-right::after { content: "\e627"; } .icon-clock::before, .icon-clock.icon-right::after { content: "\e628"; } .icon-timer::before, .icon-timer.icon-right::after { content: "\e629"; } .icon-download::before, .icon-download.icon-right::after { content: "\e62a"; } .icon-magnifier::before, .icon-search::before, .icon-magnifier.icon-right::after, .icon-right.icon-search::after { content: "\e62b"; } .icon-checkmark::before, .icon-checkmark.icon-right::after { content: "\e62c"; } .icon-cross::before, .icon-clear::before, .icon-cross.icon-right::after, .icon-right.icon-clear::after { content: "\e62d"; } .icon-chevron-up::before, .icon-chevron-up.icon-right::after { content: "\e62e"; } .icon-chevron-down::before, .icon-chevron-down.icon-right::after { content: "\e62f"; } .icon-chevron-left::before, .icon-chevron-left.icon-right::after { content: "\e630"; } .icon-chevron-right::before, .icon-chevron-right.icon-right::after { content: "\e631"; } .icon-arrow-up::before, .icon-arrow-up.icon-right::after { content: "\e632"; } .icon-arrow-down::before, .icon-arrow-down.icon-right::after { content: "\e633"; } .icon-arrow-left::before, .icon-arrow-left.icon-right::after { content: "\e634"; } .icon-arrow-right::before, .icon-arrow-right.icon-right::after { content: "\e635"; } .icon-tab::before, .icon-tab.icon-right::after { content: "\e636"; } .icon-warning::before, .icon-warning.icon-right::after { content: "\e637"; } .icon-circle-checkmark::before, .icon-circle-checkmark.icon-right::after { content: "\e638"; } .icon-circle-cross::before, .icon-circle-cross.icon-right::after { content: "\e639"; } .icon-circle-plus::before, .icon-circle-plus.icon-right::after { content: "\e63a"; } .icon-circle-minus::before, .icon-circle-minus.icon-right::after { content: "\e63b"; } .icon-filter::before, .icon-filter.icon-right::after { content: "\e63c"; } .icon-sharp::before, .icon-sharp.icon-right::after { content: "\e63d"; } .icon-money::before, .icon-money.icon-right::after { content: "\e63e"; } .icon-percent::before, .icon-percent.icon-right::after { content: "\e63f"; } .icon-plus::before, .icon-add::before, .icon-plus.icon-right::after, .icon-right.icon-add::after { content: "\e640"; } .icon-A::before, .icon-A.icon-right::after { content: "\e641"; } .icon-copyright::before, .icon-copyright.icon-right::after { content: "\e642"; } .gd-flex-wrapper { display: flex; width: 100%; height: 100%; flex-direction: column; } .gd-flex-list-container { flex: 1 1 auto; } .gd-flex-container { display: flex; justify-content: flex-start; align-items: stretch; flex-flow: row wrap; align-content: stretch; } .gd-flex-row-container { display: flex; justify-content: flex-start; align-items: stretch; height: 100%; flex-flow: column nowrap; align-content: stretch; } .gd-flex-item { flex: 0 0 auto; } .gd-flex-item-stretch { flex: 1 1 auto; overflow-y: auto; } @media only screen and (max-width: 40em) { .gd-flex-wrapper-mobile { display: flex; width: 100%; height: 100%; flex-direction: column; } .gd-flex-list-container-mobile { flex: 1 1 auto; } .gd-flex-container-mobile { display: flex; justify-content: flex-start; align-items: stretch; flex-flow: row wrap; align-content: stretch; } .gd-flex-row-container-mobile { display: flex; justify-content: flex-start; align-items: stretch; height: 100%; flex-flow: column nowrap; align-content: stretch; } .gd-flex-item-mobile { flex: 0 0 auto; } .gd-flex-item-stretch-mobile { flex: 1 1 auto; overflow-y: auto; } } /* 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-dialog, .overlay.gd-dialog { position: relative; z-index: 2; padding: 20px; outline: 0; max-width: 600px; /** * Row inside a row has negative margin. * Dialog can be inserted anywhere to the DOM, * we have to set default value to be consistent * across all applications */ } .gd-dialog .row, .overlay.gd-dialog .row { width: auto; margin-left: -15px; margin-right: -15px; } .gd-dialog .gd-dialog-close, .gd-dialog .gd-dialog-close.gd-button-link, .gd-dialog .gd-dialog-close.gd-button-link-dimmed, .overlay.gd-dialog .gd-dialog-close, .overlay.gd-dialog .gd-dialog-close.gd-button-link, .overlay.gd-dialog .gd-dialog-close.gd-button-link-dimmed { position: absolute; z-index: 5; top: 14px; right: 4px; outline: none; } .gd-dialog .gd-dialog-close::before, .gd-dialog .gd-dialog-close.gd-button-link::before, .gd-dialog .gd-dialog-close.gd-button-link-dimmed::before, .overlay.gd-dialog .gd-dialog-close::before, .overlay.gd-dialog .gd-dialog-close.gd-button-link::before, .overlay.gd-dialog .gd-dialog-close.gd-button-link-dimmed::before { color: #6d7680; } .gd-dialog .gd-dialog-close:hover, .gd-dialog .gd-dialog-close:focus, .gd-dialog .gd-dialog-close:active, .gd-dialog .gd-dialog-close.gd-button-link:hover, .gd-dialog .gd-dialog-close.gd-button-link-dimmed:hover, .gd-dialog .gd-dialog-close.gd-button-link:focus, .gd-dialog .gd-dialog-close.gd-button-link-dimmed:focus, .gd-dialog .gd-dialog-close.gd-button-link:active, .gd-dialog .gd-dialog-close.gd-button-link-dimmed:active, .overlay.gd-dialog .gd-dialog-close:hover, .overlay.gd-dialog .gd-dialog-close:focus, .overlay.gd-dialog .gd-dialog-close:active, .overlay.gd-dialog .gd-dialog-close.gd-button-link:hover, .overlay.gd-dialog .gd-dialog-close.gd-button-link-dimmed:hover, .overlay.gd-dialog .gd-dialog-close.gd-button-link:focus, .overlay.gd-dialog .gd-dialog-close.gd-button-link-dimmed:focus, .overlay.gd-dialog .gd-dialog-close.gd-button-link:active, .overlay.gd-dialog .gd-dialog-close.gd-button-link-dimmed:active { box-shadow: none; border-color: transparent; } .gd-dialog .gd-dialog-close:hover::before, .gd-dialog .gd-dialog-close:focus::before, .gd-dialog .gd-dialog-close:active::before, .gd-dialog .gd-dialog-close.gd-button-link:hover::before, .gd-dialog .gd-dialog-close.gd-button-link-dimmed:hover::before, .gd-dialog .gd-dialog-close.gd-button-link:focus::before, .gd-dialog .gd-dialog-close.gd-button-link-dimmed:focus::before, .gd-dialog .gd-dialog-close.gd-button-link:active::before, .gd-dialog .gd-dialog-close.gd-button-link-dimmed:active::before, .overlay.gd-dialog .gd-dialog-close:hover::before, .overlay.gd-dialog .gd-dialog-close:focus::before, .overlay.gd-dialog .gd-dialog-close:active::before, .overlay.gd-dialog .gd-dialog-close.gd-button-link:hover::before, .overlay.gd-dialog .gd-dialog-close.gd-button-link-dimmed:hover::before, .overlay.gd-dialog .gd-dialog-close.gd-button-link:focus::before, .overlay.gd-dialog .gd-dialog-close.gd-button-link-dimmed:focus::before, .overlay.gd-dialog .gd-dialog-close.gd-button-link:active::before, .overlay.gd-dialog .gd-dialog-close.gd-button-link-dimmed:active::before { color: #14b2e2; } .gd-dialog.gd-confirm { max-width: 350px; } .gd-dialog.gd-confirm .gd-dialog-close, .gd-dialog.gd-confirm .gd-dialog-close.gd-button-link, .gd-dialog.gd-confirm .gd-dialog-close.gd-button-link-dimmed { top: 10px; } .gd-dialog-header { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin: 0 30px 20px 0; } .gd-dialog-header h2, .gd-dialog-header h3 { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 1.2; } .gd-dialog-header h2 { color: #000; font-family: avenir, "Helvetica Neue", arial, sans-serif; font-weight: 400; font-weight: 700; line-height: 26px; font-size: 20px; } .gd-dialog-header h3 { color: #000; font-family: avenir, "Helvetica Neue", arial, sans-serif; font-weight: 400; font-weight: 400; line-height: 23px; font-size: 17px; } .gd-dialog-icon { color: #000; font-family: avenir, "Helvetica Neue", arial, sans-serif; font-weight: 400; font-weight: 700; line-height: 30px; font-size: 24px; display: inline-block; width: 35px; vertical-align: middle; } .gd-dialog-icon::before { color: #14b2e2; } .gd-dialog-section, .gd-dialog-section-separated { margin-bottom: 20px; } .gd-dialog-section + .gd-dialog-footer, .gd-dialog-section-separated + .gd-dialog-footer { margin-top: 30px; } .gd-dialog-section-separated { padding-bottom: 20px; border-bottom: 1px solid #dde4eb; } .gd-dialog-section-separated + .gd-dialog-section-separated { margin-top: 20px; } .gd-dialog-warning { width: 100%; margin-bottom: 12px; padding: 8px; border-radius: 4px; background-color: #fff3f2; color: #e54d42; } .gd-dialog-content p:first-of-type, .gd-dialog-section p:first-of-type, .gd-dialog-section-separated p:first-of-type, .gd-dialog-section-separated p:first-of-type { margin-top: 0; } .gd-dialog-content p:last-of-type, .gd-dialog-section p:last-of-type, .gd-dialog-section-separated p:last-of-type, .gd-dialog-section-separated p:last-of-type { margin-bottom: 0; } .gd-dialog-footer { margin-top: 20px; text-align: right; } /* Export Dialog ========================================================================== */ .gd-export-dialog { min-width: 350px; } .gd-export-dialog .gd-dialog-header h3 { margin: 0; padding: 0; } .gd-export-dialog h6 { margin: 0; padding: 12px 0 0; } .gd-export-dialog h6:first-child { padding-top: 0; } .gd-export-dialog .input-label-text { margin-left: 3px; } /* ========================================================================== 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 t