scss_ninja 0.1.0 → 0.1.1

data/app/assets/stylesheets/css/texts&backgrounds.css

@@ -0,0 +1,392 @@
+.has-text-center {
+  text-align: center;
+}
+
+.text-upcase {
+  text-transform: uppercase;
+}
+
+.text-lowercase {
+  text-transform: lowercase;
+}
+
+.text-dark {
+  color: #000000;
+}
+
+.text-pri {
+  color: #00ffff;
+}
+
+.text-danger {
+  color: #ff0000;
+}
+
+.text-success {
+  color: #008000;
+}
+
+.text-warning {
+  color: #ffa500;
+}
+
+.text-pink {
+  color: #ff00ff;
+}
+
+.text-gray {
+  color: #808080;
+}
+
+.text-light {
+  color: #e6e6e6;
+}
+
+.text-info {
+  color: #0000ff;
+}
+
+.shadow-red {
+  text-shadow: 2px 2px #ff0000;
+}
+
+.shadow-blue {
+  text-shadow: 2px 2px #0000ff;
+}
+
+.shadow-white {
+  text-shadow: 2px 2px white;
+}
+
+.shadow-light {
+  text-shadow: 2px 2px #dfdcdc;
+}
+
+.shadow-dark {
+  text-shadow: 2px 2px #000;
+}
+
+.text-white {
+  color: white;
+  font-weight: 900;
+  text-shadow: 2px 2px #343450;
+  font-size: 25px;
+  letter-spacing: 1px;
+}
+
+/*  ############# colors ############  */
+.bg-dark {
+  background-color: #000000;
+}
+
+.bg-light {
+  background-color: #e6e6e6;
+}
+
+.bg-gray {
+  background-color: #808080;
+}
+
+.bg-white {
+  background-color: white;
+}
+
+/* ############# primary colors ###########   */
+.bg-pri {
+  background-color: #00ffff;
+}
+
+.bg-pri-light-1 {
+  background-color: #1affff;
+}
+
+.bg-pri-light-2 {
+  background-color: #4dffff;
+}
+
+.bg-pri-light-3 {
+  background-color: #80ffff;
+}
+
+.bg-pri-light-4 {
+  background-color: #b3ffff;
+}
+
+.bg-pri-light-5 {
+  background-color: #e6ffff;
+}
+
+/* ######## primary dark colors */
+.bg-pri-dark-1 {
+  background-color: #001a1a;
+}
+
+.bg-pri-dark-2 {
+  background-color: #004d4d;
+}
+
+.bg-pri-dark-3 {
+  background-color: #008080;
+}
+
+.bg-pri-dark-4 {
+  background-color: #00b3b3;
+}
+
+.bg-pri-dark-4 {
+  background-color: #00cccc;
+}
+
+/* ################# Red backgounds ############### */
+.bg-red {
+  background-color: #ff0000;
+}
+
+.bg-red-light-1 {
+  background-color: #ff3333;
+}
+
+.bg-red-light-2 {
+  background-color: #ff4d4d;
+}
+
+.bg-red-light-3 {
+  background-color: #ff8080;
+}
+
+.bg-red-light-4 {
+  background-color: #ff9999;
+}
+
+.bg-red-light-5 {
+  background-color: #ffcccc;
+}
+
+/* ########### red dark styles ############ */
+.bg-red-dark-1 {
+  background-color: #1a0000;
+}
+
+.bg-red-dark-2 {
+  background-color: #4d0000;
+}
+
+.bg-red-dark-3 {
+  background-color: #800000;
+}
+
+.bg-red-dark-4 {
+  background-color: #b30000;
+}
+
+.bg-red-dark-5 {
+  background-color: #e60000;
+}
+
+/* ########## orange backgrounds ########## */
+.bg-orn {
+  background-color: #ffa500;
+}
+
+.bg-orn-light-1 {
+  background-color: #ffb833;
+}
+
+.bg-orn-light-2 {
+  background-color: #ffc966;
+}
+
+.bg-orn-light-3 {
+  background-color: #ffdb99;
+}
+
+.bg-orn-light-4 {
+  background-color: #ffedcc;
+}
+
+.bg-orn-light-5 {
+  background-color: #fff6e6;
+}
+
+/* ############# Orange dark ############### */
+.bg-orn-dark-1 {
+  background-color: #1a1100;
+}
+
+.bg-orn-dark-2 {
+  background-color: #4d3200;
+}
+
+.bg-orn-dark-3 {
+  background-color: #805300;
+}
+
+.bg-orn-dark-4 {
+  background-color: #b37400;
+}
+
+.bg-orn-dark-5 {
+  background-color: #e69500;
+}
+
+/* ############ Success colurs ############## */
+.bg-suc {
+  background-color: #008000;
+}
+
+.bg-suc-light-1 {
+  background-color: #00b300;
+}
+
+.bg-suc-light-2 {
+  background-color: #00ff00;
+}
+
+.bg-suc-light-3 {
+  background-color: #4dff4d;
+}
+
+.bg-suc-light-4 {
+  background-color: #99ff99;
+}
+
+.bg-suc-light-5 {
+  background-color: #ccffcc;
+}
+
+/* ############# success dark colors ############## */
+.bg-suc-dark-1 {
+  background-color: #001a00;
+}
+
+.bg-suc-dark-2 {
+  background-color: #003300;
+}
+
+.bg-suc-dark-3 {
+  background-color: #004d00;
+}
+
+.bg-suc-dark-4 {
+  background-color: #006600;
+}
+
+.bg-suc-dark-5 {
+  background-color: #028502;
+}
+
+/* ############# Pink backgrounds ############ */
+.bg-pnk {
+  background-color: #ff00ff;
+}
+
+.bg-pnk-light-1 {
+  background-color: #ff33ff;
+}
+
+.bg-pnk-light-2 {
+  background-color: #ff66ff;
+}
+
+.bg-pnk-light-3 {
+  background-color: #ff99ff;
+}
+
+.bg-pnk-light-4 {
+  background-color: #ffb3ff;
+}
+
+.bg-pnk-light-5 {
+  background-color: #ffe6ff;
+}
+
+/* ############ Pink dark colors ############# */
+.bg-pnk-dark-1 {
+  background-color: #1a001a;
+}
+
+.bg-pnk-dark-2 {
+  background-color: #4d004d;
+}
+
+.bg-pnk-dark-3 {
+  background-color: #800080;
+}
+
+.bg-pnk-dark-4 {
+  background-color: #b300b3;
+}
+
+.bg-pnk-dark-5 {
+  background-color: #cc00cc;
+}
+
+/* ############ Info background colors ########### */
+.bg-info {
+  background-color: #0000ff;
+}
+
+.bg-info-light-1 {
+  background-color: #3333ff;
+}
+
+.bg-info-light-2 {
+  background-color: #6666ff;
+}
+
+.bg-info-light-3 {
+  background-color: #9999ff;
+}
+
+.bg-info-light-4 {
+  background-color: #bdbdfd;
+}
+
+.bg-info-light-5 {
+  background-color: #d0d0fa;
+}
+
+/* ############ Info dark styles ############### */
+.bg-info-dark-1 {
+  background-color: #000033;
+}
+
+.bg-info-dark-2 {
+  background-color: #000066;
+}
+
+.bg-info-dark-3 {
+  background-color: #000099;
+}
+
+.bg-info-dark-4 {
+  background-color: #0303ca;
+}
+
+.bg-info-dark-5 {
+  background-color: #0404d8;
+}
+
+/* ############ Gradients x-axis ############# */
+.grdx-pnkl-orn {
+  background: -webkit-gradient(linear, left top, right top, from(#cc99ff), to(#ff9966));
+  background: linear-gradient(to right, #cc99ff 0%, #ff9966 100%);
+}
+
+.grdx-pri-orn {
+  background: -webkit-gradient(linear, left top, right top, from(#66ffcc), color-stop(71%, #ff9933));
+  background: linear-gradient(to right, #66ffcc 0%, #ff9933 71%);
+}
+
+.rrg-red-orn-grn {
+  background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
+}
+
+.rrg-red-orn-pri {
+  background-image: repeating-radial-gradient(red, yellow 10%, cyan 15%);
+}
+
+.rrg-red-orn-pnk {
+  background-image: repeating-radial-gradient(red, yellow 10%, #db08ca 15%);
+}
+/*# sourceMappingURL=texts&backgrounds.css.map */

data/app/assets/stylesheets/forms.scss

@@ -0,0 +1,40 @@
+/* ############ Styles for forms ############# */
+form {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  font-family: 'Times New Roman', Times, serif;
+  font-size: 17px;
+  text-shadow: 2px 2px rgb(203, 203, 206);
+
+  .label {
+    font-weight: 900;
+  }
+
+  .field {
+    margin-bottom: 1.2rem;
+  }
+
+  .input {
+    width: 100%;
+    height: 4vh;
+    border: 1px solid rgb(224, 222, 222);
+    border-radius: 5px;
+    font-size: 25px;
+    padding-left: 0.5%;
+  }
+
+  .actions {
+    width: 100%;
+
+    .submit {
+      padding: 0.7rem 2.5rem 0.7rem 2.5rem;
+      font-size: 17px;
+      font-weight: 900;
+      border: 1px solid rgb(9, 231, 194);
+      border-radius: 7px;
+      color: white;
+      margin-bottom: 1.2rem;
+    }
+  }
+}

data/app/assets/stylesheets/margins&paddings.scss

@@ -5,33 +5,105 @@ $margin-bottom: 5;
 $margin-right: 5;
 $margin-left: 5;
 
-@for $i from 1 through $margin {
-  .m-#{$i} {
-    margin: $i * 1rem;
+.m-auto {
+  margin: auto auto auto auto;
+}
+
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+@for $i from 0 through 5 {
+  @if $i == 0 {
+    .mx-#{$i} {
+      margin-left: $i;
+      margin-right: $i;
+    }
+  } @else {
+    .mx-#{$i} {
+      margin-left: $i 1rem;
+      margin-right: $i * 1rem;
+    }
+  }
+}
+
+.my-auto {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
+@for $i from 0 through 5 {
+  @if $i == 0 {
+    .my-#{$i} {
+      margin-top: $i;
+      margin-bottom: $i;
+    }
+  } @else {
+    .my-#{$i} {
+      margin-top: $i 1rem;
+      margin-bottom: $i * 1rem;
+    }
+  }
+}
+
+@for $i from 0 through $margin {
+  @if $i == 0 {
+    .m-#{$i} {
+      margin: $i;
+    }
+  } @else {
+    .m-#{$i} {
+      margin: $i * 1rem;
+    }
   }
 }
 
-@for $i from 1 through $margin-top {
-  .mt-#{$i} {
-    margin-top: $i * 1rem;
+@for $i from 0 through $margin-top {
+  @if $i == 0 {
+    .mt-#{$i} {
+      margin: $i;
+    }
+  } @else {
+    .mt-#{$i} {
+      margin: $i * 1rem;
+    }
   }
 }
 
-@for $i from 1 through $margin-bottom {
-  .mb-#{$i} {
-    margin-bottom: $i * 1rem;
+@for $i from 0 through $margin-bottom {
+  @if $i == 0 {
+    .mb-#{$i} {
+      margin: $i;
+    }
+  } @else {
+    .mb-#{$i} {
+      margin: $i * 1rem;
+    }
   }
 }
 
-@for $i from 1 through $margin-right {
-  .mr-#{$i} {
-    margin-right: $i * 1rem;
+@for $i from 0 through $margin-right {
+  @if $i == 0 {
+    .mr-#{$i} {
+      margin: $i;
+    }
+  } @else {
+    .mr-#{$i} {
+      margin: $i * 1rem;
+    }
   }
 }
 
