github.com/freiheit-com/kuberpult@v1.24.2-0.20240328135542-315d5630abe6/services/frontend-service/src/assets/_variables.scss

/*This file is part of kuberpult.

Kuberpult is free software: you can redistribute it and/or modify
it under the terms of the Expat(MIT) License as published by
the Free Software Foundation.

Kuberpult is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
MIT License for more details.

You should have received a copy of the MIT License
along with kuberpult. If not, see <https://directory.fsf.org/wiki/License:Expat>.

Copyright 2023 freiheit.com*/
$border-radius-small: 3px;
$border-radius-medium: 6px;
$border-radius-large: 8px;

// Navigation variables
$nav-bar-width: 4em;
$nav-list-item-padding: 10px; // (4em - 40px)/2 - indicator width/2
$nav-list-item-height: 130px;
$nav-list-item-gap: 32px;
$nav-indicator-width: 4px;

// Buttons
$small-warn-button-padding-left: 10px;
$small-warn-button-padding-right: $small-warn-button-padding-left;
$small-warn-button-font-size: 8px;
$small-warn-button-font-weight: 700;

// Sidebar variables
$sidebar-width: 30em;
$sidebar-planned-actions-title-right-centering: 9em;
$sidebar-apply-button-height: 3em;
$sidebar-show-button-height: 3.5em;
$sidebar-show-button-width: 4em;
$sidebar-hidden-displacement: -$sidebar-width;
$sidebar-transition-duration-large-screen: 0.4s;

// Top App Bar
$top-app-bar-padding: 0.5em 0 0.5em $nav-bar-width; // 0.5em on top and bottom each
$top-app-bar-height: 5em; // 5em = 80px
$top-app-bar-section-gap: 61px;
// Logo
// 4em = 64px - Logo_width(40px) = 24px / 2 = 12px
// top_bar_height(5em) = 80px - Logo_height(50px) = 30px / 2 = 15px
$kp-logo-padding: 15px 12px;

// Locks Page
$locks-list-header-border-radius: 10px;
$locks-list-header-height: 3em;
$locks-list-header-padding: 0.5em;
$locks-list-row-spacing: -0.3em 0;
$locks-list-row-height: 3.5em;
$locks-list-row-margin: 0.5em;
$locks-button-delete-height: 4em;
$locks-date-outdated-color: #ff8a00;
$locks-list-margin: 0 0 2em 0;

// Environment Page
$environment-lock-display-margin: 0px 20px;
$environment-locks-bottom: 20px;
$environment-locks-margin: 8px;
$environment-lock-scale: scale(2);
$environment-lane-height: 180px;
$environment-lane-border-radius: 15px;
$environment-lane-margin: 20px 0;
$environment-lane-header-top-displacement: -10px;
$environment-lane-header-left-displacement: -10px;
$environment-lane-header-color: var(--mdc-theme-surface);
$environment-group-lane-header-background-color: #eee;
$environment-lane-header-padding: 13px 20px;
$environment-lane-header-border-radius: 10px;
$environment-lane-header-height: 62px;
$environment-lane-background-color: var(--mdc-theme-surface, #fff);
$environment-actions-right-displacement: 20px;
$environment-actions-top-displacement: 10px;
$environment-add-lock-button-border: 1px solid var(--mdc-theme-primary);
$environment-add-lock-button-border-radius: 10px;
$environment-add-lock-button-color: var(--mdc-theme-primary);
$environment-buttons-column-margin: 4px;
$environment-add-lock-button-padding-left: 1em;

// Release Dialog
$release-dialog-outer-border-radius: 10px;
$release-dialog-top-border-radius: $release-dialog-outer-border-radius $release-dialog-outer-border-radius 0px 0px;
$release-dialog-bottom-border-radius: 0px 0px $release-dialog-outer-border-radius $release-dialog-outer-border-radius;
$release-dialog-inner-border-radius: 10px;
$release-dialog-label-displacement: -10px;
$release-dialog-lock-icon-size: 24px;

// Environment Config Dialog
$environment-config-dialog-outer-border-radius: 10px;
$environment-config-dialog-top-border-radius: $release-dialog-outer-border-radius $release-dialog-outer-border-radius
    0px 0px;
$environment-config-dialog-bottom-border-radius: 0px 0px $release-dialog-outer-border-radius
    $release-dialog-outer-border-radius;
$environment-config-dialog-inner-border-radius: 10px;
$environment-config-dialog-label-displacement: -10px;
$environment-config-dialog-lock-icon-size: 24px;

// Environment Chip
$env-group-chip-margin: 4px;
$env-chip-height: 20px;
$env-chip-padding: 4px;
$env-color-yolo: #dc00dc;
$env-color-prod: #dc0000;
$env-color-canary: #f37e00;
$env-color-pre_prod: #f3be00;
$env-color-other: #a5d8ff;
$env-color-upstream: #50c241;
$env-color-unrecognized: #887799;

// Release Card
$release-card-height: 75px;
$release-card-width: 160px;
$release-card-margin: -16px 4px 0 4px;
$release-card-inner-padding: 10px;
$release-card-environments-min-height: 26px;
$release-card-hash-height: 22px;

// Release Card Tooltip
$release-card-tooltip-border-color: #bababa;
$release-card-tooltip-width: 220px;
$release-card-tooltip-padding: 8px 4px;
$release-card-tooltip-caret-shift-left: 55px;

// Service Lane
$service-lane-header-height: 40px;
$service-lane-header-padding: 0 10px;
$service-lane-header-actions-margin-left: 40px;
$service-lane-header-actions-height: 28px;
$service-lane-header-actions-button-padding-left: 16px;
$service-lane-releases-margin: 4px 0 12px 0;

// Service Lane Diff Element
$service-lane-diff-element-border-color: #bababa;
$service-lane-diff-element-width: 50px;

// Main content padding
$main-content-padding: ($top-app-bar-height + 0.5em) 1em 1em ($nav-bar-width + 1em);

$warning-color: #e0d541;

:root {
    // Colors
    --mdc-theme-primary: #2d70d6;
    --mdc-theme-on-primary: #ffffff;
    --mdc-theme-background: #ffffff;
    --mdc-theme-surface: #f5f5f5;
    --mdc-theme-on-surface: #4a4a4a;
    --mdc-theme-on-surface-light: #8a8a8a;
    --mdc-theme-secondary: #00afff;
    --mdc-theme-on-secondary: #ffffff;
    --mdc-theme-error: rgba(220, 0, 0, 0.92);
    --mdc-theme-warn: rgba(243, 190, 0, 0.92);
    --mdc-theme-success: rgba(80, 194, 65, 0.93);
    --mdc-filled-button-disabled-container-color: rgb(89, 89, 89);
}