Merge pull request #112 from NikitaRubocki/84_update_forms

84 update forms
osu-cascades · Mar 2, 2022 · 2ad4c04 · 2ad4c04
2 parents ae0f09a + 5f00118
commit 2ad4c04
Show file tree

Hide file tree

Showing 22 changed files with 389 additions and 144 deletions.
diff --git a/app/assets/stylesheets/alerts.css.scss b/app/assets/stylesheets/alerts.css.scss
@@ -0,0 +1,42 @@
+.alert {
+  ul {
+    margin: 0 0 30px 0;
+  }
+}
+
+.alert .alert-heading {
+  margin: 0 0 10px 0;
+}
+
+.alert ul {
+  margin: 0px;
+}
+
+// Devise alerts
+.alert-error {
+	background-color: #f2dede;
+	border-color: #eed3d7;
+	color: #b94a48;
+	text-align: left;
+ }
+
+.alert-alert {
+	background-color: #f2dede;
+	border-color: #eed3d7;
+	color: #b94a48;
+	text-align: left;
+ }
+
+.alert-success {
+	background-color: #dff0d8;
+	border-color: #d6e9c6;
+	color: #468847;
+	text-align: left;
+ }
+
+.alert-notice {
+	background-color: #dff0d8;
+	border-color: #d6e9c6;
+	color: #468847;
+	text-align: left;
+ }
diff --git a/app/assets/stylesheets/buttons.css.scss b/app/assets/stylesheets/buttons.css.scss
@@ -7,6 +7,7 @@
   padding: $space0;
   text-align: center;
   border-radius: $space0;
+  border: 1px solid black;
   transition-duration: 0.1s;
 }
 
@@ -16,20 +17,60 @@
   border-color: $orange3;
   box-shadow: $shadow2;
   &:hover, &:focus, &:focus-visible {
-    color: $grey9;
     background-color: $orange3;
     border-color: $orange3;
     box-shadow: $shadow1;
     outline: 0px;
   }
   &:active {
-    color: $grey9;
     background-color: $orange2;
     border-color: $orange2;
     box-shadow: $shadow1;
   }
 }
 
+.secondary {
+  color: $orange3;
+  background-color: white;
+  border-color: $orange3;
+  box-shadow: $shadow2;
+  &:hover, &:focus, &:focus-visible {
+    color: $orange3;
+    background-color: white;
+    border-color: $orange3;
+    box-shadow: $shadow1;
+    outline: 0px;
+  }
+  &:active {
+    color: $orange3;
+    background-color: $grey9;
+    border-color: $orange2;
+    box-shadow: $shadow1;
+  }
+}
+
+.delete {
+  font-size: $txt0;
+  height: $space4;
+  width: $space7;
+  color: white;
+  background-color: $red4;
+  border-color: $red4;
+  transition: all .15s ease-in-out;
+  &:hover, &:focus, &:focus-visible {
+    color: white;
+    background-color: $red4;
+    border-color: $red4;
+    outline: 0px;
+    transform: scale(1.1);
+  }
+  &:active {
+    color: white;
+    background-color: $red3;
+    border-color: $red3;
+  }
+}
+
 .btn-icon {
 	height: $space5;
 	width: $space5;
@@ -55,3 +96,15 @@
   column-gap: $space2;
   justify-content: end;
 }
+
+.btn-form {
+  display: grid;
+  grid-auto-flow: column;
+  column-gap: $space3;
+  justify-content: end;
+  border-top: 1px solid $grey7;
+  padding: $space3;
+  &.submit {
+    margin-right: $space0;
+  }
+}
diff --git a/app/assets/stylesheets/checkbox.css.scss b/app/assets/stylesheets/checkbox.css.scss
@@ -0,0 +1,39 @@
+@import './constants.css.scss';
+
+input[type="checkbox"] {
+	appearance: none;
+	margin: 0px $space2 0px !important;
+	padding: 3px 7px 2px !important;
+	vertical-align: text-bottom;
+	height: $txt4;
+	width: $txt4;
+	outline: 0px;
+	border-radius: $space0;
+	background-color: white;
+	border: 1px solid #ccc;
+	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+	cursor: pointer;
+	&::before {
+		position: absolute;
+		content: '';
+		width: 6px;
+		height: 12px;
+		border-style: solid;
+		color: white;
+		border-width: 0 3px 3px 0;
+		transform: rotate(38deg);
+		opacity: 0;
+	}
+	&:hover{
+		border-color: $orange6;
+		box-shadow: $border-orange;
+	}
+	&:checked {
+		border-color: $orange5;
+		background: $orange5;
+		box-shadow: none;
+		&::before {
+			opacity: 1;
+		}
+	}
+}
diff --git a/app/assets/stylesheets/constants.css.scss b/app/assets/stylesheets/constants.css.scss
@@ -149,10 +149,13 @@ $shadow5: 0 20px 40px rgba(0,0,0,.2);
 $orange-shadow: 0 10px 20px rgba(194, 68, 0, 0.45), 0 5px 10px rgba(0,0,0,.10);
 // shadow3 mixed with green2
 $green-shadow: 0 10px 20px rgba(81, 120, 18, 0.5), 0 5px 10px rgba(0,0,0,.10);