-@for $i from 1 through $margin-left {
-  .ml-#{$i} {
-    margin-left: $i * 1rem;
+@for $i from 0 through $margin-left {
+  @if $i == 0 {
+    .ml-#{$i} {
+      margin: $i;
+    }
+  } @else {
+    .ml-#{$i} {
+      margin: $i * 1rem;
+    }
   }
 }
 
@@ -43,32 +115,104 @@ $padding-bottom: 5;
 $padding-right: 5;
 $padding-left: 5;
 
-@for $i from 1 through $padding {
-  .p-#{$i} {
-    padding: $i * 1rem;
+.p-auto {
+  padding: auto auto auto auto;
+}
+
+.px-auto {
+  padding-left: auto;
+  padding-right: auto;
+}
+
+@for $i from 0 through 5 {
+  @if $i == 0 {
+    .px-#{$i} {
+      padding-left: $i;
+      padding-right: $i;
+    }
+  } @else {
+    .px-#{$i} {
+      padding-left: $i 1rem;
+      padding-right: $i * 1rem;
+    }
+  }
+}
+
+.py-auto {
+  padding-top: auto;
+  padding-bottom: auto;
+}
+
+@for $i from 0 through 5 {
+  @if $i == 0 {
+    .py-#{$i} {
+      padding-top: $i;
+      padding-bottom: $i;
+    }
+  } @else {
+    .py-#{$i} {
+      padding-top: $i 1rem;
+      padding-bottom: $i * 1rem;
+    }
+  }
+}
+
+@for $i from 0 through $padding {
+  @if $i == 0 {
+    .p-#{$i} {
+      padding: $i;
+    }
+  } @else {
+    .p-#{$i} {
+      padding: $i * 1rem;
+    }
   }
 }
 
