GNM-1226 css Tree-Loading angepasst
diff --git a/src/styles.css b/src/styles.css index b1881e8..80228c7 100644 --- a/src/styles.css +++ b/src/styles.css
@@ -33,271 +33,271 @@ input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { - transition: background-color 5000s ease-in-out 0s; + transition: background-color 5000s ease-in-out 0s; } html { - overflow-y: auto; - -ms-overflow-style: scrollbar; + overflow-y: auto; + -ms-overflow-style: scrollbar; } body { - background: #f8fafd; + background: #f8fafd; } .margin-top { - margin-top: 15px; + margin-top: 15px; } .margin-zero { - margin: 0; + margin: 0; } .spacer { - margin-top: 15px; + margin-top: 15px; } /* General panel styling */ div.panel-group { - margin: 15px; + margin: 15px; } div.panel-default { - min-height: 0; - margin: 15px 0px; + min-height: 0; + margin: 15px 0px; } @media screen and (-webkit-min-device-pixel-ratio:0) { - div.panel-default { - padding: 1px 0px 0px 1px; - } + div.panel-default { + padding: 1px 0px 0px 1px; + } } div.panel-default>.panel-heading { - background-color: #f5f8fc; + background-color: #f5f8fc; } /* General button styling */ .btn { - border-radius: 6px; + border-radius: 6px; } /* General table styling */ .table-striped { - margin: 0; - padding: 5px; - vertical-align: middle; + margin: 0; + padding: 5px; + vertical-align: middle; } /* Ag-Grid stuff */ .ag-theme-balham { - font-size: 14px; - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 14px; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } .ag-theme-balham .ag-header { - background-color: #f5f8fc; + background-color: #f5f8fc; } span.ag-row-drag { - cursor: move; - /* fallback if grab cursor is unsupported */ - /*cursor: grab; + cursor: move; + /* fallback if grab cursor is unsupported */ + /*cursor: grab; cursor: -moz-grab; cursor: -webkit-grab;*/ } span.ag-row-drag:active { - cursor: grabbing; - cursor: -moz-grabbing; - cursor: -webkit-grabbing; + cursor: grabbing; + cursor: -moz-grabbing; + cursor: -webkit-grabbing; } /* Ag-Grid stuff end */ .grid-measures-header { - font-size: 14px; - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 14px; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } .grid-measure-check-col { - line-height: 1.42857143; - width: 1%; - padding-right: 6px; + line-height: 1.42857143; + width: 1%; + padding-right: 6px; } .grid-measure-tab-date-col { - width: 8%; + width: 8%; } .grid-measure-tab-id { - width: 10%; + width: 10%; } .grid-measure-mode { - width: 40px; + width: 40px; } .grid-measure-mode span { - margin-left: 0px !important; + margin-left: 0px !important; } .grid-measure-tab-branche { - width: 5%; - text-align: center; - padding-right: 2px; + width: 5%; + text-align: center; + padding-right: 2px; } .grid-measure-tab-status .ag-cell-label-container .ag-header-cell-label { - justify-content: center; + justify-content: center; } .grid-measure-tab-branche .ag-cell-label-container .ag-header-cell-label { - justify-content: center; + justify-content: center; } .grid-measure-tab-title { - width: 30%; + width: 30%; } .grid-measure-tab-createUser { - width: 15%; + width: 15%; } .grid-measure-tab-affectedResource { - width: 20%; + width: 20%; } .grid-measure-tab-status { - width: 10%; - text-align: center; + width: 10%; + text-align: center; } .ag-layout-normal .ag-body-viewport { - height: 99% !important; + height: 99% !important; } .table-striped>tbody>tr:nth-of-type(odd) { - background: #e9f0f9; + background: #e9f0f9; } .table>thead>tr>th { - padding: 5px; - vertical-align: bottom; + padding: 5px; + vertical-align: bottom; } .table>tbody>tr>td { - padding: 5px; - vertical-align: middle; + padding: 5px; + vertical-align: middle; } /* General dialog styling */ .mat-dialog-container { - background: #f8fafd; + background: #f8fafd; } .dialog { - overflow: auto; - width: 75vw; - height: 75vh; - margin: 0px 0px 15px 0px; + overflow: auto; + width: 75vw; + height: 75vh; + margin: 0px 0px 15px 0px; } /* Login styling */ .login-outer { - width: 100%; - height: 90%; - position: absolute; - display: flex; - align-items: center; - justify-content: center; - background: #f8fafd; + width: 100%; + height: 90%; + position: absolute; + display: flex; + align-items: center; + justify-content: center; + background: #f8fafd; } .login-inner { - width: 240px; - height: 320px; + width: 240px; + height: 320px; } .login-error-message { - color: red; + color: red; } .login-margin-top5 { - margin-top: 5px; + margin-top: 5px; } .login-margin-top10 { - margin-top: 10px; + margin-top: 10px; } .maincontent { - background: #ffffff; - padding: 0px 0px 1px 0px; - margin: 15px; - color: #333333; - min-width: inherit; + background: #ffffff; + padding: 0px 0px 1px 0px; + margin: 15px; + color: #333333; + min-width: inherit; } .maincontent>.row { - background: #f8fafd; - margin: 0; - padding: 0; + background: #f8fafd; + margin: 0; + padding: 0; } /* Responsibility dialog styling */ .responsibility-dialog { - overflow: auto; - width: 40vw; - height: auto; - margin: 0px 0px 15px 0px; + overflow: auto; + width: 40vw; + height: auto; + margin: 0px 0px 15px 0px; } .responsibility-column-striped>thead th { - text-align: center; + text-align: center; } .responsibility-column-striped>tbody td:nth-of-type(even) { - background: #f5f8fc; + background: #f5f8fc; } .responsibility-column-striped>tbody td { - text-align: center; + text-align: center; } .responsibility-column-striped>tbody td:first-child { - text-align: left; + text-align: left; } /* Entry dialog styling */ .entry-dialog { - overflow: auto; - width: 75vw; - max-height: 70vh; - margin: 0px 0px 15px 0px; + overflow: auto; + width: 75vw; + max-height: 70vh; + margin: 0px 0px 15px 0px; } .entry-textarea { - resize: none; - width: 100%; - height: 10vh; + resize: none; + width: 100%; + height: 10vh; } .input-group { - width: 100%; - white-space: nowrap; + width: 100%; + white-space: nowrap; } .entry-input { - width: 100%; + width: 100%; } .panel-body {} @@ -305,118 +305,167 @@ /* Dropdown logout menu styling */ .dropdown-open { - color: #537798; + color: #537798; } .dropdown-open:hover { - background: #b7cbda; + background: #b7cbda; } .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus { - color: #0080c0; - background: #b7cbda; + color: #0080c0; + background: #b7cbda; } .dropdown-menu { - top: 43px; - min-width: 160px; - background: #e9f0f9; + top: 43px; + min-width: 160px; + background: #e9f0f9; } .dropdown-menu>.dropdown>a:hover { - background: #b7cbda; - color: #0080c0; + background: #b7cbda; + color: #0080c0; } /* Logout dialog styling */ .logout-dialog { - width: 320px; - height: 240px; + width: 320px; + height: 240px; } div.center { - text-align: center; + text-align: center; } div.center-margin { - text-align: center; - margin: 15px; + text-align: center; + margin: 15px; } .custom-drop-down .c-token span { - pointer-events: auto; - position: relative; + pointer-events: auto; + position: relative; } .custom-drop-down .c-token { - background: #337ab7 !important; + background: #337ab7 !important; } .custom-drop-down .pure-checkbox input[type="checkbox"]:hover+label:before { - border-color: #337ab7 !important; + border-color: #337ab7 !important; } .custom-drop-down .pure-checkbox input[type="checkbox"]+label:before { - color: #337ab7 !important; + color: #337ab7 !important; } .custom-drop-down .pure-checkbox input[type="checkbox"]+label:before { - border: 2px solid #337ab7 !important; + border: 2px solid #337ab7 !important; } .custom-drop-down .pure-checkbox input[type="checkbox"]+label:after { - background-color: #337ab7 !important; + background-color: #337ab7 !important; } .custom-drop-down .pure-checkbox input[type="checkbox"]:checked+label:before { - background: #337ab7 !important; + background: #337ab7 !important; } .custom-drop-down .selected-list button { - box-shadow: none !important; + box-shadow: none !important; } .tooltip>.tooltip-inner { - background-color: #f5f8fc; - color: black; - word-break: break-all; - border: 1px solid grey; + background-color: #f5f8fc; + color: black; + word-break: break-all; + border: 1px solid grey; } .daterangepicker.dropdown-menu.ltr { - max-width: 496px; + max-width: 496px; } .daterangepicker.dropdown-menu.ltr.single { - max-width: 255px; + max-width: 255px; } .cdk-overlay-pane { - position: relative !important; + position: relative !important; } .custom-dark-blue { - color: #0080c0; - ; + color: #0080c0; + ; } .btn-primary { - z-index: 0 !important; + z-index: 0 !important; } .nav-tabs>li>a { - border: 1px solid #ddd; + border: 1px solid #ddd; } /* only for IE10+ */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { - .ag-header-cell { - /* color: red; */ - line-height: 12px !important; - padding-top: 5px !important; - } + .ag-header-cell { + /* color: red; */ + line-height: 12px !important; + padding-top: 5px !important; + } +} + +tree-internal .loading-children:after { + content: ' wird geladen...'; + color: #337ab7; + font-style: italic; + font-size: 0.9em; + animation-name: loading-children; + animation-duration: 1s; + animation-timing-function: ease-in-out; + animation-iteration-count: infinite; +} + +@keyframes loading-children { + 0% { + color: rgba(51, 121, 183, 0.20); + } + + 12.5% { + color: rgba(51, 121, 183, 0.25); + } + + 25% { + color: rgba(51, 121, 183, 0.30); + } + + 37.5% { + color: rgba(51, 121, 183, 0.37); + } + + 50% { + color: rgba(51, 121, 183, 0.5); + } + + 62.5% { + color: rgba(51, 121, 183, 0.62); + } + + 75% { + color: rgba(51, 121, 183, 0.75); + } + + 87.5% { + color: rgba(51, 121, 183, 0.87); + } + + 100% { + color: rgb(51, 121, 183); + } }