Permalink
Fetching contributors…
Cannot retrieve contributors at this time
| /* ---------------------------------- | |
| * Buttons | |
| * ---------------------------------- */ | |
| .button::-moz-focus-inner, | |
| .bb-button::-moz-focus-inner, | |
| button::-moz-focus-inner { | |
| border: none; | |
| outline: none; | |
| } | |
| button, | |
| .bb-button, | |
| .button { | |
| font-family: sans-serif; | |
| font-style: italic; | |
| width: 100%; | |
| height: 4rem; | |
| margin: 0 0 1rem; | |
| padding: 0 1.2rem; | |
| -moz-box-sizing: border-box; | |
| display: inline-block; | |
| vertical-align: middle; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| background: #d8d8d8; | |
| border: none; | |
| border-radius: 2rem; | |
| font-weight: normal; | |
| font-size: 1.6rem; | |
| line-height: 4rem; | |
| color: #333; | |
| text-align: center; | |
| text-decoration: none; | |
| outline: none; | |
| } | |
| /* Recommend */ | |
| button.recommend, | |
| .bb-button.recommend { | |
| background-color: #00caf2; | |
| color: #fff; | |
| } | |
| /* Danger */ | |
| button.danger, | |
| .danger.bb-button { | |
| background-color: #e51e1e; | |
| color: #fff; | |
| } | |
| /* Pressed */ | |
| button:active, | |
| .bb-button:active, | |
| .button:active { | |
| background-color: #b2f2ff; | |
| color: #fff; | |
| } | |
| /* Icons */ | |
| button[data-icon], | |
| .bb-button[data-icon], | |
| .button[data-icon] { | |
| position: relative; | |
| } | |
| button[data-icon]:before, | |
| .bb-button[data-icon]:before, | |
| .button[data-icon]:before { | |
| position: absolute; | |
| top: 50%; | |
| margin-top: -1.5rem; | |
| right: 1.5rem; | |
| line-height: 3rem; | |
| } | |
| button[data-icon]:active:before, | |
| .bb-button[data-icon]:active:before, | |
| .button[data-icon]:active:before { | |
| color: #fff; | |
| } | |
| /* Pressed with dark skin */ | |
| .skin-dark button:active, | |
| .skin-dark .bb-button:active, | |
| .skin-dark .button:active { | |
| background-color: #00aacc; | |
| } | |
| /* Disabled */ | |
| button[disabled], | |
| .bb-button[aria-disabled="true"], | |
| .button[aria-disabled="true"] { | |
| background-color: rgba(0,0,0,0.05); | |
| color: #c7c7c7; | |
| pointer-events: none; | |
| } | |
| button[disabled].recommend, | |
| .bb-button[aria-disabled="true"].recommend, | |
| .button[aria-disabled="true"].recommend { | |
| background-color: #97cbd5; | |
| color: rgba(255,255,255,0.5); | |
| } | |
| button[disabled].danger, | |
| .bb-button[aria-disabled="true"].danger, | |
| .button[aria-disabled="true"].danger { | |
| background-color: #eb7474; | |
| color: rgba(255,255,255,0.5); | |
| } | |
| /* Disabled with dark background */ | |
| .skin-dark button[disabled], | |
| .skin-dark .button[aria-disabled="true"], | |
| .skin-dark .bb-button[aria-disabled="true"] { | |
| background-color: #565656; | |
| color: rgba(255,255,255,0.4); | |
| } | |
| .skin-dark button[disabled].recommend, | |
| .skin-dark .button[aria-disabled="true"].recommend, | |
| .skin-dark .bb-button[aria-disabled="true"].recommend { | |
| background-color: #006579; | |
| } | |
| .skin-dark button[disabled].danger, | |
| .skin-dark .button[aria-disabled="true"].danger, | |
| .skin-dark .bb-button[aria-disabled="true"].danger { | |
| background-color: #730f0f; | |
| } | |
| button[disabled]::-moz-selection, | |
| .button[aria-disabled="true"]::-moz-selection, | |
| .bb-button[aria-disabled="true"]::-moz-selection { | |
| -moz-user-select: none; | |
| } | |
| /* ---------------------------------- | |
| * Buttons inside lists | |
| * ---------------------------------- */ | |
| li button, | |
| li .bb-button, | |
| li .button { | |
| position: relative; | |
| text-align: start; | |
| border: 0.1rem solid #c7c7c7; | |
| background: rgba(0,0,0,0.05); | |
| margin: 0 0 1rem; | |
| overflow: hidden; | |
| border-radius: 0; | |
| display: flex; | |
| height: auto; | |
| min-height: 4rem; | |
| text-overflow: initial; | |
| white-space: normal; | |
| line-height: 2rem; | |
| padding: 1rem 1.2rem; | |
| } | |
| /* Press */ | |
| li .bb-button:active:after, | |
| li .button:active:after, | |
| li button:active:after { | |
| opacity: 0; | |
| } | |
| /* Disabled */ | |
| li button:disabled, | |
| li .bb-button[aria-disabled="true"], | |
| li .button[aria-disabled="true"] { | |
| opacity: 0.5; | |
| } | |
| /* Icons */ | |
| li button.icon, | |
| li .bb-button.icon, | |
| li .button.icon { | |
| -moz-padding-end: 4rem; | |
| } | |
| li button.icon:before, | |
| li .bb-button.icon:before, | |
| li .button.icon:before { | |
| content: ""; | |
| width: 3rem; | |
| height: 3rem; | |
| position: absolute; | |
| top: 50%; | |
| right: 0.5rem; | |
| margin-top: -1.5rem; | |
| background: transparent no-repeat center center / 100% auto; | |
| pointer-events: none; | |
| } | |
| li button.icon-view:active, | |
| li .bb-button.icon-view:active, | |
| li .button.icon-view:active { | |
| background-color: #b2f2ff; | |
| } | |
| li button.icon-view:before, | |
| li .bb-button.icon-view:before, | |
| li .button.icon-view:before { | |
| background-image: url(buttons/images/forward-light.svg); | |
| background-size: 3rem; | |
| right: 0; | |
| } | |
| li button[data-icon]:before, | |
| li .bb-button[data-icon]:before, | |
| li .button[data-icon]:before { | |
| right: 1rem; | |
| } | |
| li button[data-icon="expand"]:before, | |
| li .bb-button[data-icon="expand"]:before, | |
| li .button[data-icon="expand"]:before { | |
| color: #00aac5; | |
| top: unset; | |
| bottom: 0; | |
| } | |
| li button[data-icon="expand"][disabled]:before, | |
| li .bb-button[data-icon="expand"][aria-disabled="true"]:before, | |
| li .button[data-icon="expand"][aria-disabled="true"]:before { | |
| color: #A9A9A9; | |
| } | |
| li button[data-icon="forward"]:before, | |
| li .bb-button[data-icon="forward"]:before, | |
| li .button[data-icon="forward"]:before { | |
| color: #686f72; | |
| } | |
| /* Getting more space for text, as icon is shorter */ | |
| li button.icon-dialog, | |
| li .bb-button.icon-dialog, | |
| li .button.icon-dialog { | |
| -moz-padding-end: 3rem; | |
| } | |
| li button.icon-dialog:before, | |
| li .bb-button.icon-dialog:before, | |
| li .button.icon-dialog:before { | |
| width: 0; | |
| height: 0; | |
| top: auto; | |
| right: 0.8rem; | |
| bottom: 0.5rem; | |
| border-top: 0.7rem solid transparent; | |
| border-bottom: 0.7rem solid transparent; | |
| border-left: 0.7rem solid #00aac5; | |
| transform: rotate(45deg); | |
| z-index: 1; | |
| } | |
| li button.icon-dialog:disabled:before, | |
| li .bb-button[aria-disabled="true"].icon-dialog:before, | |
| li .button[aria-disabled="true"].icon-dialog:before { | |
| border-left: 0.7rem solid #a9a9a9; | |
| } | |
| /* ---------------------------------- | |
| * Theme: Dark | |
| * ---------------------------------- */ | |
| .skin-dark li button, | |
| .skin-dark li .bb-button, | |
| .skin-dark li .button { | |
| background-color: #454545; | |
| border: none; | |
| color: #fff; | |
| font-weight: normal; | |
| } | |
| .skin-dark li button:active, | |
| .skin-dark li .button:active, | |
| .skin-dark li .bb-button:active { | |
| background-color: #00aacc; | |
| } | |
| .skin-dark li button.icon-view:active, | |
| .skin-dark li .button.icon-view:active, | |
| .skin-dark li .bb-button.icon-view:active { | |
| background-color: #00aacc; | |
| } | |
| .skin-dark li button.icon-dialog:active:before, | |
| .skin-dark li .bb-button.icon-dialog:active:before, | |
| .skin-dark li .button.icon-dialog:active:before { | |
| border-left: 0.7rem solid #b2f2ff; | |
| } | |
| .skin-dark li button:disabled, | |
| .skin-dark li .bb-button[aria-disabled="true"], | |
| .skin-dark li .button[aria-disabled="true"] { | |
| background-color: #454545; | |
| opacity: 0.5; | |
| } | |
| /* Inputs inside of .button */ | |
| .button input, | |
| body[role="application"] .bb-button input, | |
| body[role="application"] .button input { | |
| border: 0; | |
| background: none; | |
| } | |
| /* select */ | |
| select { | |
| width: 100%; | |
| -moz-box-sizing: border-box; | |
| font-family: sans-serif; | |
| font-style: italic; | |
| font-size: 1.6rem; | |
| color: #333; | |
| margin: 0 0 1rem; | |
| padding: 0; | |
| -moz-padding-start: 1.1rem; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| height: 4rem; | |
| border: 0.1rem solid #c7c7c7; | |
| background: rgba(0,0,0,0.05); | |
| } | |
| .skin-dark select { | |
| background-color: rgba(87, 87, 87, 0.8); | |
| border: none; | |
| color: #fff; | |
| } | |
| /* remove dotted outline */ | |
| select:-moz-focusring { | |
| color: transparent; | |
| text-shadow: 0 0 0 #333; | |
| } | |
| .skin-dark select:-moz-focusring { | |
| text-shadow: 0 0 0 #fff; | |
| } | |
| /* Hides dropdown arrow until bug #649849 is fixed */ | |
| .bb-button.icon select, | |
| .button.icon select, | |
| .bb-button[data-icon] select, | |
| .button[data-icon] select { | |
| position: absolute; | |
| top: -0.6rem; | |
| left: 0; | |
| width: calc(100% + 3rem); | |
| height: 100%; | |
| margin: 0; | |
| padding: 0; | |
| -moz-padding-end: 5rem; | |
| text-indent: 0; | |
| font-weight: 400; | |
| font-size: 1.7rem; | |
| /* | |
| The select element uses the text color to determine the color of the outline. | |
| We put a text shadow with needed offset and no blur, so that replaces the text. | |
| */ | |
| color: rgba(0,0,0,0); | |
| text-shadow: 1rem 0.5rem 0 #333; | |
| border: none; | |
| background: none; | |
| } | |
| .bb-button.icon select option, | |
| .button.icon select option, | |
| .bb-button[data-icon] select option, | |
| .button[data-icon] select option { | |
| color: #000; | |
| border: 0; | |
| padding: 0.6rem 1.3rem; | |
| text-shadow: 0 0 0 rgba(0,0,0,0); | |
| } | |
| .bb-button.icon-dialog, | |
| .button.icon-dialog { | |
| overflow: hidden; | |
| } | |
| .skin-dark .bb-button.icon select, | |
| .skin-dark .button.icon select, | |
| .skin-dark .bb-button[data-icon] select, | |
| .skin-dark .button[data-icon] select { | |
| text-shadow: 1rem 0.5rem 0 #fff; | |
| } | |
| /****************************************************************************** | |
| * Right-To-Left layout | |
| */ | |
| html[dir="rtl"] button[data-icon]:before, | |
| html[dir="rtl"] .bb-button[data-icon]:before, | |
| html[dir="rtl"] .button[data-icon]:before { | |
| left: 1.5rem; | |
| right: unset; | |
| } | |
| html[dir="rtl"] button.mirrored[data-icon]:before, | |
| html[dir="rtl"] .bb-button.mirrored[data-icon]:before, | |
| html[dir="rtl"] .button.mirrored[data-icon]:before { | |
| transform: scale(-1, 1); | |
| } | |
| html[dir="rtl"] li button.icon-view:before, | |
| html[dir="rtl"] li .bb-button.icon-view:before, | |
| html[dir="rtl"] li .button.icon-view:before { | |
| left: 0; | |
| right: unset; | |
| transform: rotate(180deg); | |
| } | |
| html[dir="rtl"] li button[data-icon]:before, | |
| html[dir="rtl"] li .bb-button[data-icon]:before, | |
| html[dir="rtl"] li .button[data-icon]:before { | |
| left: 1rem; | |
| right: unset; | |
| } | |
| html[dir="rtl"] li button.icon:before, | |
| html[dir="rtl"] li .bb-button.icon:before, | |
| html[dir="rtl"] li .button.icon:before { | |
| left: 0.5rem; | |
| right: unset; | |
| } | |
| html[dir="rtl"] li button.icon-dialog:before, | |
| html[dir="rtl"] li .bb-button.icon-dialog:before, | |
| html[dir="rtl"] li .button.icon-dialog:before { | |
| left: 0.8rem; | |
| right: unset; | |
| transform: rotate(315deg); | |
| border-left: unset; | |
| border-right: 0.7rem solid #00aac5; | |
| } | |
| html[dir="rtl"] li button.icon-dialog:disabled:before, | |
| html[dir="rtl"] li .bb-button[aria-disabled="true"].icon-dialog:before, | |
| html[dir="rtl"] li .button[aria-disabled="true"].icon-dialog:before { | |
| border-left: unset; | |
| border-right: 0.7rem solid #a9a9a9; | |
| } | |
| html[dir="rtl"] .skin-dark li button.icon-dialog:active:before, | |
| html[dir="rtl"] .skin-dark li .bb-button.icon-dialog:active:before, | |
| html[dir="rtl"] .skin-dark li .button.icon-dialog:active:before { | |
| border-left: unset; | |
| border-right: 0.7rem solid #b2f2ff; | |
| } | |
| /* Hides dropdown arrow until bug #649849 is fixed */ | |
| html[dir="rtl"] .bb-button.icon-dialog select, | |
| html[dir="rtl"] .button.icon-dialog select, | |
| html[dir="rtl"] .bb-button[data-icon] select, | |
| html[dir="rtl"] .button[data-icon] select { | |
| left: unset; | |
| right: 0.3rem; /* .3rem space because of italic */ | |
| text-indent: 1rem; | |
| } |