-@for $i from 1 through $padding-top {
-  .pt-#{$i} {
-    padding-top: $i * 1rem;
+@for $i from 0 through $padding-top {
+  @if $i == 0 {
+    .pt-#{$i} {
+      padding-top: $i;
+    }
+  } @else {
+    .pt-#{$i} {
+      padding-top: $i * 1rem;
+    }
   }
 }
 
-@for $i from 1 through $padding-bottom {
-  .pb-#{$i} {
-    padding-bottom: $i * 1rem;
+@for $i from 0 through $padding-bottom {
+  @if $i == 0 {
+    .pb-#{$i} {
+      padding-bottom: $i;
+    }
+  } @else {
+    .pb-#{$i} {
+      padding-bottom: $i * 1rem;
+    }
   }
 }
 
-@for $i from 1 through $padding-right {
-  .pr-#{$i} {
-    padding-right: $i * 1rem;
+@for $i from 0 through $padding-right {
+  @if $i == 0 {
+    .pr-#{$i} {
+      padding-right: $i;
+    }
+  } @else {
+    .pr-#{$i} {
+      padding-right: $i * 1rem;
+    }
   }
 }
 
-@for $i from 1 through $padding-left {
-  .pl-#{$i} {
-    padding-left: $i * 1rem;
+@for $i from 0 through $padding-left {
+  @if $i == 0 {
+    .pl-#{$i} {
+      padding-left: $i;
+    }
+  } @else {
+    .pl-#{$i} {
+      padding-left: $i * 1rem;
+    }
   }
 }

data/app/assets/stylesheets/modals.scss

@@ -0,0 +1,53 @@
+.modal {
+  width: 100%;
+  height: 100%;
+
+  .input-modal {
+    display: none;
+  }
+
+  .input-modal:checked ~ .modal-card {
+    display: block;
+    transform: scale(1, 1);
+    transform-origin: top;
+    transition: transform 0.5s ease-in-out;
+  }
+
+  .modal-card {
+    position: relative;
+    transform: scale(1, 0);
+
+    label{
+      position: absolute;
+      top: 0.2rem;
+      right: 0.2rem;
+      height: 2rem;
+      width: 2.8rem;
+
+      span {
+        font-size: 3rem;
+        font-weight: 900;
+      }
+    }
+
+    .modal-card-header {
+      position: absolute;
+      top: 2rem;
+      height: 20%;
+    }
+
+    .modal-card-body {
+      position: absolute;
+      top: calc(20% + 2rem);
+      height: calc(100% - (20% + 2rem + 10%));
+    }
+  }
+
+  .modal-control {
+    label {
+      padding: 1rem 0.7rem 1rem 0.7rem;
+      background-color: aqua;
+      border-radius: 0.8rem;
+    }
+  }
+}