+// border shadow mixed with orange7
+$border-orange: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(249, 150, 108, 0.6);
 // picture border shadow
 $border-shadow: inset 0 0 0 1px hsla(0, 0%, 0%, .1);
 
 
+
 // ICONS
 @font-face {
   font-family: 'icomoon';

diff --git a/app/assets/stylesheets/custom.css.scss.erb b/app/assets/stylesheets/custom.css.scss.erb
@@ -7,11 +7,11 @@
 $osu-orange: #C34500;
 $gray-medium-light: #eaeaea;
 
-@mixin box_sizing {
+<%# @mixin box_sizing {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
-}
+} %>
 
 
 // Universal
@@ -46,49 +46,6 @@ ul.pagination {
   }
 }
 
-.alert {
-  ul {
-    margin: 0 0 30px 0;
-  }
-}
-
-.alert .alert-heading {
-  margin: 0 0 10px 0;
-}
-
-.alert ul {
-  margin: 0px;
-}
-
-// Devise alerts
-
-.alert-error {
-    background-color: #f2dede;
-    border-color: #eed3d7;
-    color: #b94a48;
-    text-align: left;
- }
-
-.alert-alert {
-    background-color: #f2dede;
-    border-color: #eed3d7;
-    color: #b94a48;
-    text-align: left;
- }
-
-.alert-success {
-    background-color: #dff0d8;
-    border-color: #d6e9c6;
-    color: #468847;
-    text-align: left;
- }
-
-.alert-notice {
-    background-color: #dff0d8;
-    border-color: #d6e9c6;
-    color: #468847;
-    text-align: left;
- }
 
 // Header
 
@@ -98,13 +55,13 @@ a.navbar-brand img {
 }
 
 
-.debug_dump {
+<%# .debug_dump {
   clear: both;
   float: left;
   width: 100%;
   margin-top: 45px;
   @include box-sizing;
-}
+} %>
 
 
 // Sign In
@@ -119,44 +76,6 @@ a.navbar-brand img {
   }
 }
 
-// Forms
-
-input, textarea, select, .uneditable-input {
-  border: 1px solid #bbb;
-  width: 100%;
-  margin-bottom: 15px;
-  @include box_sizing;
-}
-
-input[type="checkbox"] {
-  margin-bottom: 15px;
-  box-shadow: none !important;
-}
-
-textarea {
-  resize: vertical;
-}
-
-.field_with_errors {
-  @extend .has-error;
-  .form-control {
-    color: $state-danger-text;
-  }
-}
-
-.g-recaptcha {
-  margin-bottom: 15px;
-}
-
-form img {
-  margin-bottom: 20px;
-}
-
-label.form-label-photo {
-  display: block;
-}
-
-
 // Model indexes
 
 ul.indexing {

diff --git a/app/assets/stylesheets/default.css.scss b/app/assets/stylesheets/default.css.scss
@@ -1,13 +1,7 @@
 @import './constants.css.scss';
-@import "bootstrap";
+@import 'bootstrap';
 
 
-@mixin box_sizing {
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
 html, body { 
   height: 100%;
   width: 100%;
@@ -32,7 +26,7 @@ p {
 a { 
   text-decoration: none;
   &:link, &:visited, &:hover, &:active {
-    text-decoration: none
+    text-decoration: none;
   }
 }
 
@@ -78,3 +72,13 @@ form.button_to {
   margin: 0px;
   padding: 0px;
 }
+
+.field_with_errors {
+  @extend .has-error;
+  .form-control {
+		background-color: $red9;
+    &:focus {
+		  background-color: white;
+    }
+  }
+}