src/styles.scss

/********************************************************************************
 * Copyright © 2018 Mettenmeier GmbH.
 *
 * This program and the accompanying materials are made available under the
 * terms of the Eclipse Public License v. 2.0 which is available at
 * http://www.eclipse.org/legal/epl-2.0.
 *
 * SPDX-License-Identifier: EPL-2.0
 ********************************************************************************/

$theme-colors: ( "primary": #337ab7, "secondary": #ccdbe6);
@import "../node_modules/bootstrap/scss/bootstrap";
@import "~ag-grid-community/dist/styles/ag-grid.css";
@import "~ag-grid-community/dist/styles/ag-theme-balham.css";
body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/**
* Global custom classes
*/

.btn-ok {
    color: #0080c0;
    background-color: #ccdbe6;
}

.pointer {
    cursor: pointer;
}

.stick-table-top thead th {
    position: sticky;
    top: 3rem;
    background-color: #ffffff;
}

.stick-headlines {
    position: sticky;
    top: 3rem;
    background-color: #ffffff;
    z-index: 100;
}

/* Style Placeholder of inputs globally */

.form-control::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: #ced4da;
}

.form-control::-moz-placeholder {
    /* Firefox 19+ */
    color: #ced4da;
}

.form-control:-ms-input-placeholder {
    /* IE 10+ */
    color: #ced4da;
}

.form-control:-moz-placeholder {
    /* Firefox 18- */
    color: #ced4da;
}

.masterdata-actionbar-button {
    min-width: 160px;
}

.ng-valid[required]:not(p-dropdown),
.ng-valid.required:not(p-dropdown) {
    border-left: 5px solid #42A948;
    /* green */
}

.ng-invalid:not(form):not(div):not(ngb-timepicker):not(p-dropdown) {
    border-left: 5px solid #a94442;
    /* red */
}

/* Fix for primeNG dropdown */

p-dropdown.ng-invalid:not(form):not(div):not(ngb-timepicker)>div {
    border-left: 5px solid #a94442;
}

p-dropdown.ng-valid[required]>div>label,
p-dropdown.ng-valid.required>div>label {
    border-left: 5px solid #42A948;
}

/**
* Fix for primeNG toasts
*/

body .ui-toast .ui-toast-message {
    -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
    -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
    margin: 0 0 1em 0;
}

body .ui-toast .ui-toast-message.ui-toast-message-info {
    background-color: #7fbcec;
    border: 0 none;
    color: #212121;
}

body .ui-toast .ui-toast-message.ui-toast-message-info .ui-toast-close-icon {
    color: #212121;
}

body .ui-toast .ui-toast-message.ui-toast-message-success {
    background-color: #b7d8b7;
    border: 0 none;
    color: #212121;
}

body .ui-toast .ui-toast-message.ui-toast-message-success .ui-toast-close-icon {
    color: #212121;
}

body .ui-toast .ui-toast-message.ui-toast-message-warn {
    background-color: #ffe399;
    border: 0 none;
    color: #212121;
}

body .ui-toast .ui-toast-message.ui-toast-message-warn .ui-toast-close-icon {
    color: #212121;
}

body .ui-toast .ui-toast-message.ui-toast-message-error {
    background-color: #f8b7bd;
    border: 0 none;
    color: #212121;
}

body .ui-toast .ui-toast-message.ui-toast-message-error .ui-toast-close-icon {
    color: #212121;
}

body .ui-toast-top-right {
    top: 56px;
}

/**
* Fix for ng prime splitbuttons
*/

body .ui-button.ui-state-default.ui-button-secondary,
body .ui-buttonset.ui-button-secondary>.ui-button.ui-state-default {
    color: #333333;
    background-color: #f4f4f4;
    border: 1px solid #f4f4f4;
}

body .ui-button.ui-state-default.ui-button-secondary:enabled:hover,
body .ui-buttonset.ui-button-secondary>.ui-button.ui-state-default:enabled:hover {
    background-color: #c8c8c8;
    color: #333333;
    border-color: #c8c8c8;
}

body .ui-button.ui-state-default.ui-button-secondary:enabled:focus,
body .ui-buttonset.ui-button-secondary>.ui-button.ui-state-default:enabled:focus {
    background-color: white;
}

body .ui-button.ui-state-default.ui-button-secondary:enabled:active,
body .ui-buttonset.ui-button-secondary>.ui-button.ui-state-default:enabled:active {
    background-color: #a0a0a0;
    color: #333333;
    border-color: #a0a0a0;
}

/**
* NG Bootstrap Modals
*/

.modal-xl>.modal-dialog {
    max-width: 1300px !important;
}

/**
* NG Bootstrap Buttons
*/

.w-99 {
    width: 99% !important;
}

/*ngb-timepicker button:focus {
    box-sizing: border-box !important;
    border: 2px solid red !important;
}*/

ngb-timepicker button:focus {
    -webkit-box-shadow: inset 0px 0px 0px 3px rgba(2, 117, 216, 0.3) !important;
    -moz-box-shadow: inset 0px 0px 0px 3px rgba(2, 117, 216, 0.3) !important;
    box-shadow: inset 0px 0px 0px 3px rgba(2, 117, 216, 0.3) !important;
    border-radius: 8px !important;
}