UNPKG

smart-webcomponents

Version:

Web Components & Custom Elements for Professional Web Applications

1,134 lines (1,112 loc) 147 kB
@charset "UTF-8"; :root, body[theme=dark] { --smart-primary-rgb: 0, 123, 255; /* The r, g, and b components of the theme primary color */ --smart-primary: #007bff; /* The theme primary color */ --smart-primary-color: #ffffff; /* Text color on top of a primary background */ --smart-secondary-rgb: 108, 117, 125; /* The r, g, and b components of the theme secondary color */ --smart-secondary: #6c757d; /* The theme secondary color */ --smart-secondary-color: #ffffff; /* Text color on top of a secondary background */ --smart-error-rgb: 220, 53, 69; /* The r, g, and b components of the theme error color */ --smart-error: #dc3545; /* The theme error color */ --smart-error-color: #ffffff; /* Text color on top of a error background */ --smart-success-rgb: 40, 167, 69; /* The r, g, and b components of the theme success color */ --smart-success: #28a745; /* The theme success color */ --smart-success-color: #ffffff; /* Text color on top of a success background */ --smart-info-rgb: 23, 162, 184; /* The r, g, and b components of the theme info color */ --smart-info: #17a2b8; /* The theme info color */ --smart-info-color: #ffffff; /* Text color on top of a info background */ --smart-warning-rgb: 255, 193, 7; /* The r, g, and b components of the theme warning color */ --smart-warning: #ffc107; /* The theme warning color */ --smart-warning-color: #000000; /* Text color on top of a warning background */ --smart-light-rgb: 248, 249, 250; /* The r, g, and b components of the theme light color */ --smart-light: #f8f9fa; /* The theme light color */ --smart-light-color: #343a40; /* Text color on top of a light background */ --smart-dark-rgb: 52, 58, 64; /* The r, g, and b components of the theme dark color */ --smart-dark: #343a40; /* The theme dark color */ --smart-dark-color: #f8f9fa; /* Text color on top of a dark background */ --smart-white-rgb: 255, 255, 255; /* The r, g, and b components of the theme white color */ --smart-white: #ffffff; /* The theme white color */ --smart-white-color: #000000; /* Text color on top of a white background */ --smart-black-rgb: 0, 0, 0; /* The r, g, and b components of the theme black color */ --smart-black: #000000; /* The theme black color */ --smart-black-color: #000000; /* Text color on top of a black background */ --smart-surface: #ffffff; --smart-surface-color: #212529; --smart-background: #ffffff; /* The theme background color. The background color appears behind scrollable content.*/ --smart-background-color: #212529; /* Text color on top of a background background */ --smart-font-size: 1rem; /* Theme font-size */ --smart-font-weight: 400; /* Theme font-weight */ --smart-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; /* Theme font-family */ --smart-border-width: 1px; /* Theme border-width */ --smart-border-radius: 0.25rem; /* Theme border-radius */ --smart-editor-height: 38px; /* Default height for editors */ --smart-editor-label-padding: 10px; /* Default padding for inputs */ /* Button - Default */ --smart-button-text-transform: inherit; /* Controls the capitalization of button's text. Could be set as uppercase/lowercase/capitalize. */ --smart-button-padding: 0.375rem 0.75rem; /* Sets button's paddings. */ --smart-button-large-padding: 0.5rem 1rem; /* Sets large button's paddings. */ --smart-button-large-font-size: 1.25rem; /* Sets large button's font size. */ --smart-button-small-padding: 0.25rem 0.5rem; /* Sets small button's paddings. */ --smart-button-small-font-size: 0.875rem; /* Sets small button's font size. */ --smart-button-very-small-padding: 1px 5px; /* Sets very small button's paddings. */ --smart-button-very-small-font-size: 12px; /* Sets very small button's font size. */ --smart-button-group-default-height: var(--smart-editor-height); --smart-check-box-default-size: 16px; /* Default size for the check box used in smartCheckBox and smartListItem. */ --smart-color-panel-grid-mode-item-size: 20px; /* smartColorPanel item size */ --smart-progress-bar-default-height: 7px; /* smartProgressBar default height */ --smart-circular-progress-bar-fill-size: 20%; --smart-radio-button-default-size: 16px; /* Default size for the radio button. */ --smart-slider-thumb-border-top-left-radimobile-menu-activatedus: 15px; /* Top-left border radius of smartSlider thumb */ --smart-toast-info-background: #5bc0de; /* Background color for type info */ --smart-toast-info-color: #fff; /* Text color for type info */ --smart-toast-warning-background: #FFA800; /* Background color for type warning */ --smart-toast-warning-color: #fff; /* Text color for type warning */ --smart-scheduler-context-menu-max-height: calc(3 * var(--smart-scheduler-event-item-size)); /* Context menu max-height */ --smart-grid-cell-background-update: rgba(var(--smart-success-rgb), .3); --smart-scroll-bar-thumb-padding: 0px; --smart-pager-page-size-selector-width: 65px; --smart-accordion-item-expanded-offset: 0px; } body:not([theme=dark]) { --smart-scroll-bar-thumb-background: #ced4da; --smart-scroll-bar-thumb-background-hover: #6c757d; --smart-scroll-bar-thumb-background-active: #adb5bd; --smart-scroll-bar-track-background: #e9ecef; --smart-scroll-bar-button-background: #e9ecef; --smart-scroll-bar-background: #e9ecef; --smart-scroll-bar-button-background-hover: #dee2e6; --smart-scroll-bar-button-background-active: #adb5bd; --smart-scroll-bar-button-border-active: #adb5bd; --smart-alternation-index0-color: #333; /* Alternation color for index0 */ --smart-alternation-index0-border: #DEE2E6; /* Alternation border color for index0 */ --smart-alternation-index0-background: #F2F2F2; /* Alternation background color for index0 */ } body[theme=dark] { --smart-scroll-bar-background: #3E3E42; --smart-scroll-bar-border: #1E1E1E; --smart-scroll-bar-thumb-background: #686868; --smart-scroll-bar-thumb-border: #3E3E42; --smart-scroll-bar-thumb-background-hover: #9E9E9E; --smart-scroll-bar-thumb-border-hover: #9E9E9E; --smart-scroll-bar-thumb-background-active: #ced4da; --smart-scroll-bar-thumb-border-active: #ced4da; --smart-scroll-bar-button-color-hover: #333; --smart-scroll-bar-button-background-hover: #9E9E9E; --smart-scroll-bar-button-border-hover: #9E9E9E; --smart-scroll-bar-button-color-active: #333; --smart-scroll-bar-button-background-active: #ced4da; --smart-scroll-bar-button-border-active: #ced4da; --smart-alternation-index0-color: #fff; /* Alternation color for index0 */ --smart-alternation-index0-border: #1E1E1E; /* Alternation border color for index0 */ --smart-alternation-index0-background: #3E3E42; /* Alternation background color for index0 */ } html { font-size: 16px; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; } div[class^=smart-]:not(.smart-alert) { line-height: 1; } .bg-primary { background-color: var(--smart-primary); } .bg-secondary { background-color: var(--smart-secondary); } .bg-success { background-color: var(--smart-success); } .bg-info { background-color: var(--smart-info); } .bg-warning { background-color: var(--smart-warning); } .bg-error { background-color: var(--smart-error); } .bg-light { background-color: var(--smart-light); } .bg-dark { background-color: var(--smart-dark); } .smart-animate.smart-ripple { animation: none; } .smart-toggle-box .smart-overlay { left: 0; } /* BUTTON */ smart-button button.smart-button, smart-button a.smart-button, smart-toggle-button button.smart-button, smart-toggle-button a.smart-button, smart-repeat-button button.smart-button, smart-repeat-button a.smart-button { line-height: 1.5; letter-spacing: 0; } smart-button[active], smart-button[focus], smart-toggle-button[active], smart-toggle-button[focus], smart-repeat-button[active], smart-repeat-button[focus] { box-shadow: 0 0 0 0.25rem rgba(var(--smart-border-rgb), 0.5) !important; } smart-button.primary, smart-toggle-button.primary, smart-repeat-button.primary { --smart-button-opacity-hover: 1; --smart-button-opacity-focus: 1; --smart-button-opacity-active: 1; --smart-ui-state-hover: #0069d9; --smart-ui-state-border-hover: #0062cc; --smart-ui-state-active: #0069d9; --smart-ui-state-border-active: #0062cc; --smart-ui-state-focus: #0069d9; --smart-ui-state-border-focus: #0062cc; } smart-button.secondary, smart-toggle-button.secondary, smart-repeat-button.secondary { --smart-button-opacity-hover: 1; --smart-button-opacity-focus: 1; --smart-button-opacity-active: 1; --smart-ui-state-hover: #5a6268; --smart-ui-state-border-hover: #545b62; --smart-ui-state-active: #5a6268; --smart-ui-state-border-active: #545b62; --smart-ui-state-focus: #5a6268; --smart-ui-state-border-focus: #545b62; } smart-button.success, smart-toggle-button.success, smart-repeat-button.success { --smart-button-opacity-hover: 1; --smart-button-opacity-focus: 1; --smart-button-opacity-active: 1; --smart-ui-state-hover: #218838; --smart-ui-state-border-hover: #1e7e34; --smart-ui-state-active: #218838; --smart-ui-state-border-active: #1e7e34; --smart-ui-state-focus: #218838; --smart-ui-state-border-focus: #1e7e34; } smart-button.info, smart-toggle-button.info, smart-repeat-button.info { --smart-button-opacity-hover: 1; --smart-button-opacity-focus: 1; --smart-button-opacity-active: 1; --smart-ui-state-hover: #138496; --smart-ui-state-border-hover: #117a8b; --smart-ui-state-active: #138496; --smart-ui-state-border-active: #117a8b; --smart-ui-state-focus: #138496; --smart-ui-state-border-focus: #117a8b; } smart-button.warning, smart-toggle-button.warning, smart-repeat-button.warning { --smart-button-opacity-hover: 1; --smart-button-opacity-focus: 1; --smart-button-opacity-active: 1; --smart-ui-state-hover: #e0a800; --smart-ui-state-border-hover: #d39e00; --smart-ui-state-active: #e0a800; --smart-ui-state-border-active: #d39e00; --smart-ui-state-focus: #e0a800; --smart-ui-state-border-focus: #d39e00; } smart-button.error, smart-toggle-button.error, smart-repeat-button.error { --smart-button-opacity-hover: 1; --smart-button-opacity-focus: 1; --smart-button-opacity-active: 1; --smart-ui-state-hover: #c82333; --smart-ui-state-border-hover: #bd2130; --smart-ui-state-active: #c82333; --smart-ui-state-border-active: #bd2130; --smart-ui-state-focus: #c82333; --smart-ui-state-border-focus: #bd2130; } smart-button.light, smart-toggle-button.light, smart-repeat-button.light { --smart-button-opacity-hover: 1; --smart-button-opacity-focus: 1; --smart-button-opacity-active: 1; --smart-ui-state-hover: #e2e6ea; --smart-ui-state-border-hover: #dae0e5; --smart-ui-state-active: #e2e6ea; --smart-ui-state-border-active: #dae0e5; --smart-ui-state-focus: #e2e6ea; --smart-ui-state-border-focus: #dae0e5; } smart-button.dark, smart-toggle-button.dark, smart-repeat-button.dark { --smart-button-opacity-hover: 1; --smart-button-opacity-focus: 1; --smart-button-opacity-active: 1; --smart-ui-state-hover: #23272b; --smart-ui-state-border-hover: #1d2124; --smart-ui-state-active: #23272b; --smart-ui-state-border-active: #1d2124; --smart-ui-state-focus: #23272b; --smart-ui-state-border-focus: #1d2124; } smart-button.link, smart-toggle-button.link, smart-repeat-button.link { --smart-background: transparent; --smart-border: transparent; --smart-border-rgb: 0, 123, 255; --smart-background-color: #007bff; --smart-ui-state-hover: transparent; --smart-ui-state-border-hover: transparent; --smart-ui-state-color-hover: #007bff; --smart-ui-state-active: transparent; --smart-ui-state-border-active: transparent; --smart-ui-state-color-active: #007bff; --smart-ui-state-focus: transparent; --smart-ui-state-border-focus: transparent; --smart-ui-state-color-focus: #007bff; --smart-button-flat-color: #007bff; --smart-button-outlined-color: #007bff; --smart-button-outlined-border: transparent; } smart-button.outlined, smart-toggle-button.outlined, smart-repeat-button.outlined { color: var(--smart-button-outlined-color); border-color: var(--smart-button-outlined-border); background: transparent; border-width: var(--smart-border-width); transition: unset; } smart-button.outlined[hover], smart-button.outlined[active], smart-toggle-button.outlined[hover], smart-toggle-button.outlined[active], smart-repeat-button.outlined[hover], smart-repeat-button.outlined[active] { background: var(--smart-ui-state-hover); } /* BUTTON GROUP */ .smart-button-group { background: transparent; display: inline-flex; vertical-align: middle; --smart-button-group-default-height: 38px; border: 0; padding: 5px 0; overflow: unset; height: calc(var(--smart-button-group-default-height) + 10px); } .smart-button-group .smart-button-group-items .smart-button-group-item { letter-spacing: 0; line-height: 1.5; } .smart-button-group .smart-button-group-items .smart-button-group-item:first-of-type { border-bottom-left-radius: var(--smart-border-top-left-radius); border-top-left-radius: var(--smart-border-top-left-radius); } .smart-button-group .smart-button-group-items .smart-button-group-item:last-of-type { border-bottom-right-radius: var(--smart-border-top-left-radius); border-top-right-radius: var(--smart-border-top-left-radius); } .smart-button-group.primary .smart-button-group-items .smart-button-group-item[hover], .smart-button-group.primary .smart-button-group-items .smart-button-group-item:hover { background-color: #005cbf !important; } .smart-button-group.primary .smart-button-group-items .smart-button-group-item[focus] { background-color: #005cbf !important; color: var(--smart-primary-color); box-shadow: 0 0 0 0.25rem rgba(var(--smart-primary-rgb), 0.5) !important; } .smart-button-group.primary .smart-button-group-items .smart-button-group-item:active, .smart-button-group.primary .smart-button-group-items .smart-button-group-item [active] { background-color: #005cbf !important; color: var(--smart-primary-color); } .smart-button-group.secondary .smart-button-group-items .smart-button-group-item[hover], .smart-button-group.secondary .smart-button-group-items .smart-button-group-item:hover { background-color: #4e555b !important; } .smart-button-group.secondary .smart-button-group-items .smart-button-group-item[focus] { background-color: #4e555b !important; color: var(--smart-secondary-color); box-shadow: 0 0 0 0.25rem rgba(var(--smart-secondary-rgb), 0.5) !important; } .smart-button-group.secondary .smart-button-group-items .smart-button-group-item:active, .smart-button-group.secondary .smart-button-group-items .smart-button-group-item [active] { background-color: #4e555b !important; color: var(--smart-secondary-color); } .smart-button-group.success .smart-button-group-items .smart-button-group-item[hover], .smart-button-group.success .smart-button-group-items .smart-button-group-item:hover { background-color: #1c7430 !important; } .smart-button-group.success .smart-button-group-items .smart-button-group-item[focus] { background-color: #1c7430 !important; color: var(--smart-success-color); box-shadow: 0 0 0 0.25rem rgba(var(--smart-success-rgb), 0.5) !important; } .smart-button-group.success .smart-button-group-items .smart-button-group-item:active, .smart-button-group.success .smart-button-group-items .smart-button-group-item [active] { background-color: #1c7430 !important; color: var(--smart-success-color); } .smart-button-group.info .smart-button-group-items .smart-button-group-item[hover], .smart-button-group.info .smart-button-group-items .smart-button-group-item:hover { background-color: #10707f !important; } .smart-button-group.info .smart-button-group-items .smart-button-group-item[focus] { background-color: #10707f !important; color: var(--smart-info-color); box-shadow: 0 0 0 0.25rem rgba(var(--smart-info-rgb), 0.5) !important; } .smart-button-group.info .smart-button-group-items .smart-button-group-item:active, .smart-button-group.info .smart-button-group-items .smart-button-group-item [active] { background-color: #10707f !important; color: var(--smart-info-color); } .smart-button-group.warning .smart-button-group-items .smart-button-group-item[hover], .smart-button-group.warning .smart-button-group-items .smart-button-group-item:hover { background-color: #c69500 !important; } .smart-button-group.warning .smart-button-group-items .smart-button-group-item[focus] { background-color: #c69500 !important; color: var(--smart-warning-color); box-shadow: 0 0 0 0.25rem rgba(var(--smart-warning-rgb), 0.5) !important; } .smart-button-group.warning .smart-button-group-items .smart-button-group-item:active, .smart-button-group.warning .smart-button-group-items .smart-button-group-item [active] { background-color: #c69500 !important; color: var(--smart-warning-color); } .smart-button-group.error .smart-button-group-items .smart-button-group-item[hover], .smart-button-group.error .smart-button-group-items .smart-button-group-item:hover { background-color: #b21f2d !important; } .smart-button-group.error .smart-button-group-items .smart-button-group-item[focus] { background-color: #b21f2d !important; color: var(--smart-error-color); box-shadow: 0 0 0 0.25rem rgba(var(--smart-error-rgb), 0.5) !important; } .smart-button-group.error .smart-button-group-items .smart-button-group-item:active, .smart-button-group.error .smart-button-group-items .smart-button-group-item [active] { background-color: #b21f2d !important; color: var(--smart-error-color); } .smart-button-group.light .smart-button-group-items .smart-button-group-item[hover], .smart-button-group.light .smart-button-group-items .smart-button-group-item:hover { background-color: #d3d9df !important; } .smart-button-group.light .smart-button-group-items .smart-button-group-item[focus] { background-color: #d3d9df !important; color: var(--smart-light-color); box-shadow: 0 0 0 0.25rem rgba(var(--smart-light-rgb), 0.5) !important; } .smart-button-group.light .smart-button-group-items .smart-button-group-item:active, .smart-button-group.light .smart-button-group-items .smart-button-group-item [active] { background-color: #d3d9df !important; color: var(--smart-light-color); } .smart-button-group.dark .smart-button-group-items .smart-button-group-item[hover], .smart-button-group.dark .smart-button-group-items .smart-button-group-item:hover { background-color: #171a1d !important; } .smart-button-group.dark .smart-button-group-items .smart-button-group-item[focus] { background-color: #171a1d !important; color: var(--smart-dark-color); box-shadow: 0 0 0 0.25rem rgba(var(--smart-dark-rgb), 0.5) !important; } .smart-button-group.dark .smart-button-group-items .smart-button-group-item:active, .smart-button-group.dark .smart-button-group-items .smart-button-group-item [active] { background-color: #171a1d !important; color: var(--smart-dark-color); } .smart-button-group.pagination .smart-button-group-items .smart-button-group-item { border: 1px solid #dee2e6; color: #007bff; background: #ffffff; } .smart-button-group.pagination .smart-button-group-items .smart-button-group-item:not(:last-of-type) { border-right: 1px solid transparent; } .smart-button-group.pagination .smart-button-group-items .smart-button-group-item[hover], .smart-button-group.pagination .smart-button-group-items .smart-button-group-item:hover, .smart-button-group.pagination .smart-button-group-items .smart-button-group-item[focus] { background-color: #e9ecef !important; color: #0056b3; } .smart-button-group.pagination .smart-button-group-items .smart-button-group-item:active, .smart-button-group.pagination .smart-button-group-items .smart-button-group-item[active] { background-color: var(--smart-primary) !important; color: var(--smart-primary-color) !important; } .smart-button-group.small { font-size: var(--smart-button-small-font-size); height: calc(var(--smart-button-group-default-height) + 3px); } .smart-button-group.small .smart-button-group-items .smart-button-group-item { padding: var(--smart-button-small-padding); } .smart-button-group.large { font-size: var(--smart-button-large-font-size); height: calc(var(--smart-button-group-default-height) + 20px); } .smart-button-group.large .smart-button-group-items .smart-button-group-item { padding: var(--smart-button-large-padding); } /* BADGE */ .smart-badge { padding: 0.25em 0.4em; font-weight: 700; font-size: 75%; line-height: 1; border-radius: 0.25rem; } a.smart-badge { text-decoration: none !important; } a.smart-badge[active], a.smart-badge:active, a.smart-badge[focus], a.smart-badge:focus { box-shadow: 0 0 0 0.25rem rgba(var(--smart-secondary-rgb), 0.5) !important; } /* BREADCRUMB */ smart-breadcrumb { width: 100%; height: auto; background: #e9ecef; padding: 0.75rem 1rem; border: 0; margin-bottom: 1rem; border-radius: 0.25rem; } smart-breadcrumb a { color: #007bff; text-decoration: none; } smart-breadcrumb.smart-element { background: #e9ecef; } smart-breadcrumb .smart-template-container .smart-breadcrumb-items .smart-breadcrumb-item { height: auto; padding: 2px 0.5rem 2px 0; margin: 0; border: 0; background: transparent; } smart-breadcrumb .smart-template-container .smart-breadcrumb-items .smart-breadcrumb-item:last-child { color: #6c757d; } smart-breadcrumb .smart-template-container .smart-breadcrumb-items .smart-breadcrumb-item:after { display: none; } smart-breadcrumb .smart-template-container .smart-breadcrumb-items .smart-breadcrumb-item:not(:first-child):before { padding-right: 0.5rem; color: #6c757d; content: "/"; float: revert; position: relative; width: auto; top: 0; left: 0; height: auto; background: transparent; } /* ACCORDION */ .smart-accordion > .smart-container { overflow: hidden; } .smart-accordion .smart-accordion-item { background: #ffffff; border-radius: 0; box-shadow: unset; margin: 0 !important; overflow: hidden; } .smart-accordion .smart-accordion-item:hover .smart-accordion-item-header, .smart-accordion .smart-accordion-item[hover] .smart-accordion-item-header, .smart-accordion .smart-accordion-item[focus] .smart-accordion-item-header, .smart-accordion .smart-accordion-item[focused] .smart-accordion-item-header, .smart-accordion .smart-accordion-item[expanded] .smart-accordion-item-header { background: rgba(0, 0, 0, 0.03); } .smart-accordion .smart-accordion-item .smart-accordion-item-header { padding: 0px; background: rgba(0, 0, 0, 0.03); } .smart-accordion .smart-accordion-item .smart-accordion-item-header .smart-arrow { display: none; } .smart-accordion .smart-accordion-item .smart-accordion-item-header .smart-label { font-size: 1rem; color: #007bff; padding: 0.375rem 0.75rem; } .smart-accordion .smart-accordion-item .smart-container { border: 1px solid rgba(0, 0, 0, 0.125); } .smart-accordion .smart-accordion-item:last-of-type .smart-container { border-bottom-left-radius: 0.25rem; border-bottom-right-radius: 0.25rem; } .smart-accordion .smart-accordion-item:first-of-type .smart-container { border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; } .smart-accordion .smart-accordion-item:not(:last-of-type) .smart-container { border-bottom: 0; } /* DROPDOWN BUTTON */ smart-drop-down-button { --smart-tree-item-horizontal-offset: 0; --smart-editor-drop-down-max-height: none; --smart-border-radius: 0; } smart-drop-down-button smart-tree { height: auto; width: auto; } smart-drop-down-button .smart-drop-down smart-tree { border: 0; } smart-drop-down-button .smart-drop-down-container { --smart-border: rgba(0, 0, 0, 0.15); min-width: 10rem !important; padding: 0.5rem 0 !important; margin: 0.325rem 0 0 !important; font-size: 1rem !important; color: #212529; text-align: left; list-style: none; background-clip: padding-box; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 0.25rem; box-shadow: unset !important; } smart-drop-down-button .smart-date-time-picker .smart-drop-down[bottom], smart-drop-down-button .smart-date-time-picker .smart-drop-down, smart-drop-down-button .smart-drop-down-button .smart-drop-down[bottom], smart-drop-down-button .smart-drop-down-button .smart-drop-down, smart-drop-down-button .smart-text-box .smart-drop-down[bottom], smart-drop-down-button .smart-text-box .smart-drop-down, smart-drop-down-button .smart-drop-down-list .smart-drop-down[bottom], smart-drop-down-button .smart-drop-down-list .smart-drop-down, smart-drop-down-button .smart-combo-box .smart-drop-down[bottom], smart-drop-down-button .smart-combo-box .smart-drop-down, smart-drop-down-button .smart-multi-split-button .smart-drop-down[bottom], smart-drop-down-button .smart-multi-split-button .smart-drop-down, smart-drop-down-button .smart-color-picker .smart-drop-down[bottom], smart-drop-down-button .smart-color-picker .smart-drop-down, smart-drop-down-button .smart-path .smart-drop-down[bottom], smart-drop-down-button .smart-path .smart-drop-down { --smart-editor-drop-down-min-width: auto; border: 1px solid rgba(0, 0, 0, 0.15); } smart-drop-down-button .smart-tree-main-container .smart-tree-item { border-radius: 0; border: 0 !important; margin: 0; } smart-drop-down-button .smart-tree-main-container .smart-tree-item:focus:hover .smart-tree-item-label-container, smart-drop-down-button .smart-tree-main-container .smart-tree-item:focus .smart-tree-item-label-container, smart-drop-down-button .smart-tree-main-container .smart-tree-item[focus][hover] .smart-tree-item-label-container, smart-drop-down-button .smart-tree-main-container .smart-tree-item[focus] .smart-tree-item-label-container { background: #007bff; color: #ffffff; } smart-drop-down-button .smart-tree-main-container .smart-tree-item[selected] .smart-tree-item-label-container, smart-drop-down-button .smart-tree-main-container .smart-tree-item:hover .smart-tree-item-label-container, smart-drop-down-button .smart-tree-main-container .smart-tree-item[hover] .smart-tree-item-label-container { background: #e9ecef; color: #212529; } smart-drop-down-button[opened] { box-shadow: 0 0 0 0.25rem rgba(var(--smart-primary-rgb), 0.5) !important; } smart-drop-down-button[opened] .smart-drop-down-button .smart-drop-down-button-icon:after, smart-drop-down-button[opened] .smart-drop-down-button[bottom] .smart-drop-down-button-icon:after, smart-drop-down-button[opened] .smart-drop-down-button[center-bottom] .smart-drop-down-button-icon:after { transform: unset !important; } smart-drop-down-button .smart-drop-down-button[top] .smart-drop-down-button-icon:after, smart-drop-down-button .smart-drop-down-button[center-top] .smart-drop-down-button-icon:after { transform: unset !important; } smart-drop-down-button .smart-buttons-container .smart-drop-down-button .smart-drop-down-button-icon:after { font-size: unset !important; display: inline-block; margin-left: 0.255em; vertical-align: 0.255em; content: "" !important; border-top: 0.3em solid; border-right: 0.3em solid transparent; border-bottom: 0; border-left: 0.3em solid transparent; } smart-drop-down-button.primary { --smart-button-opacity-hover: 1; --smart-button-opacity-focus: 1; --smart-button-opacity-active: 1; --smart-ui-state-color-active: var(--smart-primary-color); --smart-ui-state-hover: #0069d9; --smart-ui-state-border-hover: #0062cc; --smart-ui-state-active: #0069d9; --smart-ui-state-border-active: #0062cc; --smart-ui-state-focus: #0069d9; --smart-ui-state-border-focus: #0062cc; --smart-ui-state-color-hover: var(--smart-primary-color); } smart-drop-down-button.primary[opened] { box-shadow: 0 0 0 0.25rem rgba(var(--smart-primary-rgb), 0.5) !important; } smart-drop-down-button.secondary { --smart-button-opacity-hover: 1; --smart-button-opacity-focus: 1; --smart-button-opacity-active: 1; --smart-ui-state-color-active: var(--smart-secondary-color); --smart-ui-state-hover: #5a6268; --smart-ui-state-border-hover: #545b62; --smart-ui-state-active: #5a6268; --smart-ui-state-border-active: #545b62; --smart-ui-state-focus: #5a6268; --smart-ui-state-border-focus: #545b62; --smart-ui-state-color-hover: var(--smart-secondary-color); } smart-drop-down-button.secondary[opened] { box-shadow: 0 0 0 0.25rem rgba(var(--smart-secondary-rgb), 0.5) !important; } smart-drop-down-button.success { --smart-button-opacity-hover: 1; --smart-button-opacity-focus: 1; --smart-button-opacity-active: 1; --smart-ui-state-color-active: var(--smart-success-color); --smart-ui-state-hover: #218838; --smart-ui-state-border-hover: #1e7e34; --smart-ui-state-active: #218838; --smart-ui-state-border-active: #1e7e34; --smart-ui-state-focus: #218838; --smart-ui-state-border-focus: #1e7e34; --smart-ui-state-color-hover: var(--smart-success-color); } smart-drop-down-button.success[opened] { box-shadow: 0 0 0 0.25rem rgba(var(--smart-success-rgb), 0.5) !important; } smart-drop-down-button.info { --smart-button-opacity-hover: 1; --smart-button-opacity-focus: 1; --smart-button-opacity-active: 1; --smart-ui-state-color-active: var(--smart-info-color); --smart-ui-state-hover: #138496; --smart-ui-state-border-hover: #117a8b; --smart-ui-state-active: #138496; --smart-ui-state-border-active: #117a8b; --smart-ui-state-focus: #138496; --smart-ui-state-border-focus: #117a8b; --smart-ui-state-color-hover: var(--smart-info-color); } smart-drop-down-button.info[opened] { box-shadow: 0 0 0 0.25rem rgba(var(--smart-info-rgb), 0.5) !important; } smart-drop-down-button.warning { --smart-button-opacity-hover: 1; --smart-button-opacity-focus: 1; --smart-button-opacity-active: 1; --smart-ui-state-color-active: var(--smart-warning-color); --smart-ui-state-hover: #e0a800; --smart-ui-state-border-hover: #d39e00; --smart-ui-state-active: #e0a800; --smart-ui-state-border-active: #d39e00; --smart-ui-state-focus: #e0a800; --smart-ui-state-border-focus: #d39e00; --smart-ui-state-color-hover: var(--smart-warning-color); } smart-drop-down-button.warning[opened] { box-shadow: 0 0 0 0.25rem rgba(var(--smart-warning-rgb), 0.5) !important; } smart-drop-down-button.error { --smart-button-opacity-hover: 1; --smart-button-opacity-focus: 1; --smart-button-opacity-active: 1; --smart-ui-state-color-active: var(--smart-error-color); --smart-ui-state-hover: #c82333; --smart-ui-state-border-hover: #bd2130; --smart-ui-state-active: #c82333; --smart-ui-state-border-active: #bd2130; --smart-ui-state-focus: #c82333; --smart-ui-state-border-focus: #bd2130; --smart-ui-state-color-hover: var(--smart-error-color); } smart-drop-down-button.error[opened] { box-shadow: 0 0 0 0.25rem rgba(var(--smart-error-rgb), 0.5) !important; } smart-drop-down-button.light { --smart-button-opacity-hover: 1; --smart-button-opacity-focus: 1; --smart-button-opacity-active: 1; --smart-ui-state-color-active: var(--smart-light-color); --smart-ui-state-hover: #e2e6ea; --smart-ui-state-border-hover: #dae0e5; --smart-ui-state-active: #e2e6ea; --smart-ui-state-border-active: #dae0e5; --smart-ui-state-focus: #e2e6ea; --smart-ui-state-border-focus: #dae0e5; --smart-ui-state-color-hover: var(--smart-light-color); } smart-drop-down-button.light[opened] { box-shadow: 0 0 0 0.25rem rgba(var(--smart-light-rgb), 0.5) !important; } smart-drop-down-button.dark { --smart-button-opacity-hover: 1; --smart-button-opacity-focus: 1; --smart-button-opacity-active: 1; --smart-ui-state-color-active: var(--smart-dark-color); --smart-ui-state-hover: #23272b; --smart-ui-state-border-hover: #1d2124; --smart-ui-state-active: #23272b; --smart-ui-state-border-active: #1d2124; --smart-ui-state-focus: #23272b; --smart-ui-state-border-focus: #1d2124; --smart-ui-state-color-hover: var(--smart-dark-color); } smart-drop-down-button.dark[opened] { box-shadow: 0 0 0 0.25rem rgba(var(--smart-dark-rgb), 0.5) !important; } smart-drop-down-button[animation=none] .smart-drop-down-container { animation: unset !important; } smart-drop-down-button[animation=none] .smart-date-time-picker .smart-drop-down[bottom], smart-drop-down-button[animation=none] .smart-date-time-picker .smart-drop-down, smart-drop-down-button[animation=none] .smart-drop-down-button .smart-drop-down[bottom], smart-drop-down-button[animation=none] .smart-drop-down-button .smart-drop-down, smart-drop-down-button[animation=none] .smart-text-box .smart-drop-down[bottom], smart-drop-down-button[animation=none] .smart-text-box .smart-drop-down, smart-drop-down-button[animation=none] .smart-drop-down-list .smart-drop-down[bottom], smart-drop-down-button[animation=none] .smart-drop-down-list .smart-drop-down, smart-drop-down-button[animation=none] .smart-combo-box .smart-drop-down[bottom], smart-drop-down-button[animation=none] .smart-combo-box .smart-drop-down, smart-drop-down-button[animation=none] .smart-multi-split-button .smart-drop-down[bottom], smart-drop-down-button[animation=none] .smart-multi-split-button .smart-drop-down, smart-drop-down-button[animation=none] .smart-color-picker .smart-drop-down[bottom], smart-drop-down-button[animation=none] .smart-color-picker .smart-drop-down, smart-drop-down-button[animation=none] .smart-path .smart-drop-down[bottom], smart-drop-down-button[animation=none] .smart-path .smart-drop-down { animation: unset; } /* SCHEDULER */ smart-scheduler * { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important; } smart-scheduler .smart-scheduler-date-nav, smart-scheduler .smart-scheduler-header, smart-scheduler .smart-scheduler-footer { background: transparent; } smart-scheduler:not(.bordered) { --smart-scheduler-day-week-view-vertical-line-color: transparent; /* Vertical timeline color in 'day' and 'week' views */ } smart-scheduler.bordered { --smart-scheduler-day-week-view-vertical-line-color: #dee2e6; /* Vertical timeline color in 'day' and 'week' views */ } smart-scheduler.no-border { border: 0; } smart-scheduler .smart-scheduler-view-header-horizontal .smart-scheduler-cells { font-weight: bold; } smart-scheduler[view-type=week] .smart-scheduler-view-header-horizontal .smart-scheduler-cell { border-left: 0; } smart-scheduler:not([view-type^=timeline]) .smart-scheduler-cells-container .smart-scheduler-cell.scale:not(:last-of-type) { border-color: #dee2e6 !important; } smart-scheduler:not(.table-primary).striped .smart-scheduler-cells-container .smart-scheduler-cell-container { background: transparent; } smart-scheduler:not(.table-primary).striped .smart-scheduler-cells-container .smart-scheduler-cell-container > .smart-scheduler-cell:nth-child(odd) { background: rgba(0, 0, 0, 0.05); } smart-scheduler:not(.table-primary).striped .smart-scheduler-cells-container .smart-scheduler-cell-container > .smart-scheduler-cell .smart-scheduler-cell { background-color: transparent; } smart-scheduler:not(.table-primary).striped .smart-scheduler-cells-container .smart-scheduler-cell-container > .smart-scheduler-cell .smart-scheduler-cell[selected] { background-color: rgba(var(--smart-primary-rgb), .3); } smart-scheduler:not(.table-primary).striped .smart-scheduler-cells-container .smart-scheduler-cell-container > .smart-scheduler-cell .smart-scheduler-cell[selected]:hover { background-color: rgba(var(--smart-primary-rgb), .3); } smart-scheduler:not(.table-primary).striped .smart-scheduler-cells-container .smart-scheduler-cell-container > .smart-scheduler-cell .smart-scheduler-cell:hover { background-color: rgba(var(--smart-primary-rgb), .1); } smart-scheduler:not(.table-primary).hover .smart-scheduler-cells-container .smart-scheduler-cell-container { background: transparent; } smart-scheduler:not(.table-primary).hover .smart-scheduler-cells-container .smart-scheduler-cell-container > .smart-scheduler-cell:hover { background: rgba(0, 0, 0, 0.075); } smart-scheduler:not(.table-primary).hover .smart-scheduler-cells-container .smart-scheduler-cell-container > .smart-scheduler-cell:hover .smart-scheduler-cell { background-color: transparent; } smart-scheduler:not(.table-primary).hover .smart-scheduler-cells-container .smart-scheduler-cell-container > .smart-scheduler-cell:hover .smart-scheduler-cell:hover { background-color: rgba(var(--smart-primary-rgb), .1); } smart-scheduler:not(.table-primary).hover .smart-scheduler-cells-container .smart-scheduler-cell-container > .smart-scheduler-cell:hover .smart-scheduler-cell[selected] { background-color: rgba(var(--smart-primary-rgb), .3); } smart-scheduler:not(.table-primary).hover .smart-scheduler-cells-container .smart-scheduler-cell-container > .smart-scheduler-cell:hover .smart-scheduler-cell[selected]:hover { background-color: rgba(var(--smart-primary-rgb), .3); } smart-scheduler.table-primary { --smart-background: var(--smart-primary); --smart-background-color: #ffffff; --smart-surface-color: #ffffff; } smart-scheduler.table-primary smart-button .smart-button:not([hover]) { color: #ffffff !important; } smart-scheduler.table-primary smart-button .smart-button[focus], smart-scheduler.table-primary smart-button .smart-button[hover] { color: #000000 !important; } smart-scheduler.table-primary .smart-scheduler-cells:not([selected]), smart-scheduler.table-primary .smart-scheduler-cell:not([selected]) { background-color: transparent !important; background: transparent !important; } smart-scheduler.table-primary .smart-scheduler-cell-container { background: transparent; } smart-scheduler.table-primary .smart-scheduler-cell-container .smart-scheduler-cell { background-color: transparent; } smart-scheduler:not(.table-secondary).striped .smart-scheduler-cells-container .smart-scheduler-cell-container { background: transparent; } smart-scheduler:not(.table-secondary).striped .smart-scheduler-cells-container .smart-scheduler-cell-container > .smart-scheduler-cell:nth-child(odd) { background: rgba(0, 0, 0, 0.05); } smart-scheduler:not(.table-secondary).striped .smart-scheduler-cells-container .smart-scheduler-cell-container > .smart-scheduler-cell .smart-scheduler-cell { background-color: transparent; } smart-scheduler:not(.table-secondary).striped .smart-scheduler-cells-container .smart-scheduler-cell-container > .smart-scheduler-cell .smart-scheduler-cell[selected] { background-color: rgba(var(--smart-primary-rgb), .3); } smart-scheduler:not(.table-secondary).striped .smart-scheduler-cells-container .smart-scheduler-cell-container > .smart-scheduler-cell .smart-scheduler-cell[selected]:hover { background-color: rgba(var(--smart-primary-rgb), .3); } smart-scheduler:not(.table-secondary).striped .smart-scheduler-cells-container .smart-scheduler-cell-container > .smart-scheduler-cell .smart-scheduler-cell:hover { background-color: rgba(var(--smart-primary-rgb), .1); } smart-scheduler:not(.table-secondary).hover .smart-scheduler-cells-container .smart-scheduler-cell-container { background: transparent; } smart-scheduler:not(.table-secondary).hover .smart-scheduler-cells-container .smart-scheduler-cell-container > .smart-scheduler-cell:hover { background: rgba(0, 0, 0, 0.075); } smart-scheduler:not(.table-secondary).hover .smart-scheduler-cells-container .smart-scheduler-cell-container > .smart-scheduler-cell:hover .smart-scheduler-cell { background-color: transparent; } smart-scheduler:not(.table-secondary).hover .smart-scheduler-cells-container .smart-scheduler-cell-container > .smart-scheduler-cell:hover .smart-scheduler-cell:hover { background-color: rgba(var(--smart-primary-rgb), .1); } smart-scheduler:not(.table-secondary).hover .smart-scheduler-cells-container .smart-scheduler-cell-container > .smart-scheduler-cell:hover .smart-scheduler-cell[selected] { background-color: rgba(var(--smart-primary-rgb), .3); } smart-scheduler:not(.table-secondary).hover .smart-scheduler-cells-container .smart-scheduler-cell-container > .smart-scheduler-cell:hover .smart-scheduler-cell[selected]:hover { background-color: rgba(var(--smart-primary-rgb), .3); } smart-scheduler.table-secondary { --smart-background: var(--smart-secondary); --smart-background-color: #ffffff; --smart-surface-color: #ffffff; } smart-scheduler.table-secondary smart-button .smart-button:not([hover]) { color: #ffffff !important; } smart-scheduler.table-secondary smart-button .smart-button[focus], smart-scheduler.table-secondary smart-button .smart-button[hover] { color: #000000 !important; } smart-scheduler.table-secondary .smart-scheduler-cells:not([selected]), smart-scheduler.table-secondary .smart-scheduler-cell:not([selected]) { background-color: transparent !important; background: transparent !important; } smart-scheduler.table-secondary .smart-scheduler-cell-container { background: transparent; } smart-scheduler.table-secondary .smart-scheduler-cell-container .smart-scheduler-cell { background-color: transparent; } smart-scheduler:not(.table-success).striped .smart-scheduler-cells-container .smart-scheduler-cell-container { background: transparent; } smart-scheduler:not(.table-success).striped .smart-scheduler-cells-container .smart-scheduler-cell-container > .smart-scheduler-cell:nth-child(odd) { background: rgba(0, 0, 0, 0.05); } smart-scheduler:not(.table-success).striped .smart-scheduler-cells-container .smart-scheduler-cell-container > .smart-scheduler-cell .smart-scheduler-cell { background-color: transparent; } smart-scheduler:not(.table-success).striped .smart-scheduler-cells-container .smart-scheduler-cell-container > .smart-scheduler-cell .smart-scheduler-cell[selected] { background-color: rgba(var(--smart-primary-rgb), .3); } smart-scheduler:not(.table-success).striped .smart-scheduler-cells-container .smart-scheduler-cell-container > .smart-scheduler-cell .smart-scheduler-cell[selected]:hover { background-color: rgba(var(--smart-primary-rgb), .3); } smart-scheduler:not(.table-success).striped .smart-scheduler-cells-container .smart-scheduler-cell-container > .smart-scheduler-cell .smart-scheduler-cell:hover { background-color: rgba(var(--smart-primary-rgb), .1); } smart-scheduler:not(.table-success).hover .smart-scheduler-cells-container .smart-scheduler-cell-container { background: transparent; } smart-scheduler:not(.table-success).hover .smart-scheduler-cells-container .smart-scheduler-cell-container > .smart-scheduler-cell:hover { background: rgba(0, 0, 0, 0.075); } smart-scheduler:not(.table-success).hover .smart-scheduler-cells-container .smart-scheduler-cell-container > .smart-scheduler-cell:hover .smart-scheduler-cell { background-color: transparent; } smart-scheduler:not(.table-success).hover .smart-scheduler-cells-container .smart-scheduler-cell-container > .smart-scheduler-cell:hover .smart-scheduler-cell:hover { background-color: rgba(var(--smart-primary-rgb), .1); } smart-scheduler:not(.table-success).hover .smart-scheduler-cells-container .smart-scheduler-cell-container > .smart-scheduler-cell:hover .smart-scheduler-cell[selected] { background-color: rgba(var(--smart-primary-rgb), .3); } smart-scheduler:not(.table-success).hover .smart-scheduler-cells-container .smart-scheduler-cell-container > .smart-scheduler-cell:hover .smart-scheduler-cell[selected]:hover { background-color: rgba(var(--smart-primary-rgb), .3); } smart-scheduler.table-success { --smart-background: var(--smart-success); --smart-background-color: #ffffff; --smart-surface-color: #ffffff; } smart-scheduler.table-success smart-button .smart-button:not([hover]) { color: #ffffff !important; } smart-scheduler.table-success smart-button .smart-button[focus], smart-scheduler.table-success smart-button .smart-button[hover] { color: #000000 !important; } smart-scheduler.table-success .smart-scheduler-cells:not([selected]), smart-scheduler.table-success .smart-scheduler-cell:not([selected]) { background-color: transparent !important; background: transparent !important; } smart-scheduler.table-success .smart-scheduler-cell-container { background: transparent; } smart-scheduler.table-success .smart-scheduler-cell-container .smart-scheduler-cell { background-color: transparent; } smart-scheduler:not(.table-info).striped .smart-scheduler-cells-container .smart-scheduler-cell-container { background: transparent; } smart-scheduler:not(.table-info).striped .smart-scheduler-cells-container .smart-scheduler-cell-container > .smart-scheduler-cell:nth-child(odd) { background: rgba(0, 0, 0, 0.05); } smart-scheduler:not(.table-info).striped .smart-scheduler-cells-container .smart-scheduler-cell-container > .smart-scheduler-cell .smart-scheduler-cell { background-color: transparent; } smart-scheduler:not(.table-info).striped .smart-scheduler-cells-container .smart-scheduler-cell-container > .smart-scheduler-cell .smart-scheduler-cell[selected] { background-color: rgba(var(--smart-primary-rgb), .3); } smart-scheduler:not(.table-info).striped .smart-scheduler-cells-container .smart-scheduler-cell-container > .smart-scheduler-cell .smart-scheduler-cell[selected]:hover { background-color: rgba(var(--smart-primary-rgb), .3); } smart-scheduler:not(.table-info).striped .smart-scheduler-cells-container .smart-scheduler-cell-container > .smart-scheduler-cell .smart-scheduler-cell:hover { background-color: rgba(var(--smart-primary-rgb), .1); } smart-scheduler:not(.table-info).hover .smart-scheduler-cells-container .smart-scheduler-cell-container { background: transparent; } smart-scheduler:not(.table-info).hover .smart-scheduler-cells-container .smart-scheduler-cell-container > .smart-scheduler-cell:hover { background: rgba(0, 0, 0, 0.075); } smart-scheduler:not(.table-info).hover .smart-scheduler-cells-container .smart-scheduler-cell-container > .smart-scheduler-cell:hover .smart-scheduler-cell { background-color: transparent; } smart-scheduler:not(.table-info).hover .smart-scheduler-cells-container .smart-scheduler-cell-container > .smart-scheduler-cell:hover .smart-scheduler-cell:hover { background-color: rgba(var(--smart-primary-rgb), .1); } smart-scheduler:not(.table-info).hover .smart-scheduler-cells-container .smart-scheduler-cell-container > .smart-scheduler-cell:hover .smart-scheduler-cell[selected] { background-color: rgba(var(--smart-primary-rgb), .3); } smart-scheduler:not(.table-info).hover .smart-scheduler-cells-container .smart-scheduler-cell-container > .smart-scheduler-cell:hover .smart-scheduler-cell[selected]:hover { background-color: rgba(var(--smart-primary-rgb), .3); } smart-scheduler.table-info { --smart-background: var(--smart-info); --smart-background-color: #ffffff; --smart-surface-color: #ffffff; } smart-scheduler.table-info smart-button .smart-button:not([hover]) { color: #ffffff !important; } smart-scheduler.table-info smart-button .smart-button[focus], smart-scheduler.table-info smart-button .smart-button[hover] { color: #000000 !important; } smart-scheduler.table-info .smart-scheduler-cells:not([selected]), smart-scheduler.table-info .smart-scheduler-cell:not([selected]) { background-color: transparent !important; background: transparent !important; } smart-scheduler.table-info .smart-scheduler-cell-container { background: transparent; } smart-scheduler.table-info .smart-scheduler-cell-container .smart-scheduler-cell { background-color: transparent; } smart-scheduler:not(.table-warning).striped .smart-scheduler-cells-container .smart-scheduler-cell-container { background: transparent; } smart-scheduler:not(.table-warning).striped .smart-scheduler-cells-container .smart-scheduler-cell-container > .smart-scheduler-cell:nth-child(odd) { background: rgba(0, 0, 0, 0.05); } smart-scheduler:not(.table-warning).striped .smart-scheduler-cells-container .smart-scheduler-cell-container > .smart-scheduler-cell .smart-scheduler-cell { background-color: transparent; } smart-scheduler:not(.table-warning).striped .smart-scheduler-cells-container .smart-scheduler-cell-container > .smart-scheduler-cell .smart-scheduler-cell[selected] { background-color: rgba(var(--smart-primary-rgb), .3); } smart-schedul