Improved form feedback styles.

Author: azaslonov

src/themes/website/styles/forms.scss

@@ -24,13 +24,8 @@ form {
     display: none;
 }
 
-.form-control:invalid+.invalid-feedback,
-.form-control.invalid+.invalid-feedback {
-    display: block;
-}
-
-.input-group:invalid+.invalid-feedback,
-.input-group.invalid+.invalid-feedback {
+:invalid~.invalid-feedback,
+.invalid~.invalid-feedback {
     display: block;
 }
 

src/themes/website/styles/layouts.scss

@@ -10,84 +10,6 @@ html {
     flex-direction: column;
 }
 
-.container {
-    width: 100%;
-    padding-right: 15px;
-    padding-left: 15px;
-    margin-right: auto;
-    margin-left: auto;
-}
-
-@media (min-width: 576px) {
-    .container {
-        max-width: 540px;
-    }
-}
-
-@media (min-width: 768px) {
-    .container {
-        max-width: 720px;
-    }
-}
-
-@media (min-width: 992px) {
-    .container {
-        max-width: 960px;
-    }
-}
-
-@media (min-width: 1200px) {
-    .container {
-        max-width: 1140px;
-    }
-}
-
-.container-fluid,
-.container-sm,
-.container-md,
-.container-lg,
-.container-xl {
-    width: 100%;
-    padding-right: 15px;
-    padding-left: 15px;
-    margin-right: auto;
-    margin-left: auto;
-}
-
-@media (min-width: 576px) {
-    .container,
-    .container-sm {
-        max-width: 540px;
-    }
-}
-
-@media (min-width: 768px) {
-    .container,
-    .container-sm,
-    .container-md {
-        max-width: 720px;
-    }
-}
-
-@media (min-width: 992px) {
-    .container,
-    .container-sm,
-    .container-md,
-    .container-lg {
-        max-width: 960px;
-    }
-}
-
-@media (min-width: 1200px) {
-    .container,
-    .container-sm,
-    .container-md,
-    .container-lg,
-    .container-xl {
-        max-width: 1140px;
-    }
-}
-
 .row {
     display: flex;
     flex-wrap: wrap;
@@ -377,8 +299,8 @@ section {
     }
 
     /* TODO: Enable row height through editor */
-    &.stretch > .container,
-    .container-fluid > .row {
+    &.stretch > .style-guide,
+    .style-guide-fluid > .row {
         flex: 1;
     }
 }

src/themes/website/styles/styles.design.scss

@@ -229,6 +229,84 @@ $style-guide-color: #000;
     }
 }
 
+.style-guide {
+    width: 100%;
+    padding-right: 15px;
+    padding-left: 15px;
+    margin-right: auto;
+    margin-left: auto;
+}
+
+@media (min-width: 576px) {
+    .style-guide {
+        max-width: 540px;
+    }
+}
+
+@media (min-width: 768px) {
+    .style-guide {
+        max-width: 720px;
+    }
+}
+
+@media (min-width: 992px) {
+    .style-guide {
+        max-width: 960px;
+    }
+}
+
+@media (min-width: 1200px) {
+    .style-guide {
+        max-width: 1140px;
+    }
+}
+
+.style-guide-fluid,
+.style-guide-sm,
+.style-guide-md,
+.style-guide-lg,
+.style-guide-xl {
+    width: 100%;
+    padding-right: 15px;
+    padding-left: 15px;
+    margin-right: auto;
+    margin-left: auto;
+}
+
+@media (min-width: 576px) {
+    .style-guide,
+    .style-guide-sm {
+        max-width: 540px;
+    }
+}
+
+@media (min-width: 768px) {
+    .style-guide,
+    .style-guide-sm,
+    .style-guide-md {
+        max-width: 720px;
+    }
+}
+
+@media (min-width: 992px) {
+    .style-guide,
+    .style-guide-sm,
+    .style-guide-md,
+    .style-guide-lg {
+        max-width: 960px;
+    }
+}
+
+@media (min-width: 1200px) {
+    .style-guide,
+    .style-guide-sm,
+    .style-guide-md,
+    .style-guide-lg,
+    .style-guide-xl {
+        max-width: 1140px;
+    }
+}
+
 .text-uppercase {
     text-transform: uppercase;
 }