Skip to content

Commit

Permalink
refactor: solving problems with bootstrap
Browse files Browse the repository at this point in the history
  • Loading branch information
vzadorozhnii authored and PKulkoRaccoonGang committed Sep 23, 2022
1 parent b01abee commit adef627
Show file tree
Hide file tree
Showing 41 changed files with 961 additions and 65 deletions.
2 changes: 1 addition & 1 deletion example/src/index.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@import "@edx/brand-openedx/paragon/fonts";
@import "@edx/brand-openedx/paragon/variables";
@import "@edx/paragon/scss/core/core";
@import "~@edx/paragon/scss/core/core";
@import "@edx/brand-openedx/paragon/overrides";
10 changes: 8 additions & 2 deletions scss/core/tokens.css
Original file line number Diff line number Diff line change
@@ -1,4 +1,8 @@
:root {
--pgn-www-zindex-modal: 2503;
--pgn-www-zindex-sheet-backdrop: 2501;
--pgn-www-zindex-sheet: 2502;
--pgn-www-zindex-header: 2500;
--pgn-paragraph-margin-bottom: 1rem;
--pgn-line-height-sm: 1.5;
--pgn-line-height-lg: 1.5;
Expand Down Expand Up @@ -772,12 +776,14 @@
--pgn-btn-font-size-sm: var(--pgn-core-input-btn-font-size-sm);
--pgn-btn-font-size-base: var(--pgn-core-input-btn-font-size-base);
--pgn-btn-font-family: var(--pgn-core-input-btn-font-family);
--pgn-btn-padding-x-sm: var(--pgn-core-input-btn-padding-sm-x);
--pgn-btn-padding-x-lg: var(--pgn-core-input-btn-padding-lg-x);
--pgn-btn-padding-x-base: var(--pgn-core-input-btn-padding-x);
--pgn-btn-padding-y-sm-x: var(--pgn-core-input-btn-padding-sm-x);
--pgn-btn-padding-y-sm-y: var(--pgn-core-input-btn-padding-sm-y);
--pgn-btn-padding-y-sm: var(--pgn-core-input-btn-padding-sm-y);
--pgn-btn-padding-y-lg: var(--pgn-core-input-btn-padding-lg-y);
--pgn-btn-padding-y-base: var(--pgn-core-input-btn-padding-y);
--pgn-breadcrumb-inverse-color: var(--pgn-color-white);
--pgn-breadcrumb-inverse-spacer: var(--pgn-color-light-700);
--pgn-breadcrumb-color-divider: var(--pgn-color-gray-600);
--pgn-breadcrumb-bg: var(--pgn-color-gray-200);
--pgn-breadcrumb-border-radius-base: var(--pgn-border-radius-base);
Expand Down
2 changes: 1 addition & 1 deletion src/Alert/Alert.scss
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@

// Baking in $close-font-size: var(--pgn-font-size-base) * 1.5 !default; to avoid any dependency
.alert-dismissible {
padding-right: (var(--pgn-font-size-base) * 1.5) + var(--pgn-alert-padding-x) * 2;
padding-right: calc((var(--pgn-font-size-base) * 1.5) + var(--pgn-alert-padding-x) * 2);

// Adjust close link position
.close {
Expand Down
6 changes: 3 additions & 3 deletions src/Annotation/Annotation.scss
Original file line number Diff line number Diff line change
Expand Up @@ -74,17 +74,17 @@ $arrow-directions: top, right, bottom, left;
color: map-get($colors, "color");

// set additional margin to arrow side of the Annotation
margin-#{$direction}: var(--pgn-annotation-arrow-border-width) + var(--pgn-annotation-arrow-side-margin);
margin-#{$direction}: calc(var(--pgn-annotation-arrow-border-width) + var(--pgn-annotation-arrow-side-margin));

[dir="rtl"] & {
@if $direction == left {
margin-left: 0;
margin-right: var(--pgn-annotation-arrow-border-width) + var(--pgn-annotation-arrow-side-margin);
margin-right: calc(var(--pgn-annotation-arrow-border-width) + var(--pgn-annotation-arrow-side-margin));
}

@else if $direction == right {
margin-right: 0;
margin-left: var(--pgn-annotation-arrow-border-width) + var(--pgn-annotation-arrow-side-margin);
margin-left: calc(var(--pgn-annotation-arrow-border-width) + var(--pgn-annotation-arrow-side-margin));
}
}

Expand Down
2 changes: 1 addition & 1 deletion src/Badge/Badge.scss
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
@import "variables";
@import "~bootstrap/scss/badge";
@import "badge-bootstrap";
43 changes: 43 additions & 0 deletions src/Badge/badge-bootstrap.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
.badge {
display: inline-block;
padding: var(--pgn-badge-padding-y) var(--pgn-badge-padding-x-base);

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

font-weight: var(--pgn-badge-font-weight);
line-height: 1;
text-align: center;
white-space: nowrap;
vertical-align: baseline;

@include border-radius(var(--pgn-badge-border-radius-base));
@include transition(var(--pgn-badge-transition));

@at-root a#{&} {
@include hover-focus() {
text-decoration: none;
}
}

&:empty {
display: none;
}
}

.btn .badge {
position: relative;
top: -1px;
}

.badge-pill {
padding-right: var(--pgn-badge-padding-x-pill);
padding-left: var(--pgn-badge-padding-x-pill);

@include border-radius(var(--pgn-badge-border-radius-pill));
}

@each $color, $value in $theme-colors {
.badge-#{$color} {
@include badge-variant($value);
}
}
10 changes: 5 additions & 5 deletions src/Button/Button.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
@import "variables";
@import "~bootstrap/scss/button-group";
@import "button-bootstrap";

@mixin button-variant(
$btn-variant-bg, $btn-variant-border, $btn-variant-hover-bg: darken($btn-variant-bg, 7.5%),
Expand Down Expand Up @@ -348,7 +348,7 @@ fieldset:disabled a.btn {
//

.btn-tertiary {
$button-tertiary-background: var(--pgn-btn-tertiary-bg-base);
$button-tertiary-background: $btn-tertiary-bg;
$button-tertiary-border: transparent;
$hover-background: var(--pgn-btn-tertiary-bg-hover);
$button-tertiary-hover-border: transparent;
Expand All @@ -370,7 +370,7 @@ fieldset:disabled a.btn {
}

.btn-inverse-tertiary {
$button-inverse-tertiary-bg: var(--pgn-btn-tertiary-inverse-bg-base);
$button-inverse-tertiary-bg: $btn-tertiary-bg;
$button-inverse-tertiary-border: transparent;
$hover-background: var(--pgn-btn-tertiary-inverse-bg-hover);
$button-inverse-hover-border: transparent;
Expand Down Expand Up @@ -439,7 +439,7 @@ fieldset:disabled a.btn {

.btn-sm {
@include button-size(
var(--pgn-btn-padding-y-sm-y), var(--pgn-btn-padding-y-sm-x), var(--pgn-btn-font-size-sm),
var(--pgn-btn-padding-y-sm), var(--pgn-btn-padding-x-sm), var(--pgn-btn-font-size-sm),
var(--pgn-btn-line-height-sm), var(--pgn-btn-border-radius-sm)
);
}
Expand All @@ -459,7 +459,7 @@ fieldset:disabled a.btn {
}

.btn-inline {
line-height: calc(#{var(--pgn-line-height-base)}em - #{2 * var(--pgn-btn-border-width)});
line-height: calc(#{var(--pgn-line-height-base)}em - 2 * #{var(--pgn-btn-border-width)});
font-size: inherit;
vertical-align: bottom;
padding: 0 .25em;
Expand Down
126 changes: 126 additions & 0 deletions src/Button/button-bootstrap.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,126 @@
.btn-group,
.btn-group-vertical {
position: relative;
display: inline-flex;
vertical-align: middle;

> .btn {
position: relative;
flex: 1 1 auto;

@include hover() {
z-index: 1;
}

&:focus,
&:active,
&.active {
z-index: 1;
}
}
}

.btn-toolbar {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;

.input-group {
width: auto;
}
}

.btn-group {
> .btn:not(:first-child),
> .btn-group:not(:first-child) {
margin-left: calc(var(--pgn-btn-border-width) * -1);
}

> .btn:not(:last-child):not(.dropdown-toggle),
> .btn-group:not(:last-child) > .btn {
@include border-right-radius(0);
}

> .btn:not(:first-child),
> .btn-group:not(:first-child) > .btn {
@include border-left-radius(0);
}
}

/* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */
.btn-group-sm > .btn { @extend .btn-sm; }
/* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */
.btn-group-lg > .btn { @extend .btn-lg; }

.dropdown-toggle-split {
padding-right: calc(var(--pgn-btn-padding-x) * .75);
padding-left: calc(var(--pgn-btn-padding-x) * .75);

&::after,
.dropup &::after,
.dropright &::after {
margin-left: 0;
}

.dropleft &::before {
margin-right: 0;
}
}

.btn-sm + .dropdown-toggle-split {
padding-right: calc(var(--pgn-btn-padding-x-sm) * .75);
padding-left: calc(var(--pgn-btn-padding-x-sm) * .75);
}

.btn-lg + .dropdown-toggle-split {
padding-right: calc(var(--pgn-btn-padding-x-lg) * .75);
padding-left: calc(var(--pgn-btn-padding-x-lg) * .75);
}

.btn-group.show .dropdown-toggle {
@include box-shadow(var(--pgn-btn-box-shadow-active));

&.btn-link {
@include box-shadow(none);
}
}

.btn-group-vertical {
flex-direction: column;
align-items: flex-start;
justify-content: center;

> .btn,
> .btn-group {
width: 100%;
}

> .btn:not(:first-child),
> .btn-group:not(:first-child) {
margin-top: calc(var(--pgn-btn-border-width) * -1);
}

> .btn:not(:last-child):not(.dropdown-toggle),
> .btn-group:not(:last-child) > .btn {
@include border-bottom-radius(0);
}

> .btn:not(:first-child),
> .btn-group:not(:first-child) > .btn {
@include border-top-radius(0);
}
}

.btn-group-toggle {
> .btn,
> .btn-group > .btn {
margin-bottom: 0;

input[type="radio"],
input[type="checkbox"] {
position: absolute;
clip: rect(0, 0, 0, 0);
pointer-events: none;
}
}
}
2 changes: 1 addition & 1 deletion src/Card/Card.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
@import "variables";
@import "~bootstrap/scss/card";
@import "card-bootstrap";

.pgn__card,
.pgn__card-body {
Expand Down
Loading

0 comments on commit adef627

Please sign in to comment.