saas-one/frontend/operation-web/ext/modern/theme-neptune/sass/var/panel/TimeHeader.scss

/**
 * @class Ext.panel.TimeHeader
 */

/**
 * @var {color}
 * Time Header background color
 */
$timeheader-background-color: dynamic($base-color);

/**
 * @var {color}
 * Time Header text color
 */
$timeheader-color: dynamic($light-color);

/**
 * @var {number}
 * Time Header minutes width
 */
$timeheader-minutes-width: dynamic(75px);

/**
 * @var {number}
 * Time Header padding
 */
$timeheader-padding: dynamic(10px 40px);

@mixin timeheader-ui(
    $ui: null,
    $background-color: null,
    $color: null,
    $minutes-width: null,
    $padding: null,
    $xtype: analogtimeheader
) {

    $ui-suffix: ui-suffix($ui);
    .#{$prefix}#{$xtype}#{$ui-suffix} {

        .#{$prefix}header-position-left & {
            // Required for flexbox issue on iOS 10
            height: 100%;

            .#{$prefix}header-el {
                flex-direction: column;
                justify-content: center;
                height: 100%;
                width: 190px;
            }

            .#{$prefix}meridiem-wrapper-el {
                height: auto;
                padding-left: 0;
            }

            .#{$prefix}time-el {
                font-size: 42px;
            }
        }


        .#{$prefix}header-el {
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            align-items: center;
            background-color: $background-color;
            height: 100px;
            padding: $padding;
            color: $color;
            @include no-select;
        }

        .#{$prefix}meridiem-wrapper-el {
            display: flex;
            justify-content: center;
            flex-direction: column;
            padding-left: 12px;
            height: 100%;
        }

        .#{$prefix}time-wrapper-el {
            display: flex;
            flex-direction: row;
            width: 100%;
        }

        .#{$prefix}time-el {
            font-size: 68px;
            line-height: normal;
        }

        .#{$prefix}time-el, .#{$prefix}meridiem-el {
            user-select: none;
            cursor: pointer;
            opacity: .7;
        }

        .#{$prefix}time-el.active, .#{$prefix}meridiem-el.active {
            opacity: 1;
        }

        .#{$prefix}time-el.#{$prefix}minute-el {
            flex: 1;
            text-align: left;
        }

        .#{$prefix}time-el.#{$prefix}hour-el {
            flex: 1;
            text-align: right;
        }
    }
}