Skip to content

Commit

Permalink
[PRJ-59] Invites form validation + skeleton loader template
Browse files Browse the repository at this point in the history
  • Loading branch information
@annrra
annrra committed Jan 27, 2025
1 parent 00ec2cf commit 3d22a93
Show file tree
Hide file tree
Showing 9 changed files with 289 additions and 186 deletions.
102 changes: 100 additions & 2 deletions src/bp-templates/bp-nouveau/readylaunch/css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1291,6 +1291,10 @@ button[data-balloon] {
padding-right: var(--bb-rl-space-500);
}

.bb-rl-form-field-wrapper .bb-rl-input-field.bb-rl-input-field--error {
border: 1px solid var(--bb-rl-border-danger-secondary-color);
}

.bb-rl-form-field-wrapper .bb-rl-textarea-field {
border: 1px solid var(--bb-rl-border-tertiary-color);
border-radius: 6px;
Expand Down Expand Up @@ -1345,6 +1349,7 @@ button[data-balloon] {
.bb-rl-modal-header .bb-rl-modal-close-button {
margin-left: auto;
line-height: 1;
color: var(--bb-rl-icon-primary-color);
}

.bb-rl-modal-content {
Expand Down Expand Up @@ -1484,11 +1489,10 @@ button[data-balloon] {

.bb-rl-container-inner .bp-pagination > .bp-pagination-links .prev::after,
.bb-rl-container-inner .bp-pagination > .bp-pagination-links .next::after {
font-size: var(--font-size-sm);
font-size: var(--font-size-base);
content: "";
font-weight: 400;
font-family: bb-icons-rl;
font-size: 16px;
font-style: normal;
line-height: 1;
position: relative;
Expand Down Expand Up @@ -2441,6 +2445,100 @@ body.admin-bar .bb-rl-left-panel {
width: 100%;
}

.bb-rl-skeleton-grid {
display: flex;
flex-flow: row wrap;
gap: var(--bb-rl-space-200);
}

.has-sidebar .bb-rl-skeleton-grid.grid .bb-rl-skeleton-grid-block {
flex: 0 0 calc(33.33% - (var(--bb-rl-space-200) * 2 / 3));
max-width: calc(33.33% - (var(--bb-rl-space-200) * 2 / 3));
}

.bb-rl-skeleton-grid.grid .bb-rl-skeleton-grid-block {
flex: 0 0 calc(25% - (var(--bb-rl-space-200) * 3 / 4));
max-width: calc(25% - (var(--bb-rl-space-200) * 3 / 4));
}

.bb-rl-skeleton-grid:not(.grid) .bb-rl-skeleton-grid-block {
flex: 0 0 100%;
max-width: 100%;
}

.bb-rl-skeleton-grid-block {
height: 100%;
border-radius: var(--bb-rl-radius-lg);
background-color: var(--bb-rl-background-color);
border: 1px solid var(--bb-rl-border-secondary-color);
padding: var(--bb-rl-space-400) var(--bb-rl-space-300);
display: flex;
align-items: center;
gap: var(--bb-rl-space-200);
}

.bb-rl-skeleton-avatar {
display: inline-block;
width: 104px;
height: 104px;
border-radius: 50%;
background-color: var(--bb-rl-background-secondary-hover-color);
}

.bb-rl-skeleton-data-bit {
display: block;
background-color: var(--bb-rl-background-secondary-hover-color);
border-radius: var(--bb-rl-radius-sm);
height: var(--bb-rl-space-200);
}

.bb-rl-skeleton-data {
flex: 1;
}

.bb-rl-skeleton-data .bb-rl-skeleton-data-bit {
margin: 6px 0;
}

.bb-rl-skeleton-data .bb-rl-skeleton-data-bit:nth-of-type(1) {
width: 30%;
max-width: 92px;
}

.bb-rl-skeleton-data .bb-rl-skeleton-data-bit:nth-of-type(2) {
width: 45%;
max-width: 186px;
}

.bb-rl-skeleton-data .bb-rl-skeleton-data-bit:nth-of-type(3) {
width: 80%;
max-width: 186px;
display: none;
}

.bb-rl-skeleton-footer {
display: flex;
align-items: center;
flex: 0 0 33.33%;
gap: var(--bb-rl-space-200);
justify-content: flex-end;
}

.bb-rl-skeleton-footer .bb-rl-skeleton-data-bit:nth-of-type(1) {
width: 50%;
max-width: 72px;
}

.bb-rl-skeleton-footer .bb-rl-skeleton-data-bit:nth-of-type(2) {
width: 20%;
max-width: 24px;
}

.bb-rl-skeleton-footer .bb-rl-skeleton-data-bit:nth-of-type(3) {
width: 20%;
max-width: 24px;
}

.bb-rl-widget-sidebar .widget {
background-color: var(--bb-rl-background-color);
border: 1px solid var(--bb-rl-border-secondary-color);
Expand Down
4 changes: 4 additions & 0 deletions src/bp-templates/bp-nouveau/readylaunch/css/sass/elements/_forms.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -136,6 +136,10 @@
background-repeat: no-repeat;
padding-right: var(--bb-rl-space-500);
}

&.bb-rl-input-field--error {
border: 1px solid var(--bb-rl-border-danger-secondary-color);
}
}

.bb-rl-textarea-field {
Expand Down
13 changes: 7 additions & 6 deletions src/bp-templates/bp-nouveau/readylaunch/css/sass/elements/_modal.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@
.bb-rl-modal-close-button {
margin-left: auto;
line-height: 1;
color: var(--bb-rl-icon-primary-color);
}
}

Expand All @@ -70,7 +71,7 @@
}

.bb-readylaunch-template {

.modal-mask {
position: fixed;
z-index: 999991;
Expand Down Expand Up @@ -107,13 +108,13 @@
align-items: center;
border-bottom: 1px solid var(--bb-rl-border-secondary-color);
padding: var(--bb-rl-space-200) var(--bb-rl-space-300);

h4 {
margin: 0;

@include bb-rl-base-heading-bolder;
}

.mfp-close {
margin-left: auto;
line-height: 1;
Expand All @@ -132,12 +133,12 @@
> p {
margin-bottom: var(--bb-rl-space-100);
}

> div,
> ul {
color: var(--bb-rl-text-secondary-color);
}

> ul {
padding-left: var(--bb-rl-space-300);
margin-bottom: var(--bb-rl-space-200);
Expand Down
9 changes: 4 additions & 5 deletions src/bp-templates/bp-nouveau/readylaunch/css/sass/elements/_pagination.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,13 +38,12 @@
font-size: var(--font-size-sm);
content: attr(data-bb-rl-label);
}

&::after {
font-size: var(--font-size-sm);
font-size: var(--font-size-base);
content: "";
font-weight: 400;
font-family: bb-icons-rl;
font-size: 16px;
font-style: normal;
line-height: 1;
position: relative;
Expand All @@ -55,15 +54,15 @@
.prev {
flex-direction: row-reverse;
margin-right: var(--bb-rl-space-500);

&::after {
content: "\e138";
}
}

.next {
margin-left: var(--bb-rl-space-500);

&::after {
content: "\e13a";
}
Expand Down
107 changes: 107 additions & 0 deletions src/bp-templates/bp-nouveau/readylaunch/css/sass/layout/_common.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,3 +100,110 @@
}
}
}

.bb-rl-skeleton-grid {
display: flex;
flex-flow: row wrap;
gap: var(--bb-rl-space-200);

&.grid {

.has-sidebar & {

.bb-rl-skeleton-grid-block {
flex: 0 0 calc(33.33% - (var(--bb-rl-space-200) * 2 / 3));
max-width: calc(33.33% - (var(--bb-rl-space-200) * 2 / 3));
}
}

.bb-rl-skeleton-grid-block {
flex: 0 0 calc(25% - (var(--bb-rl-space-200) * 3 / 4));
max-width: calc(25% - (var(--bb-rl-space-200) * 3 / 4));
}
}

&:not(.grid) {

.bb-rl-skeleton-grid-block {
flex: 0 0 100%;
max-width: 100%;
}
}
}

.bb-rl-skeleton-grid-block {
height: 100%;
border-radius: var(--bb-rl-radius-lg);
background-color: var(--bb-rl-background-color);
border: 1px solid var(--bb-rl-border-secondary-color);
padding: var(--bb-rl-space-400) var(--bb-rl-space-300);
display: flex;
align-items: center;
gap: var(--bb-rl-space-200);
}

.bb-rl-skeleton-avatar {
display: inline-block;
width: 104px;
height: 104px;
border-radius: 50%;
background-color: var(--bb-rl-background-secondary-hover-color);
}


.bb-rl-skeleton-data-bit {
display: block;
background-color: var(--bb-rl-background-secondary-hover-color);
border-radius: var(--bb-rl-radius-sm);
height: var(--bb-rl-space-200);
}

.bb-rl-skeleton-data {
flex: 1;

.bb-rl-skeleton-data-bit {
margin: 6px 0;

&:nth-of-type(1) {
width: 30%;
max-width: 92px;
}

&:nth-of-type(2) {
width: 45%;
max-width: 186px;
}

&:nth-of-type(3) {
width: 80%;
max-width: 186px;
display: none;
}
}
}

.bb-rl-skeleton-footer {
display: flex;
align-items: center;
flex: 0 0 33.33%;
gap: var(--bb-rl-space-200);
justify-content: flex-end;

.bb-rl-skeleton-data-bit {

&:nth-of-type(1) {
width: 50%;
max-width: 72px;
}

&:nth-of-type(2) {
width: 20%;
max-width: 24px;
}

&:nth-of-type(3) {
width: 20%;
max-width: 24px;
}
}
}
7 changes: 4 additions & 3 deletions src/bp-templates/bp-nouveau/readylaunch/css/sass/layout/_widgets.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
}

.bb-rl-see-all a {

@include bb-rl-label-heading-bolder;
color: var(--bb-rl-text-color);
}
Expand Down Expand Up @@ -60,14 +61,14 @@
content: "(";
font-size: inherit;
}

&::after {
content: ")";
font-size: inherit;
}

&:empty {

&::before,
&::after {
display: none;
Expand Down
Loading

0 comments on commit 3d22a93

Please sign in to comment.