first commit

wp-content/plugins/nimble-builder/assets/front/scss/utilities/_clearfix.scss

@@ -0,0 +1,3 @@
+.#{$project-prefix}clearfix {
+	@include clearfix();
+}

wp-content/plugins/nimble-builder/assets/front/scss/utilities/_display.scss

@@ -0,0 +1,20 @@
+// stylelint-disable declaration-no-important
+
+//
+// Utilities for common `display` values
+//
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+    .#{$project-prefix}d#{$infix}-none         { display: none !important; }
+    .#{$project-prefix}d#{$infix}-inline       { display: inline !important; }
+    .#{$project-prefix}d#{$infix}-inline-block { display: inline-block !important; }
+    .#{$project-prefix}d#{$infix}-block        { display: block !important; }
+    .#{$project-prefix}d#{$infix}-table        { display: table !important; }
+    .#{$project-prefix}d#{$infix}-table-row    { display: table-row !important; }
+    .#{$project-prefix}d#{$infix}-table-cell   { display: table-cell !important; }
+    .#{$project-prefix}d#{$infix}-flex         { display: flex !important; }
+    .#{$project-prefix}d#{$infix}-inline-flex  { display: inline-flex !important; }
+  }
+}

wp-content/plugins/nimble-builder/assets/front/scss/utilities/_embed.scss

@@ -0,0 +1,20 @@
+// allows a better control over the embedded elements heights like iframes
+// by specifing a padding-top in percentage to the .#{$project-prefix}embed::before we can have
+// responsive iframes respecting the aspect ratio defined by the padding-top
+// the padding-top can be expressed in pixels or any other unit as well, in this case, hence when
+// we don't need the height to be related to the element's width, we can specify just the height property instead.
+.#{$project-prefix}embed {
+	position: relative;
+	&::before {
+		display: block;
+		content: '';
+	}
+	.#{$project-prefix}embed-inner,
+	iframe {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		top: 0;
+		left: 0;
+	}
+}

wp-content/plugins/nimble-builder/assets/front/scss/utilities/_flex.scss

@@ -0,0 +1,51 @@
+// stylelint-disable declaration-no-important
+
+// Flex variation
+//
+// Custom styles for additional flex alignment options.
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+    .#{$project-prefix}flex#{$infix}-row            { flex-direction: row !important; }
+    .#{$project-prefix}flex#{$infix}-column         { flex-direction: column !important; }
+    .#{$project-prefix}flex#{$infix}-row-reverse    { flex-direction: row-reverse !important; }
+    .#{$project-prefix}flex#{$infix}-column-reverse { flex-direction: column-reverse !important; }
+
+    .#{$project-prefix}flex#{$infix}-wrap         { flex-wrap: wrap !important; }
+    .#{$project-prefix}flex#{$infix}-nowrap       { flex-wrap: nowrap !important; }
+    .#{$project-prefix}flex#{$infix}-wrap-reverse { flex-wrap: wrap-reverse !important; }
+    .#{$project-prefix}flex#{$infix}-fill         { flex: 1 1 auto !important; }
+    .#{$project-prefix}flex#{$infix}-grow-0       { flex-grow: 0 !important; }
+    .#{$project-prefix}flex#{$infix}-grow-1       { flex-grow: 1 !important; }
+    .#{$project-prefix}flex#{$infix}-shrink-0     { flex-shrink: 0 !important; }
+    .#{$project-prefix}flex#{$infix}-shrink-1     { flex-shrink: 1 !important; }
+
+    .#{$project-prefix}justify-content#{$infix}-start   { justify-content: flex-start !important; }
+    .#{$project-prefix}justify-content#{$infix}-end     { justify-content: flex-end !important; }
+    .#{$project-prefix}justify-content#{$infix}-center  { justify-content: center !important; }
+    .#{$project-prefix}justify-content#{$infix}-between { justify-content: space-between !important; }
+    .#{$project-prefix}justify-content#{$infix}-around  { justify-content: space-around !important; }
+
+    .#{$project-prefix}align-items#{$infix}-start    { align-items: flex-start !important; }
+    .#{$project-prefix}align-items#{$infix}-end      { align-items: flex-end !important; }
+    .#{$project-prefix}align-items#{$infix}-center   { align-items: center !important; }
+    .#{$project-prefix}align-items#{$infix}-baseline { align-items: baseline !important; }
+    .#{$project-prefix}align-items#{$infix}-stretch  { align-items: stretch !important; }
+
+    .#{$project-prefix}align-content#{$infix}-start   { align-content: flex-start !important; }
+    .#{$project-prefix}align-content#{$infix}-end     { align-content: flex-end !important; }
+    .#{$project-prefix}align-content#{$infix}-center  { align-content: center !important; }
+    .#{$project-prefix}align-content#{$infix}-between { align-content: space-between !important; }
+    .#{$project-prefix}align-content#{$infix}-around  { align-content: space-around !important; }
+    .#{$project-prefix}align-content#{$infix}-stretch { align-content: stretch !important; }
+
+    .#{$project-prefix}align-self#{$infix}-auto     { align-self: auto !important; }
+    .#{$project-prefix}align-self#{$infix}-start    { align-self: flex-start !important; }
+    .#{$project-prefix}align-self#{$infix}-end      { align-self: flex-end !important; }
+    .#{$project-prefix}align-self#{$infix}-center   { align-self: center !important; }
+    .#{$project-prefix}align-self#{$infix}-baseline { align-self: baseline !important; }
+    .#{$project-prefix}align-self#{$infix}-stretch  { align-self: stretch !important; }
+  }
+}

wp-content/plugins/nimble-builder/assets/front/scss/utilities/_screenreaders.scss

@@ -0,0 +1,11 @@
+//
+// Screenreaders
+//
+
+.#{$project-prefix}sr-only {
+  @include sr-only();
+}
+
+.#{$project-prefix}sr-only-focusable {
+  @include sr-only-focusable();
+}