| /* |
| * Copyright (c) 2010-2019 BSI Business Systems Integration AG. |
| * All rights reserved. This program and the accompanying materials |
| * are made available under the terms of the Eclipse Public License v1.0 |
| * which accompanies this distribution, and is available at |
| * http://www.eclipse.org/legal/epl-v10.html |
| * |
| * Contributors: |
| * BSI Business Systems Integration AG - initial API and implementation |
| */ |
| .calendar-icon(@icon, @size) { |
| #scout.font-icon(); |
| display: inline-block; |
| position: relative; |
| font-size: @size; |
| width: 29px; |
| content: @icon; |
| color: @icon-color; |
| text-align: center; |
| } |
| |
| .calendar { |
| //min-height: 400px; |
| white-space: nowrap; |
| padding-left: 0; |
| } |
| |
| .calendar-scrollable-components { |
| height: 100%; |
| } |
| |
| .calendar-week-scrollable { |
| overflow: visible; |
| } |
| |
| .calendar-scrollable-components-week { |
| top: calc(@calendar-day-selected-circle-size ~'+ 5px'); |
| height: calc(~'15% - (' @calendar-day-selected-circle-size ~' + 5px)'); |
| } |
| |
| .calendar-header { |
| position: relative; |
| display: block; |
| white-space: nowrap; |
| padding: 8px @root-group-box-padding-right 12px 0; |
| |
| & > .busyindicator-label { |
| display: table-cell; |
| vertical-align: middle; |
| text-indent: 0; |
| } |
| } |
| |
| .calendar-header-row { |
| display: table; |
| width: 100%; |
| |
| &.last { |
| padding-top: 10px; |
| } |
| } |
| |
| .calendar-range { |
| display: table-cell; |
| vertical-align: middle; |
| padding-left: 8px; |
| width: 1%; |
| } |
| |
| .calendar-previous, |
| .calendar-today, |
| .calendar-next { |
| cursor: pointer; |
| display: inline-block; |
| vertical-align: middle; |
| white-space: nowrap; |
| text-align: center; |
| height: @calendar-header-button-height; |
| color: @text-color; |
| background-color: @button-background-color; |
| border: 1px solid @border-color; |
| border-radius: @button-border-radius; |
| margin-right: 5px; |
| line-height: @calendar-header-button-height - 1px; |
| |
| &:hover { |
| color: @hover-color; |
| } |
| } |
| |
| .calendar-today { |
| width: 65px; |
| } |
| |
| .calendar-title { |
| display: table-cell; |
| vertical-align: middle; |
| color: @calendar-title-color; |
| |
| .calendar-header-row.last > & { |
| text-align: center; |
| } |
| } |
| |
| .calendar-select { |
| display: inline-block; |
| vertical-align: middle; |
| text-align: center; |
| font-size: 16px; |
| margin-left: 15px; |
| margin-right: 15px; |
| } |
| |
| .calendar-previous:hover::before, |
| .calendar-next:hover::before { |
| color: @hover-color; |
| } |
| |
| .calendar-previous::before { |
| .calendar-icon(@icon-angle-left, 20px); |
| } |
| |
| .calendar-next::before { |
| .calendar-icon(@icon-angle-right, 20px); |
| } |
| |
| .calendar-commands { |
| display: table-cell; |
| vertical-align: middle; |
| text-align: right; |
| white-space: nowrap; |
| } |
| |
| .calendar-mode, |
| .calendar-toggle-year, |
| .calendar-toggle-list { |
| display: inline-block; |
| vertical-align: middle; |
| text-align: center; |
| height: @calendar-header-button-height; |
| line-height: @calendar-header-button-height - 1px; |
| cursor: pointer; |
| } |
| |
| .calendar-mode { |
| width: 65px; |
| |
| border-top: 1px solid @border-color; |
| border-bottom: 1px solid @border-color; |
| border-left: 1px solid @border-color; |
| |
| &.first { |
| border-left: 1px solid @border-color; |
| border-top-left-radius: @button-border-radius; |
| border-bottom-left-radius: @button-border-radius; |
| } |
| |
| &.last { |
| border-right: 1px solid @border-color; |
| border-top-right-radius: @button-border-radius; |
| border-bottom-right-radius: @button-border-radius; |
| margin-right: 5px; |
| } |
| |
| &:hover { |
| color: @hover-color; |
| } |
| |
| &.selected { |
| color: @calendar-mode-selected-color; |
| background-color: @calendar-mode-selected-background-color; |
| } |
| } |
| |
| .calendar-mode-menu { |
| padding: 5px 12px; |
| border: 1px solid @border-color; |
| border-radius: @button-border-radius; |
| } |
| |
| .calendar-toggle-year, |
| .calendar-toggle-list { |
| margin-left: 5px; |
| |
| &:hover::before { |
| color: @hover-color; |
| } |
| } |
| |
| .calendar-toggle-year::before { |
| .calendar-icon(@icon-calendar, 18px); |
| } |
| |
| .calendar-toggle-list::before { |
| .calendar-icon(@icon-list, 18px); |
| } |
| |
| .calendar-component { |
| display: flex; |
| flex-direction: row; |
| position: relative; |
| float: left; |
| line-height: 24px; |
| height: 24px; |
| min-height: 20px; |
| width: calc(~'100% - ' @calendar-component-margin-left); |
| text-align: left; |
| color: @calendar-component-color; |
| |
| &:not(.component-task):not(.component-month) { |
| border-bottom: 2px solid @form-background-color; |
| } |
| |
| & > .content { |
| #scout.overflow-ellipsis(); |
| } |
| |
| & > .calendar-component-leftcolorborder { |
| flex-shrink: 0; |
| top: 0; |
| left: 0; |
| width: 4px; |
| margin-right: 4px; |
| background-color: @palette-blue-1; /* Default colors used when component has no specific class */ |
| } |
| |
| &:hover > .calendar-component-leftcolorborder { |
| background-color: @palette-blue-2; |
| } |
| |
| &.comp-selected > .calendar-component-leftcolorborder { |
| background-color: @palette-blue-6; |
| } |
| |
| /* Default colors used when component has no specific class */ |
| background-color: @palette-blue-0; |
| |
| &:hover { |
| background-color: @palette-blue-1; |
| } |
| |
| &.comp-selected { |
| background-color: @palette-blue-2; |
| } |
| |
| /* Colors for type Appointment */ |
| |
| &.calendar-appointment { |
| background-color: @palette-orange-0; |
| |
| & > .calendar-component-leftcolorborder { |
| background-color: @palette-orange-2; |
| } |
| |
| &:hover { |
| background-color: @palette-orange-2; |
| } |
| |
| &:hover > .calendar-component-leftcolorborder { |
| background-color: @palette-orange-3; |
| } |
| |
| &:hover .comp-selected > .calendar-component-leftcolorborder { |
| background-color: @palette-orange-4; |
| } |
| |
| &.comp-selected { |
| background-color: @palette-orange-3; |
| } |
| |
| &.comp-selected > .calendar-component-leftcolorborder { |
| background-color: @palette-orange-4; |
| } |
| } |
| |
| /* Colors for type Task */ |
| |
| &.calendar-task { |
| background-color: @palette-cyan-0; |
| |
| & > .calendar-component-leftcolorborder { |
| background-color: @palette-cyan-2; |
| } |
| |
| &:hover { |
| background-color: @palette-cyan-2; |
| } |
| |
| &:hover > .calendar-component-leftcolorborder { |
| background-color: @palette-cyan-3; |
| } |
| |
| &.comp-selected { |
| background-color: @palette-cyan-3; |
| } |
| |
| &.comp-selected > .calendar-component-leftcolorborder { |
| background-color: @palette-cyan-4; |
| } |
| } |
| } |
| |
| .calendar-component-title { |
| font-weight: bold; |
| } |
| |
| .calendar-component-intro { |
| font-size: 11px; |
| color: @calendar-component-intro-color; |
| } |
| |
| .calendar-list-container { |
| display: inline-block; |
| vertical-align: top; |
| width: 0; |
| padding: 0; |
| overflow: hidden; |
| } |
| |
| .calendar-list { |
| width: 270px; |
| padding: 0 0 0 30px; |
| height: 100%; |
| |
| & > .calendar-component { |
| cursor: pointer; |
| height: auto; |
| width: calc(~'100% - 10px'); |
| background-color: transparent !important; /* NOSONAR (required to override original component background color) */ |
| margin-top: 12px; |
| color: @text-color; |
| } |
| } |
| |
| .calendar-list-title { |
| position: relative; |
| width: calc(~'100% - 10px'); |
| height: @calendar-title-height; |
| line-height: @calendar-title-height; |
| font-weight: bold; |
| color: @text-color; |
| |
| &::after { |
| position: absolute; |
| height: 1px; |
| width: 100%; |
| left: 0; |
| bottom: -1px; |
| content: ''; |
| background-color: @border-color; |
| } |
| } |
| |
| .calendar-grids { |
| display: inline-block; |
| vertical-align: top; |
| overflow: hidden; |
| } |
| |
| .calendar-grid { |
| display: block; |
| height: calc(~'100% - 25px'); |
| padding-right: @root-group-box-padding-right; |
| } |
| |
| .calendar-grid.calendar-grid-short { |
| height: calc(~'100% - 105px'); |
| } |
| |
| .calendar-top-grid { |
| display: block; |
| overflow: hidden; |
| border-bottom: 1px solid @border-color; |
| height: 105px; |
| margin-right: @root-group-box-padding-right; |
| |
| &.calendar-top-grid-short { |
| height: 25px; |
| } |
| } |
| |
| .calendar-week-header, |
| .calendar-week { |
| display: block; |
| width: 100%; |
| white-space: nowrap; |
| } |
| |
| .calendar-week-allday-container, |
| .calendar-week-allday-container > .calendar-week-name { |
| height: 80px; |
| } |
| |
| .calendar-week-allday-container > .calendar-day { |
| padding-top: 30px; // for the day-of-month number |
| } |
| |
| .calendar-week-header, |
| .calendar-week-header > .calendar-day-name, |
| .calendar-week-header > .calendar-week-name { |
| height: @calendar-title-height; |
| } |
| |
| .calendar-week { |
| position: relative; |
| } |
| |
| .calendar-week-name { |
| width: @calendar-week-name-width; |
| } |
| |
| .calendar-day-name, |
| .calendar-week-name, |
| .calendar-day { |
| position: relative; |
| display: inline-block; |
| overflow: hidden; |
| z-index: 1; /* draw over grid */ |
| } |
| |
| .calendar-day { |
| padding: 0; |
| |
| &:not(.calendar-no-label)::before { |
| position: absolute; |
| content: attr(data-day-name); |
| color: @calendar-day-color; |
| left: 7px; |
| top: 7px; |
| z-index: 1; /* draw over calendar items */ |
| } |
| |
| &.out { |
| background-color: @calendar-out-background-color; |
| |
| &::before { |
| color: @calendar-out-color; |
| } |
| } |
| |
| &.weekend::before { |
| color: @calendar-weekend-color; |
| } |
| |
| &.weekend-out { |
| background-color: @calendar-weekend-out-background-color; |
| |
| &::before { |
| color: @calendar-weekend-out-color; |
| } |
| } |
| |
| &.now::before { |
| color: @highlight-color; |
| font-weight: bold; |
| } |
| |
| /* helps to center days between 10 and 19 nicer */ |
| |
| &.selected.center-nice::before { |
| padding-right: 2px; |
| } |
| |
| & .calendar-component { |
| margin-left: @calendar-component-margin-left; |
| margin-bottom: 1px; |
| margin-top: 1px; |
| |
| &.component-month.compact { |
| top: 30px; |
| margin-left: 0; |
| width: 100%; |
| } |
| |
| &.component-day, |
| &.component-task { |
| position: absolute; |
| word-break: break-all; |
| left: 0; |
| margin: 0; |
| width: 100%; |
| height: 24px; |
| line-height: 24px; |
| } |
| |
| &.component-open-top { |
| overflow: visible; |
| padding-top: 10px; |
| |
| /* Compensate for open top padding */ |
| |
| & > .calendar-component-leftcolorborder { |
| height: calc(~'100% + 10px'); |
| top: -10px; |
| } |
| |
| &::before { |
| position: absolute; |
| display: block; |
| content: ''; |
| width: 16px; |
| height: 16px; |
| left: calc(~'50% - 8px'); |
| top: -8px; |
| transform: rotate(45deg); |
| background-color: @background-color; |
| } |
| } |
| |
| &.component-open-bottom { |
| overflow: visible; |
| border-bottom: none; /* Compensate for calendar-component border */ |
| |
| &::after { |
| position: absolute; |
| display: block; |
| content: ''; |
| width: 16px; |
| height: 16px; |
| left: calc(~'50% - 8px'); |
| bottom: -8px; |
| transform: rotate(45deg); |
| background-color: inherit; |
| } |
| } |
| } |
| } |
| |
| .calendar-day.selected.now::before { |
| left: 4px; |
| top: 3px; |
| font-weight: normal; |
| border: solid 4px @highlight-inverted-background-color; |
| border-radius: 50%; |
| background-color: @highlight-inverted-background-color; |
| color: @palette-white; |
| } |
| |
| .calendar-day.selected::before { |
| text-align: center; |
| left: 4px; |
| top: 3px; |
| width: @calendar-day-selected-circle-size; |
| height: @calendar-day-selected-circle-size; |
| border: solid 4px @calendar-day-selected-background-color; |
| border-radius: 50%; |
| background-color: @calendar-day-selected-background-color; |
| color: @calendar-day-selected-color; |
| } |
| |
| |
| .calendar-week-name { |
| font-size: 11px; |
| color: @calendar-week-axis-color; |
| padding-top: 9px; |
| text-align: center; |
| } |
| |
| .calendar-day::after, |
| .calendar-day-name::after { |
| position: absolute; |
| width: 1px; |
| height: 100%; |
| left: 0; |
| top: 0; |
| content: ''; |
| background-color: @border-color; |
| } |
| |
| .calendar-week:not(.calendar-week-noborder)::after { |
| position: absolute; |
| height: 1px; |
| width: 100%; |
| left: 0; |
| top: 0; |
| content: ''; |
| background-color: @border-color; |
| } |
| |
| .calendar-day-name::before { |
| position: absolute; |
| content: attr(data-day-name); |
| color: @calendar-day-color; |
| left: 7px; |
| bottom: 0; |
| z-index: 1; /* draw over calendar items */ |
| line-height: @calendar-title-height; |
| } |
| |
| .calendar-week-axis { |
| position: absolute; |
| left: @calendar-week-name-width - @calendar-week-axis-overlap; |
| width: calc(~'100% - @{calendar-week-name-width} + @{calendar-week-axis-overlap}'); |
| |
| &:not(.first) { |
| &::after { |
| position: absolute; |
| height: 1px; |
| width: 100%; |
| content: ''; |
| background-color: @palette-gray-3; |
| } |
| |
| &.hour::after { |
| background-color: @border-color; |
| } |
| |
| &::before { |
| position: absolute; |
| font-size: 12px; |
| left: -35px; |
| top: -8px; |
| color: @calendar-week-axis-color; |
| content: attr(data-axis-name); |
| } |
| } |
| } |
| |
| .calendar-week-task { |
| position: relative; |
| left: 0; |
| width: 100%; |
| } |
| |
| .calendar-week-task::after { |
| position: relative; |
| height: 1px; |
| width: 100%; |
| content: ''; |
| background-color: @border-color; |
| } |
| |
| .calendar-week-task::before { |
| position: absolute; |
| font-size: 11px; |
| top: 28px; |
| left: 7px; |
| color: @calendar-week-axis-color; |
| content: attr(data-axis-name); |
| } |