Skip to content

Commit

Permalink
refactor: some refactoring
Browse files Browse the repository at this point in the history
  • Loading branch information
@PKulkoRaccoonGang @viktorrusakov
PKulkoRaccoonGang authored and viktorrusakov committed Apr 13, 2023
1 parent b3a3e01 commit c24a7e3
Show file tree
Hide file tree
Showing 13 changed files with 149 additions and 175 deletions.
2 changes: 1 addition & 1 deletion scss/core/css/custom-media-breakpoints.css
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* IMPORTANT: This file is the result of assembling design tokens
* Do not edit directly
* Generated on Fri, 17 Mar 2023 13:58:00 GMT
* Generated on Fri, 17 Mar 2023 15:19:16 GMT
*/

@custom-media --pgn-size-breakpoint-xs (min-width: 0);
Expand Down
2 changes: 1 addition & 1 deletion scss/core/css/utility-classes.css
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* IMPORTANT: This file is the result of assembling design tokens
* Do not edit directly
* Generated on Fri, 17 Mar 2023 13:58:00 GMT
* Generated on Fri, 17 Mar 2023 15:19:16 GMT
*/

.bg-dark {
Expand Down
12 changes: 11 additions & 1 deletion scss/core/css/variables.css
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* IMPORTANT: This file is the result of assembling design tokens
* Do not edit directly
* Generated on Fri, 17 Mar 2023 13:58:00 GMT
* Generated on Fri, 17 Mar 2023 15:19:16 GMT
*/

:root {
Expand Down Expand Up @@ -693,6 +693,13 @@
--pgn-color-pagination-bg-disabled: var(--pgn-color-white);
--pgn-color-pagination-bg-hover: var(--pgn-color-gray-100);
--pgn-color-pagination-text-inverse: var(--pgn-color-white);
--pgn-color-page-banner-text-warning: var(--pgn-color-black);
--pgn-color-page-banner-text-accent-b: var(--pgn-color-black);
--pgn-color-page-banner-text-accent-a: var(--pgn-color-black);
--pgn-color-page-banner-text-light: var(--pgn-color-black);
--pgn-color-page-banner-text-dark: var(--pgn-color-white);
--pgn-color-page-banner-bg-accent-b: var(--pgn-color-accent-b);
--pgn-color-page-banner-bg-accent-a: var(--pgn-color-accent-a);
--pgn-color-navbar-light-toggler-border: #0000001A;
--pgn-color-navbar-light-disabled: #0000004D;
--pgn-color-navbar-light-active: #000000E6;
Expand Down Expand Up @@ -1132,6 +1139,8 @@
--pgn-color-pagination-focus-base: var(--pgn-color-primary-500);
--pgn-color-pagination-bg-base: var(--pgn-color-bg-base);
--pgn-color-pagination-text-active: var(--pgn-color-active);
--pgn-color-page-banner-bg-light: var(--pgn-color-light-400);
--pgn-color-page-banner-bg-dark: var(--pgn-color-dark-500);
--pgn-color-navbar-light-brand-hover: var(--pgn-color-navbar-light-active);
--pgn-color-navbar-light-brand-text: var(--pgn-color-navbar-light-active);
--pgn-color-navbar-dark-active: var(--pgn-color-active);
Expand Down Expand Up @@ -1561,6 +1570,7 @@
--pgn-color-popover-arrow-base: var(--pgn-color-popover-bg);
--pgn-color-pagination-bg-active: var(--pgn-color-bg-active);
--pgn-color-pagination-text-disabled: var(--pgn-color-disabled);
--pgn-color-page-banner-bg-warning: var(--pgn-color-warning-100);
--pgn-color-navbar-dark-brand-hover: var(--pgn-color-navbar-dark-active);
--pgn-color-navbar-dark-brand-text: var(--pgn-color-navbar-dark-active);
--pgn-color-nav-pills-link-active-bg: var(--pgn-color-bg-active);
Expand Down
54 changes: 27 additions & 27 deletions src/Badge/Badge.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
display: inline-block;
padding: var(--pgn-spacing-badge-padding-y) var(--pgn-spacing-badge-padding-x-base);
color: var(--pgn-badge-color, inherit);
background-color: var(--pgn-badge-bg-color, transparent);
background-color: var(--pgn-badge-bg, transparent);

@include font-size(var(--pgn-typography-badge-font-size));

Expand All @@ -20,13 +20,13 @@
&:focus {
text-decoration: none;
color: var(--pgn-badge-focus-color, inherit);
background-color: var(--pgn-badge-focus-bg-color, transparent);
background-color: var(--pgn-badge-focus-bg, transparent);
}

&:focus,
&.focus {
outline: 0;
box-shadow: 0 0 0 var(--pgn-size-badge-focus-width) var(--pgn-badge-focus-box-shadow-color, rgba(0, 0, 0, .15));
box-shadow: 0 0 0 var(--pgn-size-badge-focus-width) var(--pgn-badge-focus-box-shadow, rgba(0, 0, 0, .15));
}
}

Expand All @@ -49,64 +49,64 @@

.badge-primary {
--pgn-badge-color: var(--pgn-color-badge-text-primary);
--pgn-badge-bg-color: var(--pgn-color-badge-bg-primary);
--pgn-badge-bg: var(--pgn-color-badge-bg-primary);
--pgn-badge-focus-color: var(--pgn-color-badge-focus-primary);
--pgn-badge-focus-bg-color: var(--pgn-color-badge-focus-bg-primary);
--pgn-badge-focus-box-shadow-color: var(--pgn-color-badge-focus-box-shadow-primary);
--pgn-badge-focus-bg: var(--pgn-color-badge-focus-bg-primary);
--pgn-badge-focus-box-shadow: var(--pgn-color-badge-focus-box-shadow-primary);
}

.badge-secondary {
--pgn-badge-color: var(--pgn-color-badge-text-secondary);
--pgn-badge-bg-color: var(--pgn-color-badge-bg-secondary);
--pgn-badge-bg: var(--pgn-color-badge-bg-secondary);
--pgn-badge-focus-color: var(--pgn-color-badge-focus-secondary);
--pgn-badge-focus-bg-color: var(--pgn-color-badge-focus-bg-secondary);
--pgn-badge-focus-box-shadow-color: var(--pgn-color-badge-focus-box-shadow-secondary);
--pgn-badge-focus-bg: var(--pgn-color-badge-focus-bg-secondary);
--pgn-badge-focus-box-shadow: var(--pgn-color-badge-focus-box-shadow-secondary);
}

.badge-success {
--pgn-badge-color: var(--pgn-color-badge-text-success);
--pgn-badge-bg-color: var(--pgn-color-badge-bg-success);
--pgn-badge-bg: var(--pgn-color-badge-bg-success);
--pgn-badge-focus-color: var(--pgn-color-badge-focus-success);
--pgn-badge-focus-bg-color: var(--pgn-color-badge-focus-bg-success);
--pgn-badge-focus-box-shadow-color: var(--pgn-color-badge-focus-box-shadow-success);
--pgn-badge-focus-bg: var(--pgn-color-badge-focus-bg-success);
--pgn-badge-focus-box-shadow: var(--pgn-color-badge-focus-box-shadow-success);
}

.badge-danger {
--pgn-badge-color: var(--pgn-color-badge-text-danger);
--pgn-badge-bg-color: var(--pgn-color-badge-bg-danger);
--pgn-badge-bg: var(--pgn-color-badge-bg-danger);
--pgn-badge-focus-color: var(--pgn-color-badge-focus-danger);
--pgn-badge-focus-bg-color: var(--pgn-color-badge-focus-bg-danger);
--pgn-badge-focus-box-shadow-color: var(--pgn-color-badge-focus-box-shadow-danger);
--pgn-badge-focus-bg: var(--pgn-color-badge-focus-bg-danger);
--pgn-badge-focus-box-shadow: var(--pgn-color-badge-focus-box-shadow-danger);
}

.badge-warning {
--pgn-badge-color: var(--pgn-color-badge-text-warning);
--pgn-badge-bg-color: var(--pgn-color-badge-bg-warning);
--pgn-badge-bg: var(--pgn-color-badge-bg-warning);
--pgn-badge-focus-color: var(--pgn-color-badge-focus-warning);
--pgn-badge-focus-bg-color: var(--pgn-color-badge-focus-bg-warning);
--pgn-badge-focus-box-shadow-color: var(--pgn-color-badge-focus-box-shadow-warning);
--pgn-badge-focus-bg: var(--pgn-color-badge-focus-bg-warning);
--pgn-badge-focus-box-shadow: var(--pgn-color-badge-focus-box-shadow-warning);
}

.badge-info {
--pgn-badge-color: var(--pgn-color-badge-text-info);
--pgn-badge-bg-color: var(--pgn-color-badge-bg-info);
--pgn-badge-bg: var(--pgn-color-badge-bg-info);
--pgn-badge-focus-color: var(--pgn-color-badge-focus-info);
--pgn-badge-focus-bg-color: var(--pgn-color-badge-focus-bg-info);
--pgn-badge-focus-box-shadow-color: var(--pgn-color-badge-focus-box-shadow-info);
--pgn-badge-focus-bg: var(--pgn-color-badge-focus-bg-info);
--pgn-badge-focus-box-shadow: var(--pgn-color-badge-focus-box-shadow-info);
}

.badge-light {
--pgn-badge-color: var(--pgn-color-badge-text-light);
--pgn-badge-bg-color: var(--pgn-color-badge-bg-light);
--pgn-badge-bg: var(--pgn-color-badge-bg-light);
--pgn-badge-focus-color: var(--pgn-color-badge-focus-light);
--pgn-badge-focus-bg-color: var(--pgn-color-badge-focus-bg-light);
--pgn-badge-focus-box-shadow-color: var(--pgn-color-badge-focus-box-shadow-light);
--pgn-badge-focus-bg: var(--pgn-color-badge-focus-bg-light);
--pgn-badge-focus-box-shadow: var(--pgn-color-badge-focus-box-shadow-light);
}

.badge-dark {
--pgn-badge-color: var(--pgn-color-badge-text-dark);
--pgn-badge-bg-color: var(--pgn-color-badge-bg-dark);
--pgn-badge-bg: var(--pgn-color-badge-bg-dark);
--pgn-badge-focus-color: var(--pgn-color-badge-focus-dark);
--pgn-badge-focus-bg-color: var(--pgn-color-badge-focus-bg-dark);
--pgn-badge-focus-box-shadow-color: var(--pgn-color-badge-focus-box-shadow-dark);
--pgn-badge-focus-bg: var(--pgn-color-badge-focus-bg-dark);
--pgn-badge-focus-box-shadow: var(--pgn-color-badge-focus-box-shadow-dark);
}
2 changes: 1 addition & 1 deletion src/Button/Button.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -187,7 +187,7 @@ fieldset:disabled a.btn {
}

.btn-inline {
line-height: calc(#{$line-height-base}em - 2 * #{var(--pgn-size-btn-border-width)});
line-height: calc(#{$line-height-base}em - 2 * var(--pgn-size-btn-border-width));
font-size: inherit;
vertical-align: bottom;
padding: 0 .25em;
Expand Down
29 changes: 18 additions & 11 deletions src/Form/_bootstrap-forms.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -275,17 +275,24 @@ textarea.form-control {
// pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for
// server side validation.

@each $state, $data in $form-validation-states {
@include form-validation-state(
$state,
map-get($data, color),
map-get($data, icon),
map-get($data, tooltip-color),
map-get($data, tooltip-bg),
map-get($data, focus-box-shadow-color),
map-get($data, checked-color)
);
}
@include form-validation-state(
"valid",
var(--pgn-color-form-feedback-valid),
var(--pgn-other-content-form-feedback-icon-valid),
var(--pgn-color-form-feedback-tooltip-valid),
var(--pgn-color-form-feedback-tooltip-bg-valid),
var(--pgn-color-form-feedback-tooltip-box-shadow-focus-valid),
var(--pgn-color-form-feedback-checked-valid),
);
@include form-validation-state(
"invalid",
var(--pgn-color-form-feedback-invalid),
var(--pgn-other-content-form-feedback-icon-invalid),
var(--pgn-color-form-feedback-tooltip-bg-invalid),
transparent,
var(--pgn-color-form-feedback-tooltip-box-shadow-focus-invalid),
var(--pgn-color-form-feedback-checked-invalid),
);

// Inline forms
//
Expand Down
27 changes: 2 additions & 25 deletions src/Form/_variables.scss
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,4 @@
// This variable has connected with the brand variable.
// This variable has connected with the Brand variable.
$input-focus-width: var(--pgn-size-form-input-width-focus) !default;
// This variable has connected with the brand variable.
// This variable has connected with the Brand variable.
$custom-select-indicator: var(--pgn-other-content-form-control-select-indicator-icon) !default;

$form-validation-states: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$form-validation-states: map-merge(
(
"valid": (
"color": var(--pgn-color-form-feedback-valid),
"icon": var(--pgn-other-content-form-feedback-icon-valid),
"tooltip-color": var(--pgn-color-form-feedback-tooltip-valid),
"tooltip-bg": var(--pgn-color-form-feedback-tooltip-bg-valid),
"focus-box-shadow-color": var(--pgn-color-form-feedback-tooltip-box-shadow-focus-valid),
"checked-color": var(--pgn-color-form-feedback-checked-valid)
),
"invalid": (
"color": var(--pgn-color-form-feedback-invalid),
"icon": var(--pgn-other-content-form-feedback-icon-invalid),
"tooltip-bg": var(--pgn-color-form-feedback-tooltip-bg-invalid),
"focus-box-shadow-color": var(--pgn-color-form-feedback-tooltip-box-shadow-focus-invalid),
"checked-color": var(--pgn-color-form-feedback-checked-invalid)
),
),
$form-validation-states
);
32 changes: 14 additions & 18 deletions src/PageBanner/PageBanner.scss
View file
Original file line number Diff line number Diff line change
@@ -1,46 +1,43 @@
// stylelint-disable-next-line selector-class-pattern
// stylelint-disable selector-class-pattern
.pgn__pageBanner-component {
width: 100%;
min-height: 36px;
display: flex;
flex-wrap: nowrap;
font-size: $x-small-font-size;
background-color: var(--pgn-page-baner-bg, inherit);
color: var(--pgn-page-baner-color, inherit);

@include media-breakpoint-up(md) {
font-size: $small-font-size;
}
}

// stylelint-disable-next-line selector-class-pattern
.pgn__pageBanner__dark {
background-color: $dark-500;
color: $white;
--pgn-page-baner-bg: var(--pgn-color-page-banner-bg-dark);
--pgn-page-baner-color: var(--pgn-color-page-banner-text-dark);
}

// stylelint-disable-next-line selector-class-pattern
.pgn__pageBanner__light {
background-color: $light-400;
color: $black;
--pgn-page-baner-bg: var(--pgn-color-page-banner-bg-light);
--pgn-page-baner-color: var(--pgn-color-page-banner-text-light);
}

// stylelint-disable-next-line selector-class-pattern
.pgn__pageBanner__accentA {
background-color: $accent-a;
color: $black;
--pgn-page-baner-bg: var(--pgn-color-page-banner-bg-accent-a);
--pgn-page-baner-color: var(--pgn-color-page-banner-text-accent-a);
}
// stylelint-disable-next-line selector-class-pattern

.pgn__pageBanner__accentB {
background-color: $accent-b;
color: $black;
--pgn-page-baner-bg: var(--pgn-color-page-banner-bg-accent-b);
--pgn-page-baner-color: var(--pgn-color-page-banner-text-accent-b);
}

// stylelint-disable-next-line selector-class-pattern
.pgn__pageBanner__warning {
background-color: $warning-100;
color: $black;
--pgn-page-baner-bg: var(--pgn-color-page-banner-bg-warning);
--pgn-page-baner-color: var(--pgn-color-page-banner-text-warning);
}

// stylelint-disable-next-line selector-class-pattern
.pgn__pageBanner-content {
display: flex;
flex-grow: 1;
Expand All @@ -50,7 +47,6 @@
text-align: center;
}

// stylelint-disable-next-line selector-class-pattern
.pgn__pageBanner-dismissButtonContainer {
min-width: 32px;
min-height: 32px;
Expand Down
43 changes: 22 additions & 21 deletions src/Popover/Popover.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,15 @@
@import "popover-bootstrap";

@mixin popover-header-and-icon($header-bg, $icon-color) {
.popover-header {
background: $header-bg;
}

.pgn__icon {
color: $icon-color;
}
}

.popover {
filter: var(--pgn-elevation-popover-box-shadow);

Expand All @@ -19,35 +29,26 @@
.popover-success {
background: var(--pgn-color-popover-success-bg);

.popover-header {
background: var(--pgn-color-popover-success-bg);
}

.pgn__icon {
color: var(--pgn-color-popover-success-icon);
}
@include popover-header-and-icon(
var(--pgn-color-popover-success-bg),
var(--pgn-color-popover-success-icon)
);
}

.popover-warning {
background: var(--pgn-color-popover-warning-bg);

.popover-header {
background: var(--pgn-color-popover-warning-bg);
}

.pgn__icon {
color: var(--pgn-color-popover-warning-icon);
}
@include popover-header-and-icon(
var(--pgn-color-popover-warning-bg),
var(--pgn-color-popover-warning-icon)
);
}

.popover-danger {
background: var(--pgn-color-popover-danger-bg);

.popover-header {
background: var(--pgn-color-popover-danger-bg);
}

.pgn__icon {
color: var(--pgn-color-popover-danger-icon);
}
@include popover-header-and-icon(
var(--pgn-color-popover-danger-bg),
var(--pgn-color-popover-danger-icon)
);
}
Loading

0 comments on commit c24a7e3

Please sign in to comment.