/** * DevExtreme (widgets/material/dateView.material.less) * Version: 19.2.12 * Build date: Thu Apr 22 2021 * * Copyright (c) 2012 - 2021 Developer Express Inc. ALL RIGHTS RESERVED * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/ */ @import (once) "./scrollable.material.less"; @import (once) "./validation.material.less"; .dx-size-default() { @MATERIAL_DATEVIEW_ROLLER_HEIGHT: 182px; @MATERIAL_DATEVIEW_ROLLER_ITEM_HEIGHT: 40px; } .dx-size-compact() { @MATERIAL_DATEVIEW_ROLLER_HEIGHT: 182px; @MATERIAL_DATEVIEW_ROLLER_ITEM_HEIGHT: 40px; } @MATERIAL_DATEVIEW_ROLLER_PADDING: (@MATERIAL_DATEVIEW_ROLLER_HEIGHT - @MATERIAL_DATEVIEW_ROLLER_ITEM_HEIGHT) / 2; .dx-dateview-rollers { width: auto; text-align: center; display: block; } .dx-dateviewroller-current { .dx-dateview-item { transition: font-size 0.2s ease-out; } } .dx-dateviewroller { min-width: 4em; text-align: center; display: inline-block; .dx-button { display: none; } .dx-scrollable-content:before, .dx-scrollable-content:after { content: ""; height: @MATERIAL_DATEVIEW_ROLLER_PADDING; display: block; } .dx-scrollable-container { height: @MATERIAL_DATEVIEW_ROLLER_HEIGHT; } &.dx-dateviewroller-year { min-width: 4.85em; } &.dx-state-active { .dx-button { display: none; } } } .dx-dateviewroller-month { min-width: 12em; } .dx-dateviewroller-hours { &:after { content: ":"; font-size: 2.2em; position: absolute; right: -9%; font-weight: bold; top: 37%; color: @dateview-color; } .dx-dateview-item-selected-frame { padding-left: 20%; } } .dx-dateviewroller-minutes { .dx-dateview-item-selected-frame { width: 80%; } } .dx-dateview-item { height: @MATERIAL_DATEVIEW_ROLLER_ITEM_HEIGHT; line-height: @MATERIAL_DATEVIEW_ROLLER_ITEM_HEIGHT; text-align: center; font-size: 1.3em; color: @dateview-color; } .dx-dateview-item-selected { font-size: 1.8em; color: @base-accent; } .dx-rtl { &.dx-dateviewroller-hours { &:after { left: -9%; right: auto; } } } .dx-dateview-item-selected-frame { position: absolute; top: @MATERIAL_DATEVIEW_ROLLER_PADDING; width: 100%; &:before, &:after { backface-visibility: hidden; content: ""; display: block; width: 100%; position: absolute; height: @MATERIAL_DATEVIEW_ROLLER_PADDING; } &:before { top: -@MATERIAL_DATEVIEW_ROLLER_PADDING; .gradient-linear(@dateview-shadow-up); } &:after { top: @MATERIAL_DATEVIEW_ROLLER_ITEM_HEIGHT; .gradient-linear(@dateview-shadow-down); } } .dx-device-tablet, .dx-device-phone { .dx-dateview-rollers { .flex-container(row, nowrap); } .dx-dateviewroller-month { min-width: 4em; } .dx-dateview-item { font-size: 1.1em; } .dx-dateview-item-selected { font-size: 1.4em; } }