| /* |
| * Licensed to the Apache Software Foundation (ASF) under one or more |
| * contributor license agreements. See the NOTICE file distributed with |
| * this work for additional information regarding copyright ownership. |
| * The ASF licenses this file to You under the Apache License, Version 2.0 |
| * (the "License"); you may not use this file except in compliance with |
| * the License. You may obtain a copy of the License at |
| * |
| * http://www.apache.org/licenses/LICENSE-2.0 |
| * |
| * Unless required by applicable law or agreed to in writing, software |
| * distributed under the License is distributed on an "AS IS" BASIS, |
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| * See the License for the specific language governing permissions and |
| * limitations under the License. |
| */ |
| |
| /* |
| XXX used variables: only for the IDE, will not really used by the build system, because this |
| XXX code will be inserted after the _variables.scss |
| */ |
| $alert-padding-x: 1.25rem !default; |
| $border-radius: .25rem !default; |
| $zindex-dropdown: 1000 !default; |
| $zindex-popover: 1060 !default; |
| $spacer: 1rem !default; |
| $spacer-x: $spacer !default; |
| $spacer-y: $spacer !default; |
| $card-spacer-y: .75rem !default; |
| $form-group-margin-bottom: $spacer-y !default; |
| $brand-primary: #0275d8 !default; |
| $link-color: $brand-primary !default; |
| $link-hover-color: darken($link-color, 15%) !default; |
| $nav-link-padding: .5em 1em !default; |
| $blue: #0275d8 !default; |
| $white: #fff !default; |
| $gray-100: #f8f9fa !default; |
| $gray-200: #e9ecef !default; |
| $gray-300: #dee2e6 !default; |
| $gray-400: #ced4da !default; |
| $gray-500: #adb5bd !default; |
| $gray-600: #6c757d !default; |
| $gray-700: #495057 !default; |
| $gray-800: #343a40 !default; |
| $gray-900: #212529 !default; |
| $black: #000 !default; |
| $body-bg: $white !default; |
| $table-dark-color: $body-bg !default; |
| $headings-font-weight: 500; |
| $navbar-dark-active-color: rgba($white, 1) !default; |
| $navbar-light-active-color: rgba($black, .9) !default; |
| $border-width: 1px !default; |
| $input-color: $gray-700 !default; |
| $input-btn-border-width: $border-width !default; // For form controls and buttons |
| $input-btn-padding-y: .5rem !default; |
| $input-btn-padding-x: .75rem !default; |
| $dropdown-item-padding-x: 1.5rem !default; |
| $dropdown-item-padding-y: .25rem !default; |
| $dropdown-link-color: colors("gray-dark") !default; |
| $component-active-color: $white !default; |
| $dropdown-link-active-color: $component-active-color !default; |
| $dropdown-link-disabled-color: $gray-light !default; |
| $dropdown-link-hover-bg: $gray-lightest !default; |
| $nav-tabs-link-active-color: #495057 !default; |
| $nav-link-disabled-color: #868e96 !default; |
| $btn-primary-color: $white !default; |
| $btn-secondary-color: colors("gray-dark") !default; |
| $form-check-input-gutter: 1.25rem !default; |
| $input-box-shadow: inset 0 1px 1px rgba($black, .075) !default; |
| $input-btn-focus-width: .2rem !default; |
| $input-btn-focus-color: rgba(theme-color("primary"), .25) !default; |
| $input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color !default; |
| $input-focus-box-shadow: $input-btn-focus-box-shadow !default; |
| $form-check-inline-input-margin-x: 0.75rem; |
| $input-placeholder-color: $gray-600 !default; |
| |
| /* used icons ---------------------------------------------------- */ |
| |
| $fa-square-o: "\f096"; |
| $fa-check-square-o: "\f046"; |
| $fa-circle-thin: "\f1db"; |
| $fa-dot-circle-o: "\f192"; |
| $fa-exclamation-triangle: "\f071"; |
| $zero-width-space: "\200b"; |
| $fa-info: "\f129"; |
| $fa-times-circle: "\f057"; |
| $fa-toggle-off: "\f204"; |
| $fa-toggle-on: "\f205"; |
| |
| /* non-bootstrap variabled --------------------------------------- */ |
| $form-disabled-alpha: 0.5; |
| |
| @mixin tobagoTreeNodeToggle() { |
| .tobago-treeNode-toggle:not(.invisible) { |
| cursor: pointer; |
| } |
| } |
| |
| /* badge -------------------------------------------------------------- */ |
| .tobago-badge { |
| } |
| |
| .badge.btn { |
| border: 0; |
| } |
| |
| .btn-group > .tobago-badge.badge.btn { |
| z-index: initial; |
| cursor: initial; |
| } |
| |
| /* bar -------------------------------------------------------------- */ |
| .tobago-bar { |
| &.navbar-light .navbar-brand > .tobago-link { |
| color: $navbar-light-active-color; |
| |
| &:hover, &:focus { |
| text-decoration: none; |
| } |
| } |
| &.navbar-dark .navbar-brand > .tobago-link { |
| color: $navbar-dark-active-color; |
| |
| &:hover, &:focus { |
| text-decoration: none; |
| } |
| } |
| } |
| |
| /* box -------------------------------------------------------------- */ |
| |
| .tobago-box { |
| margin-bottom: $card-spacer-y; |
| > .card-body { |
| overflow-x: hidden; |
| overflow-y: auto; |
| } |
| } |
| |
| .tobago-box-header { |
| display: flex; |
| justify-content: space-between; |
| align-content: center; |
| } |
| |
| .card-header { |
| |
| > h3:first-child { |
| margin-bottom: 0; |
| align-self: center; |
| } |
| |
| .navbar { |
| padding: 0; |
| } |
| } |
| |
| /* buttons, links ------------------------------------------------------- */ |
| .tobago-buttons { |
| > .tobago-button { |
| display: inline-block; |
| } |
| } |
| |
| .tobago-links { |
| } |
| |
| /* button, link ------------------------------------------------------- */ |
| .tobago-button, .tobago-link { |
| > :nth-child(n+2) { |
| margin-left: .4em; |
| } |
| } |
| |
| /* button -------------------------------------------------------------- */ |
| |
| .tobago-button { |
| cursor: default; |
| } |
| |
| a.tobago-button { |
| &.btn-primary:focus { |
| color: $btn-primary-color; |
| } |
| &.btn-secondary:focus { |
| color: $btn-secondary-color; |
| } |
| } |
| |
| button.tobago-button { |
| &:disabled { |
| cursor: not-allowed; |
| |
| img, span { |
| pointer-events: none; |
| } |
| } |
| } |
| |
| /* collapsible -------------------------------------------------------------- */ |
| |
| .tobago-collapsed.tobago-box .card-body, |
| .tobago-collapsed.tobago-section .tobago-section-content, |
| tobago-panel.tobago-collapsed { |
| display: none; |
| } |
| |
| /* date -------------------------------------------------------------- */ |
| |
| .tobago-date { |
| min-width: 7em; |
| |
| &::-ms-clear { |
| /* Remove IE10's "clear field" X button */ |
| display: none; |
| } |
| &:disabled { |
| color: rgba($input-color, $form-disabled-alpha); |
| } |
| } |
| |
| /* for pickers with more than one icon, e.g. date-time picker */ |
| .btn > .fa:nth-child(n+2) { |
| margin-left: .3em; |
| } |
| |
| /* |
| XXX workaround for Bootstrap with datetimepicker needed for popups |
| */ |
| .bootstrap-datetimepicker-widget { |
| z-index: 2000 !important; |
| } |
| |
| /* figure -------------------------------------------------------------- */ |
| |
| .tobago-figure { |
| } |
| |
| /* file -------------------------------------------------------------- */ |
| .tobago-file {} //TODO remove |
| tobago-file { |
| .custom-file-label { |
| &:after { |
| font-family: FontAwesome; |
| content: "\f07c"; |
| } |
| |
| &.tobago-file-placeholder { |
| color: $input-placeholder-color; |
| } |
| } |
| } |
| |
| /* flexLayout -------------------------------------------------------------- */ |
| |
| .tobago-flexLayout { |
| min-width: 0; |
| /* without this, Firefox/Webkit are different from IE: |
| Set the minimal width to zero make flex-layout responsive for the width, |
| even if there is overflowing content. |
| currently e.g. PRE-code blocks in the demo are too wide. XXX */ |
| margin-left: -3px; |
| margin-right: -3px; |
| |
| > * { |
| margin-left: 3px; |
| margin-right: 3px; |
| } |
| |
| > .tobago-flexLayout { |
| margin-left: 0; |
| margin-right: 0; |
| } |
| } |
| |
| /* the non-label-element inside of a label-layout with flex box */ |
| .tobago-flexLayout.tobago-label-container > { |
| .form-control, .form-control-plaintext, .twitter-typeahead, |
| .tobago-input-group-outer, .tobago-messages-container, |
| .tobago-selectManyShuttle { |
| flex: 1 0 0px; |
| } |
| } |
| |
| /* flowLayout ---------------------------------------------------------- */ |
| .tobago-flowLayout { |
| } |
| |
| /* footer -------------------------------------------------------------- */ |
| |
| .tobago-footer { |
| background-color: #ffffff; |
| padding: 5px 10px; |
| box-shadow: 0 0 5px 5px rgba(200, 200, 200, 0.5); |
| } |
| |
| .fixed-bottom { |
| margin-top: 10px; |
| } |
| |
| /* form -------------------------------------------------------------- */ |
| |
| .tobago-form { |
| } |
| |
| /* gridLayout -------------------------------------------------------------- */ |
| |
| .tobago-gridLayout { |
| display: -ms-grid; |
| display: grid; |
| border-spacing: 0; |
| border-collapse: collapse; |
| grid-column-gap: $spacer-x; // old |
| column-gap: $spacer-x; |
| |
| .tobago-label-container > { |
| .tobago-textarea, .tobago-selectManyListbox, .tobago-selectManyShuttle { |
| height: 100%; |
| } |
| } |
| } |
| |
| /* header ----------------------------------------------------------- */ |
| |
| .tobago-header { |
| margin-bottom: 1rem; |
| |
| &.fixed-top { |
| margin-bottom: 0; |
| } |
| } |
| |
| /* hidden ----------------------------------------------------------- */ |
| |
| .tobago-hidden:disabled { |
| display: none; |
| } |
| |
| /* image ----------------------------------------------------------- */ |
| |
| .tobago-image { |
| } |
| |
| .tobago-image.disabled { |
| filter: grayscale(1) blur(2px) contrast(0.5) brightness(1.2); |
| } |
| |
| /* in ----------------------------------------------------------- */ |
| .tobago-in { |
| &:disabled { |
| color: rgba($input-color, $form-disabled-alpha); |
| } |
| } |
| |
| .tobago-in-markup-number { |
| text-align: right; |
| } |
| |
| .tobago-input-group-outer { |
| } |
| |
| /* label ----------------------------------------------------------- */ |
| .tobago-label { |
| width: 100%; |
| } |
| |
| .tobago-flexLayout > .tobago-label { |
| width: 155px; |
| } |
| |
| /* link ----------------------------------------------------------- */ |
| |
| .tobago-link { |
| white-space: nowrap; |
| |
| span { |
| white-space: normal |
| } |
| |
| &.nav-link { |
| &:focus, &:hover { |
| text-decoration: none; |
| } |
| } |
| } |
| |
| a.tobago-link.dropdown-item { |
| img, span { |
| display: inline-block; /* fix for IE11 - :active selector doesn't work for nested elements */ |
| pointer-events: none; |
| } |
| } |
| |
| h1, h2, h3, h4, h5, h6 { |
| button.tobago-link { |
| font-weight: inherit; |
| } |
| } |
| |
| button { |
| &.tobago-link, &.tobago-treeCommand { |
| color: $blue; |
| border-width: 0; |
| padding: 0; |
| background-color: transparent; |
| text-align: left; |
| |
| &:focus, &:hover { |
| color: $link-hover-color; |
| cursor: pointer; |
| outline: none; |
| text-decoration: underline; |
| } |
| |
| &:disabled { |
| color: $nav-link-disabled-color; |
| |
| &:hover { |
| cursor: not-allowed; |
| text-decoration: none; |
| } |
| |
| > img { |
| opacity: .65; |
| } |
| } |
| } |
| |
| &.tobago-link.dropdown-item { |
| padding: $dropdown-item-padding-y $dropdown-item-padding-x; |
| color: $dropdown-link-color; |
| text-align: inherit; |
| white-space: nowrap; |
| |
| &:active { |
| color: $dropdown-link-active-color; |
| } |
| |
| &:focus, &:hover { |
| cursor: pointer; |
| text-decoration: none; |
| } |
| |
| &:disabled { |
| color: $dropdown-link-disabled-color; |
| } |
| } |
| |
| &.tobago-link.dropdown-toggle { |
| &:focus, &:hover { |
| text-decoration: none; |
| } |
| } |
| |
| &.nav-link { /* bootstrap don't know button.nav-link*/ |
| padding: $nav-link-padding; |
| padding-top: .55em; |
| padding-bottom: .45em; |
| } |
| } |
| |
| .navbar-nav button.nav-link { |
| padding-left: 0; |
| padding-right: 0; |
| } |
| |
| span.dropdown { |
| display: inline-block; |
| } |
| |
| .dropdown > .btn.dropdown-toggle { |
| width: 100%; |
| } |
| |
| /* messages / help text ----------------------------------------------- */ |
| .tobago-messages-container { |
| align-items: flex-start; |
| |
| &.tobago-flexLayout { |
| .tobago-messages:first-child small label { |
| margin-right: 0; /* for tc:in margin 5px is already set */ |
| margin-bottom: 5px; |
| } |
| } |
| } |
| |
| a.tobago-messages-button, a.tobago-help-button { |
| padding-left: 0.4em; |
| padding-right: 0.4em; |
| } |
| |
| .tobago-messages label { |
| display: block; |
| |
| &:last-child { |
| margin-bottom: 0; |
| } |
| } |
| |
| .tobago-flexLayout.tobago-messages-container > { |
| .twitter-typeahead, .tobago-input-group-outer, .tobago-selectManyShuttle { |
| flex: 1 0 0px; |
| } |
| } |
| |
| .tobago-messages { |
| $alert-icon-padding-x: $alert-padding-x / 1.25; |
| $alert-icon-width: $alert-icon-padding-x + 1rem + $alert-icon-padding-x; |
| |
| .alert.alert-dismissible { |
| padding-left: $alert-icon-width; |
| |
| &:before { |
| font-family: FontAwesome; |
| position: absolute; |
| left: 0; |
| padding-left: $alert-icon-padding-x; |
| padding-right: $alert-icon-padding-x; |
| width: $alert-icon-width; |
| text-align: center; |
| } |
| |
| &.alert-danger:before { |
| content: $fa-times-circle; |
| } |
| &.alert-warning:before { |
| content: $fa-exclamation-triangle; |
| } |
| &.alert-info:before { |
| content: $fa-info; |
| } |
| } |
| } |
| |
| .popover .popover-body { |
| // allow linebreaks for messages / help text |
| white-space: pre-line; |
| } |
| |
| /* nav ----------------------------------------------------------- */ |
| |
| /* styles for drop down menu first level */ |
| .dropdown-toggle { |
| &:focus, &:hover { |
| text-decoration: none; |
| } |
| } |
| |
| /* no bottom border in navtabs, if panel-body under it */ |
| .nav-tabs { |
| border-bottom-width: 0; |
| |
| > li.active > a { |
| background-image: linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%); |
| background-repeat: repeat-x; |
| border-bottom: #dddddd; |
| |
| &:hover { |
| border-bottom: #dddddd; |
| } |
| } |
| } |
| |
| .dropdown-menu .form-check { |
| display: block; |
| } |
| |
| /* dropdown-submenu ------------------------------------------------------- */ |
| .tobago-dropdown-submenu { |
| cursor: pointer; |
| position: relative; |
| width: 100%; |
| |
| &:active { |
| > button.tobago-link { |
| color: $dropdown-link-active-color; |
| } |
| } |
| |
| > .dropdown-menu { |
| top: 0; |
| left: 100%; |
| margin-top: -6px; |
| margin-left: -1px; |
| border-radius: 6px 6px 6px 6px; |
| } |
| |
| > button:after { |
| display: none; |
| } |
| |
| > button.tobago-link { |
| color: $dropdown-link-color; |
| |
| &:focus, &:hover { |
| text-decoration: none; |
| } |
| } |
| |
| &:after { |
| content: " "; |
| float: right; |
| border-color: transparent; |
| border-style: solid; |
| border-width: 5px 0 5px 5px; |
| border-left-color: #cccccc; |
| margin-top: 7px; |
| margin-right: -10px; |
| } |
| |
| &:hover > .dropdown-menu { |
| display: block; |
| |
| > a:after { |
| border-left-color: $dropdown-bg; |
| } |
| } |
| |
| &.pull-left { |
| float: none; |
| |
| > .dropdown-menu { |
| left: -100%; |
| margin-left: 10px; |
| border-radius: 6px 0 6px 6px; |
| } |
| } |
| } |
| |
| /* object ----------------------------------------------------------------- */ |
| .tobago-object { |
| } |
| |
| /* out -------------------------------------------------------------------- */ |
| |
| .tobago-out { |
| display: inline-block; |
| } |
| |
| .tobago-out-markup-strong { |
| font-weight: bold; |
| } |
| |
| .tobago-out-markup-deleted { |
| text-decoration: line-through; |
| } |
| |
| .tobago-out-markup-number { |
| display: block; |
| text-align: right; |
| } |
| |
| /* make sure, tc:out has always the same height, no matter if value is empty */ |
| span.tobago-out:empty:before { |
| content: "\200b"; |
| } |
| |
| .table-dark .form-control-plaintext { |
| color: $table-dark-color; |
| } |
| |
| /* page ----------------------------------------------------------- */ |
| |
| .tobago-page { |
| padding-top: 1rem; |
| padding-bottom: 1rem; |
| } |
| |
| .tobago-page-overlay { |
| display: table; |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| /* TODO: better z-index strategy */ |
| z-index: 500; /* less than the bootstrap navbar */ |
| transition-delay: 1s; |
| transition-duration: 250ms; |
| transition-property: opacity; |
| opacity: 0; |
| } |
| |
| .tobago-page-overlay-timeout { |
| opacity: 0.8; |
| } |
| |
| .tobago-page-overlay-markup-wait { |
| cursor: wait; |
| } |
| |
| .tobago-page-overlay-markup-error { |
| cursor: default; |
| } |
| |
| .tobago-page-overlayCenter { |
| display: table-cell; |
| text-align: center; |
| vertical-align: middle; |
| width: 100%; |
| /* TODO: better z-index strategy */ |
| z-index: 500; /* less than the bootstrap navbar */ |
| |
| img { |
| position: relative; |
| } |
| } |
| |
| .tobago-page-noscript { |
| position: absolute; |
| top: 100px; |
| left: 100px; |
| right: 100px; |
| height: 50px; |
| border: 1px solid black; |
| padding: 30px; |
| background-color: white; |
| font-size: 15px; |
| } |
| |
| .tobago-spread { |
| height: 100%; |
| |
| &tobago-panel { |
| overflow-x: hidden; |
| overflow-y: auto; |
| } |
| } |
| |
| /* panel ------------------------------------------------------------- */ |
| |
| // todo: remove |
| .tobago-panel { |
| } |
| |
| tobago-panel { |
| display: block; |
| } |
| |
| /* popup ------------------------------------------------------------- */ |
| |
| .modal-content > .card { |
| margin-bottom: 0; |
| } |
| |
| /* progress ---------------------------------------------------------- */ |
| .tobago-progress { |
| } |
| |
| /* stars rating ------------------------------------------------------------ */ |
| .tobago-stars { |
| .tobago-stars-container { |
| position: relative; |
| display: inline-block; |
| color: transparent; |
| font-family: FontAwesome; |
| font-size: 1.5rem; |
| |
| &:before { |
| content: "\f005 \f005 \f005 \f005 \f005"; |
| } |
| |
| .tobago-stars-focusBox { |
| display: inline-block; |
| position: absolute; |
| width: 100%; |
| height: 100%; |
| left: 0; |
| top: 0; |
| } |
| .tobago-stars-slider:focus ~ .tobago-stars-focusBox { |
| box-shadow: $input-box-shadow, $input-focus-box-shadow; |
| } |
| |
| .tobago-stars-tooltip { |
| display: inline-block; |
| position: absolute; |
| font-family: sans-serif; |
| font-size: 1.1rem; |
| background-color: $black; |
| color: $white; |
| padding-left: 0.25rem; |
| padding-right: 0.25rem; |
| text-align: center; |
| border-radius: 0.25rem; |
| width: 40px; |
| top: -23px; |
| left: 35px; |
| |
| &.trash:before { |
| font-family: FontAwesome; |
| content: "\f014"; |
| } |
| } |
| |
| .tobago-stars-selected { |
| display: block; |
| position: absolute; |
| top: 0; |
| overflow: hidden; |
| white-space: nowrap; |
| color: $progress-bar-bg; |
| |
| &:before { |
| content: "\f005 \f005 \f005 \f005 \f005"; |
| } |
| } |
| .tobago-stars-slider:disabled ~ .tobago-stars-selected { |
| filter: grayscale(1); |
| } |
| .tobago-stars-selected.tobago-placeholder { |
| filter: grayscale(0.3); |
| } |
| |
| .tobago-stars-unselected { |
| display: block; |
| position: absolute; |
| top: 0; |
| overflow: hidden; |
| white-space: nowrap; |
| color: $progress-bg; |
| direction: rtl; |
| |
| &:before { |
| content: "\f005 \f005 \f005 \f005 \f005"; |
| } |
| } |
| input[type="range"]:disabled ~ .tobago-stars-unselected { |
| filter: grayscale(1); |
| } |
| |
| .tobago-stars-preselected { |
| display: none; |
| position: absolute; |
| top: 0; |
| overflow: hidden; |
| white-space: nowrap; |
| color: lighten($progress-bar-bg, 25%); |
| opacity: 0.8; |
| |
| &:before { |
| content: "\f005 \f005 \f005 \f005 \f005"; |
| } |
| |
| &.show { |
| display: block; |
| } |
| } |
| |
| .tobago-stars-slider { |
| position: absolute; |
| height: 100%; |
| opacity: 0; |
| z-index: 1; |
| left: 0; |
| width: 100%; |
| |
| &::-ms-tooltip { |
| display: none; |
| } |
| } |
| } |
| } |
| |
| /* section ----------------------------------------------------------- */ |
| |
| /* to separate the icon from the rest of the title */ |
| h1, h2, h3, h4, h5, h6 { |
| > .fa:first-child, > img { |
| margin-right: 0.7em; |
| } |
| } |
| |
| .tobago-section-header { |
| display: flex; |
| justify-content: space-between; |
| align-content: center; |
| } |
| |
| /* selectBooleanCheckbox, selectManyCheckbox, selectOneRadio ------------------------------ */ |
| |
| .tobago-selectBooleanCheckbox, .tobago-selectBooleanToggle, |
| .tobago-selectManyCheckbox, .tobago-selectManyToggle, |
| .tobago-selectOneRadio { |
| .form-check-label { |
| input { |
| position: absolute; |
| opacity: 0; |
| z-index: -1; |
| } |
| .tobago-inputPseudo:before { |
| font-family: FontAwesome; |
| font-size: large; |
| font-style: normal; |
| display: inline-block; |
| transition: all 0.2s; |
| position: relative; |
| margin-left: -$form-check-input-gutter; |
| } |
| img { |
| margin-right: 0.3em; |
| } |
| &:after { |
| content: $zero-width-space; |
| } |
| } |
| } |
| |
| .tobago-selectBooleanToggle, .tobago-selectManyToggle { |
| .form-check-label { |
| .tobago-inputPseudo:before { |
| font-size: larger; |
| } |
| } |
| } |
| |
| .tobago-selectBooleanCheckbox, .tobago-selectManyCheckbox { |
| .form-check-label { |
| .tobago-inputPseudo:before { |
| content: $fa-square-o; |
| position: absolute; |
| } |
| input[type="checkbox"]:checked + .tobago-inputPseudo:before { |
| content: $fa-check-square-o; |
| } |
| input[type="checkbox"]:focus:not(:disabled) + .tobago-inputPseudo:before, |
| input[type="checkbox"]:active:not(:disabled) + .tobago-inputPseudo:before { |
| text-shadow: 0 0 1px black; |
| } |
| input[type="checkbox"]:disabled + .tobago-inputPseudo:before { |
| opacity: 0.5; |
| } |
| } |
| } |
| |
| .tobago-selectBooleanToggle, .tobago-selectManyToggle { |
| .form-check-label { |
| .tobago-inputPseudo:before { |
| content: $fa-toggle-off; |
| position: relative; |
| margin-right: 0.5rem; |
| } |
| input[type="checkbox"]:checked + .tobago-inputPseudo:before { |
| content: $fa-toggle-on; |
| } |
| input[type="checkbox"]:focus:not(:disabled) + .tobago-inputPseudo:before, |
| input[type="checkbox"]:active:not(:disabled) + .tobago-inputPseudo:before { |
| text-shadow: 0 0 1px black; |
| } |
| input[type="checkbox"]:disabled + .tobago-inputPseudo:before { |
| opacity: 0.5; |
| } |
| } |
| } |
| |
| .tobago-selectOneRadio { |
| .form-check-label { |
| .tobago-inputPseudo:before { |
| content: $fa-circle-thin; |
| position: absolute; |
| } |
| input[type="radio"]:checked + .tobago-inputPseudo:before { |
| content: $fa-dot-circle-o; |
| } |
| input[type="radio"]:focus:not(:disabled) + .tobago-inputPseudo:before, |
| input[type="radio"]:active:not(:disabled) + .tobago-inputPseudo:before { |
| text-shadow: 0 0 1px black; |
| } |
| input[type="radio"]:disabled + .tobago-inputPseudo:before { |
| opacity: 0.5; |
| } |
| } |
| } |
| |
| /* dropdown */ |
| .dropdown-menu { |
| .tobago-selectBooleanCheckbox, .tobago-selectManyCheckbox, .tobago-selectOneRadio { |
| .form-check-label { |
| padding-left: (2 * $form-check-input-gutter) + $dropdown-item-padding-y; |
| } |
| } |
| } |
| |
| /* inline */ |
| .tobago-selectBooleanToggle.form-check, |
| .tobago-selectBooleanCheckbox.form-check { |
| padding-top: calc(#{$input-btn-padding-y} - #{$input-btn-border-width} * 2); |
| padding-bottom: calc(#{$input-btn-padding-y} - #{$input-btn-border-width} * 2); |
| margin-bottom: 0; |
| |
| .form-check-label { |
| |
| } |
| } |
| |
| .tobago-selectManyToggle-inline, |
| .tobago-selectManyCheckbox-inline, |
| .tobago-selectOneRadio-inline { |
| padding-top: calc(#{$input-btn-padding-y} - #{$input-btn-border-width} * 2); |
| padding-bottom: calc(#{$input-btn-padding-y} - #{$input-btn-border-width} * 2); |
| |
| .form-check.form-check-inline { |
| margin-bottom: 0; |
| padding-left: 1rem; |
| |
| .form-check-label { |
| vertical-align: baseline; |
| } |
| } |
| } |
| |
| /* selectBooleanCheckbox ----------------------------------------------- */ |
| |
| /* selectManyCheckbox ----------------------------------------------------------- */ |
| |
| /* selectManyListbox ----------------------------------------------------------- */ |
| .tobago-selectManyListbox, |
| .tobago-selectManyListbox-option { |
| } |
| |
| /* selectManyShuttle ----------------------------------------------------------- */ |
| |
| .tobago-selectManyShuttle-add, |
| .tobago-selectManyShuttle-addAll, |
| .tobago-selectManyShuttle-option, |
| .tobago-selectManyShuttle-remove, |
| .tobago-selectManyShuttle-removeAll, |
| .tobago-selectManyShuttle-selectedLabel, |
| .tobago-selectManyShuttle-unselectedLabel { |
| } |
| |
| .tobago-selectManyShuttle { |
| display: flex; |
| |
| .tobago-selectManyShuttle-unselected, |
| .tobago-selectManyShuttle-selected { |
| flex: 1 0 0px; |
| } |
| } |
| |
| .tobago-selectManyShuttle-hidden { |
| display: none; |
| } |
| |
| .tobago-selectManyShuttle-toolBar { |
| display: flex; |
| flex-direction: column; |
| padding: 0 0.5rem; |
| |
| > button { |
| display: block; |
| } |
| |
| > div { |
| flex: 1 0 0px; |
| } |
| |
| > * { /* XXX this fixes the margin left from .btn:nth-child(n+2), but is ugly */ |
| margin-left: 0 !important; |
| } |
| } |
| |
| /* selectOneRadio ---------------------------------------------------------- */ |
| |
| /* selectOneChoice ---------------------------------------------------------- */ |
| |
| .tobago-selectOneChoice-option { |
| } |
| |
| .input-group-prepend > .tobago-selectOneChoice { /* before facet */ |
| border-top-right-radius: 0; |
| border-bottom-right-radius: 0; |
| } |
| |
| .input-group-append > .tobago-selectOneChoice { /* after facet */ |
| border-top-left-radius: 0; |
| border-bottom-left-radius: 0; |
| } |
| |
| /* selectOneListbox -------------------------------------------------------- */ |
| .tobago-selectOneListbox, |
| .tobago-selectOneListbox-option { |
| } |
| |
| /* segmentLayout ----------------------------------------------------------- */ |
| |
| .tobago-segmentLayout { |
| /* |
| Makes, that the height of the div is set. |
| Otherwise floating elements below, may flew into the area of the segmentLayout. |
| */ |
| /*display: inline-block; |
| todo: this breaks the general layout in IE11 and others |
| */ |
| } |
| |
| /* separator -------------------------------------------------------------- */ |
| hr.tobago-separator { |
| border-top: 1px solid rgba(0, 0, 0, 0.1); |
| } |
| |
| p.tobago-separator { |
| text-align: center; |
| border: 0; |
| white-space: nowrap; |
| display: block; |
| overflow: hidden; |
| padding: 0; |
| margin-top: 1em; |
| margin-bottom: 1em; |
| |
| &:before, &:after { |
| content: ""; |
| height: 1px; |
| background-color: rgba(0, 0, 0, 0.1); |
| display: inline-block; |
| vertical-align: middle; |
| } |
| |
| &:before { |
| width: 80px; |
| margin-left: 0; |
| margin-right: 5px; |
| } |
| |
| &:after { |
| width: 100%; |
| margin-left: 5px; |
| margin-right: 0; |
| } |
| } |
| |
| /* sheet -------------------------------------------------------------- */ |
| .tobago-sheet-expanded, |
| .tobago-sheet-row { |
| } |
| |
| .tobago-sheet { |
| .tobago-sheet-cell { |
| > .tobago-treeNode { |
| display: flex; |
| align-items: center; |
| |
| @include tobagoTreeNodeToggle(); |
| |
| .tobago-treeNode-toggle { |
| padding-right: 5px; |
| } |
| } |
| } |
| } |
| |
| th.tobago-sheet-headerCell { |
| font-weight: normal; |
| |
| .tobago-out { |
| font-weight: bold; |
| } |
| } |
| |
| .tobago-sheet-header { |
| overflow: hidden; |
| flex-shrink: 0; |
| display: block; |
| } |
| |
| .tobago-sheet-headerCell > .tobago-sheet-header > * { |
| display: inline; |
| } |
| |
| .tobago-sheet-header-markup-sortable::after { |
| content: "\f0dc"; |
| font-family: FontAwesome; |
| color: $gray-300; |
| margin-left: $spacer-x; |
| } |
| |
| .tobago-sheet-header-markup-ascending::after { |
| content: "\f0de"; |
| color: inherit; |
| } |
| |
| .tobago-sheet-header-markup-descending::after { |
| content: "\f0dd"; |
| color: inherit; |
| } |
| |
| th.tobago-sheet-headerCell-markup-filler > .tobago-sheet-header { |
| height: 14px; /* XXX why? */ |
| } |
| |
| .tobago-sheet-columnSelector { |
| margin-top: ($spacer-y * 0.75); |
| margin-bottom: ($spacer-y * 0.75); |
| } |
| |
| .tobago-sheet { |
| display: flex; |
| flex-direction: column; |
| margin-bottom: $spacer; |
| |
| .table { |
| margin-bottom: 0; |
| } |
| } |
| |
| .tobago-sheet-cell-markup-right { |
| text-align: right; |
| } |
| |
| .tobago-sheet-cell-markup-center { |
| text-align: center; |
| } |
| |
| .tobago-sheet-cell-markup-justify { |
| text-align: justify; |
| } |
| |
| .tobago-sheet-cell-markup-filler { |
| padding: 0 !important; /* fix for IE 11 */ |
| } |
| |
| .tobago-sheet-cell.tobago-sheet-cell-markup-middle { |
| vertical-align: middle; |
| line-height: initial; |
| } |
| |
| .tobago-sheet-cell.tobago-sheet-cell-markup-bottom { |
| vertical-align: bottom; |
| line-height: initial; |
| } |
| |
| .tobago-sheet-footer { |
| text-align: center; |
| } |
| |
| .tobago-sheet-paging { |
| display: inline-flex; |
| } |
| |
| .tobago-sheet-paging-markup-left { |
| float: left; |
| } |
| |
| .tobago-sheet-paging-markup-center { |
| } |
| |
| .tobago-sheet-paging-markup-right { |
| float: right; |
| } |
| |
| .tobago-sheet-pagingInput { |
| text-align: center; |
| display: none; |
| margin: -4px 0; |
| width: 3em; |
| } |
| |
| .tobago-sheet-pagingText { |
| cursor: pointer; |
| } |
| |
| .tobago-sheet-body { |
| overflow-y: auto; |
| flex: 1 1 auto; |
| } |
| |
| .tobago-sheet-headerTable { |
| margin-bottom: 0; |
| } |
| |
| .tobago-tableLayout-fixed { |
| table-layout: fixed; |
| } |
| |
| .tobago-sheet-headerCell-markup-filler { |
| border-width: 0 !important; |
| } |
| |
| .tobago-sheet-headerCell { |
| position: relative; |
| } |
| |
| .tobago-sheet-headerResize { |
| position: absolute; |
| right: -5px; |
| top: 0; |
| width: 10px; |
| height: 100%; |
| z-index: 1; |
| cursor: col-resize; |
| } |
| |
| .tobago-sheet-header:hover .tobago-sheet-headerResize { |
| background-color: $gray-200; |
| } |
| |
| .tobago-sheet-headerCell { |
| overflow: hidden; |
| } |
| |
| .tobago-sheet-cell div { |
| overflow: hidden; |
| } |
| |
| .tobago-sheet-bodyTable { |
| } |
| |
| .tobago-sheet-pagingOutput { |
| } |
| |
| /* splitLayout ---------------------------------------------------------------------- */ |
| |
| .tobago-splitLayout { |
| } |
| |
| .tobago-splitLayout-horizontal { |
| width: .5rem; |
| cursor: col-resize; |
| } |
| |
| .tobago-splitLayout-horizontal:hover { |
| border: dotted #000000 thin; |
| z-index: 10000; /* TODO: check, if needed (check also with iframes) */ |
| } |
| |
| .tobago-splitLayout-vertical { |
| height: .5rem; |
| cursor: row-resize; |
| } |
| |
| .tobago-splitLayout-vertical:hover { |
| border: dotted #000000 thin; |
| z-index: 10000; /* TODO: check, if needed (check also with iframes) */ |
| } |
| |
| /* suggest ---------------------------------------------------------------------- */ |
| |
| tobago-suggest { |
| display: none; |
| } |
| |
| .typeahead { |
| background-color: #FFFFFF; |
| |
| &:focus { |
| border: 2px solid #0097CF; |
| } |
| } |
| |
| .tt-query { |
| box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset; |
| } |
| |
| .tt-hint { |
| color: #aaaaaa; |
| } |
| |
| .tt-menu { |
| display: none; |
| position: absolute; |
| z-index: $zindex-popover; |
| background-color: #FFFFFF; |
| border: 1px solid rgba(0, 0, 0, 0.2); |
| border-radius: 3px; |
| box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); |
| margin-top: 1px; |
| padding: 8px 0; |
| } |
| |
| .tt-open { |
| display: block; |
| } |
| |
| .twitter-typeahead .tt-open { |
| /* for 'localMenu' - if suggest menu rendered directly on component - not in .tobago-page-menuStore */ |
| min-width: 100%; |
| } |
| |
| .tt-empty { |
| display: none; |
| } |
| |
| .tt-suggestion { |
| padding: 3px 20px; |
| |
| &:hover { |
| background-color: #0097CF; |
| color: #FFFFFF; |
| cursor: pointer; |
| } |
| |
| &.tt-cursor { |
| background-color: #0097CF; |
| color: #FFFFFF; |
| } |
| |
| p { |
| margin: 0; |
| } |
| } |
| |
| .twitter-typeahead { |
| display: flex !important; |
| flex-grow: 1; |
| } |
| |
| .input-group > .twitter-typeahead { |
| /* suggest in center of an input group */ |
| > .tobago-in { |
| width: 100%; |
| border-radius: 0; |
| } |
| |
| &:first-child { |
| /* suggest on the left of an input group */ |
| > .tobago-in { |
| border-top-left-radius: $border-radius; |
| border-bottom-left-radius: $border-radius; |
| } |
| } |
| &:last-child { |
| /* suggest on the right of an input group */ |
| > .tobago-in { |
| border-top-right-radius: $border-radius; |
| border-bottom-right-radius: $border-radius; |
| } |
| } |
| } |
| |
| /* tab / tab-group ----------------------------------------------------------------- */ |
| .tobago-tabGroup, .tobago-tab, .tobago-tab-content { |
| } |
| |
| tobago-tab { |
| |
| .nav-link:not([href]):not([tabindex]) { |
| /* fix .nav-links without 'href'; bootstrap tab only works if 'href' is set */ |
| &.active { |
| color: $nav-tabs-link-active-color; |
| cursor: pointer; |
| } |
| &:not(.active) { |
| color: $link-color; |
| cursor: pointer; |
| |
| &:hover { |
| color: $link-hover-color; |
| } |
| } |
| &.disabled { |
| color: $nav-link-disabled-color; |
| cursor: not-allowed; |
| |
| &:focus, &:hover { |
| color: $nav-link-disabled-color; |
| } |
| } |
| } |
| } |
| |
| tobago-tab.tobago-tab-barFacet { |
| display: flex; |
| |
| > .nav-link { |
| border-right: 0; |
| border-top-right-radius: 0; |
| } |
| |
| > div { |
| border: $nav-tabs-border-width solid transparent; |
| border-top-right-radius: $nav-tabs-border-radius; |
| padding-right: $nav-link-padding-x; |
| |
| & > button { |
| height: 100%; |
| } |
| & > a { |
| display: inline-block; |
| padding-top: 0.5rem; |
| } |
| } |
| |
| .nav-link.active + div { |
| background-color: $nav-tabs-link-active-bg; |
| border-top-color: $nav-tabs-border-color; |
| border-right-color: $nav-tabs-border-color; |
| } |
| |
| .nav-link:not(.disabled):hover + div { |
| border-top-color: $gray-200; |
| border-right-color: $gray-200; |
| } |
| } |
| |
| tobago-tab-group { |
| margin-bottom: $form-group-margin-bottom; |
| } |
| |
| /* tree ---------------------------------------------------------------------- */ |
| .tobago-tree-expanded, |
| .tobago-tree-selected, |
| .tobago-treeLabel, |
| .tobago-treeSelect, |
| .tobago-treeSelect-label { |
| } |
| |
| .tobago-tree { |
| .tobago-treeNode { |
| cursor: default; |
| |
| @include tobagoTreeNodeToggle(); |
| } |
| } |
| |
| .tobago-treeSelect .form-check-inline { |
| margin-left: $form-check-inline-input-margin-x / 2; |
| margin-right: $form-check-inline-input-margin-x / 2; |
| } |
| |
| .tobago-treeCommand { |
| cursor: pointer; |
| } |
| |
| .tobago-treeNode[data-tobago-level] { |
| margin-left: 7rem; |
| } |
| |
| @for $i from 0 through 20 { |
| .tobago-treeNode[data-tobago-level='#{$i}'] { |
| margin-left: #{$i}rem; |
| } |
| } |
| |
| /* treeListbox ---------------------------------------------------------------------- */ |
| .tobago-treeListbox { |
| } |
| |
| .tobago-treeListbox-level { |
| display: inline-block; |
| min-width: 10rem; |
| } |
| |
| .tobago-treeListbox-select { |
| width: 100%; |
| } |
| |
| /* textarea --------------------------------------------------------- */ |
| .tobago-textarea { |
| &:disabled { |
| color: rgba($input-color, $form-disabled-alpha); |
| } |
| } |
| |
| /* facesMessages messageLayout focus shadows ------------------------ */ |
| .tobago-date, |
| .tobago-in, |
| .tobago-selectManyListbox, |
| .tobago-selectOneChoice, |
| .tobago-selectOneListbox, |
| .tobago-textarea { |
| &-markup-fatal, &-markup-error { |
| &.border-danger:focus { |
| box-shadow: 0 0 0 .2rem rgba(theme-color("danger"), .25); |
| } |
| } |
| &-markup-warn { |
| &.border-warning:focus { |
| box-shadow: 0 0 0 .2rem rgba(theme-color("warning"), .25); |
| } |
| } |
| &-markup-info { |
| &.border-info:focus { |
| box-shadow: 0 0 0 .2rem rgba(theme-color("info"), .25); |
| } |
| } |
| } |
| |
| /* menuStore -------------------------------------------------------- */ |
| |
| .tobago-page-menuStore { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 0; |
| height: 0; |
| z-index: $zindex-popover; |
| } |
| |
| /* Bootstrap workarounds ------------------------------------------------------------------ */ |
| |
| /* fixes the problem, that input controls have 100% in the toolbar if they are not in a form, |
| but in Tobago we have a global form. |
| */ |
| /* |
| .navbar .form-control { |
| width: auto; |
| } |
| */ |
| |
| /* |
| fixes missing space, I thinks normal Websites have a " " Space char in the source code, Tobago not. |
| |
| fixme: there is a problem with the selectManyShuttle with this style. |
| */ |
| |
| .form-horizontal { |
| |
| > * { /* fixes vertical space, todo: why is is needed? is there a better way? */ |
| margin-top: 10px; |
| margin-bottom: 5px; |
| /* XXX MUST BE REMOVED */ |
| } |
| |
| .control-label { |
| margin-top: 10px; |
| margin-bottom: 5px; |
| } |
| } |
| |
| /* FIXME: This is to hide the toolbar, until it is implemented */ |
| .tobago-tabGroup-toolBar { |
| display: none; |
| } |
| |
| .tobago-required .tobago-label:after, |
| .tobago-required.tobago-label:after { |
| content: "*"; |
| color: theme-color("danger"); |
| } |
| |
| /* Bootstrap datetimepicker workarounds ------------------------------------------------------------------ */ |
| |
| /* |
| * CSS extension for bootstrap3-datetimepicker to fit with bootstrap4. |
| */ |
| |
| .bootstrap-datetimepicker-widget { |
| th, td { |
| padding: 5px; |
| } |
| } |