Changeset 11755 for trunk/src/bp-templates/bp-nouveau/common-styles/_bp-mixins.scss

Timestamp:

12/01/2017 11:16:45 PM (8 years ago)

Author:

hnla

Message:

Nouveau: Re-factor password verify JS & styles ( registration screen )

Commit updates password-verify.js to correct switch statement removing 'short' for 'misnatch' on 'pwsL10n.mismatch' html.

Adds new class for all conditions met of 'show' to manage the display of hidden result element, this simplifies the style rulesets.

Updates password style mixins for additional param for color.

Adds new ruleset to handle .mismatch mixin include ( provisional alt styling ), adds border styles for password input fields.

Todo: Track down the red border outline of input controls when unfocussed, currently this alludes pinpointing to any styles or JS - possibly originating from WP js?

File:

• trunk/src/bp-templates/bp-nouveau/common-styles/_bp-mixins.scss (modified) (5 diffs)

trunk/src/bp-templates/bp-nouveau/common-styles/_bp-mixins.scss

@@ -320 +320 @@
 }
 
+// Layout elements / lists as grids
+// A combined mixin to set flex-flow & flex.
+// This mixin must be called on the parent i.e 'ul'
+
+@mixin build-flex-layout($row-wrap: wrap, $align: stretch, $basis: auto, $grow: 0 ) {
+
+    @include flex-box-dir($flex-dir: "row", $flex-wrap: $row-wrap);
+    @include flex-align($align: $align);
+
+    > * {
+
+        @include box-item-size($grow: $grow, $shrink: 1, $basis: $basis);
+    }
+}
+
 // Links as a tabbed effect.
 // Renders links in a horizontal layout as a
@@ -446 +461 @@
 // Password warn colors
 
-@mixin pwd-bad-colors($background: null, $border: null) {
+@mixin pwd-bad-colors($color: inherit, $background: null, $border: null) {
 
     @if $background {
@@ -463 +478 @@
 
     border-color: $border;
-}
-
-@mixin pwd-short-colors($background: null, $border: null) {
+
+    color: $color;
+}
+
+@mixin pwd-short-colors($color: inherit, $background: null, $border: null) {
 
     @if $background {
@@ -482 +499 @@
 
     border-color: $border;
-}
-
-@mixin pwd-good-colors($background: null, $border: null) {
+
+    color: $color;
+}
+
+@mixin pwd-good-colors($color: inherit, $background: null, $border: null) {
 
     @if $background {
@@ -501 +520 @@
 
     border-color: $border;
+
+    color: $color;
 }