scss_ninja 0.1.0 → 0.1.4

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

@@ -0,0 +1,390 @@
+/* ######## Margin styles ######### */
+.m-auto {
+  margin: auto auto auto auto;
+}
+
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.mx-0 {
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.mx-1 {
+  margin-left: 1 1rem;
+  margin-right: 1rem;
+}
+
+.mx-2 {
+  margin-left: 2 1rem;
+  margin-right: 2rem;
+}
+
+.mx-3 {
+  margin-left: 3 1rem;
+  margin-right: 3rem;
+}
+
+.mx-4 {
+  margin-left: 4 1rem;
+  margin-right: 4rem;
+}
+
+.mx-5 {
+  margin-left: 5 1rem;
+  margin-right: 5rem;
+}
+
+.my-auto {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
+.my-0 {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.my-1 {
+  margin-top: 1 1rem;
+  margin-bottom: 1rem;
+}
+
+.my-2 {
+  margin-top: 2 1rem;
+  margin-bottom: 2rem;
+}
+
+.my-3 {
+  margin-top: 3 1rem;
+  margin-bottom: 3rem;
+}
+
+.my-4 {
+  margin-top: 4 1rem;
+  margin-bottom: 4rem;
+}
+
+.my-5 {
+  margin-top: 5 1rem;
+  margin-bottom: 5rem;
+}
+
+.m-0 {
+  margin: 0;
+}
+
+.m-1 {
+  margin: 1rem;
+}
+
+.m-2 {
+  margin: 2rem;
+}
+
+.m-3 {
+  margin: 3rem;
+}
+
+.m-4 {
+  margin: 4rem;
+}
+
+.m-5 {
+  margin: 5rem;
+}
+
+.mt-0 {
+  margin: 0;
+}
+
+.mt-1 {
+  margin: 1rem;
+}
+
+.mt-2 {
+  margin: 2rem;
+}
+
+.mt-3 {
+  margin: 3rem;
+}
+
+.mt-4 {
+  margin: 4rem;
+}
+
+.mt-5 {
+  margin: 5rem;
+}
+
+.mb-0 {
+  margin: 0;
+}
+
+.mb-1 {
+  margin: 1rem;
+}
+
+.mb-2 {
+  margin: 2rem;
+}
+
+.mb-3 {
+  margin: 3rem;
+}
+
+.mb-4 {
+  margin: 4rem;
+}
+
+.mb-5 {
+  margin: 5rem;
+}
+
+.mr-0 {
+  margin: 0;
+}
+
+.mr-1 {
+  margin: 1rem;
+}
+
+.mr-2 {
+  margin: 2rem;
+}
+
+.mr-3 {
+  margin: 3rem;
+}
+
+.mr-4 {
+  margin: 4rem;
+}
+
+.mr-5 {
+  margin: 5rem;
+}
+
+.ml-0 {
+  margin: 0;
+}
+
+.ml-1 {
+  margin: 1rem;
+}
+
+.ml-2 {
+  margin: 2rem;
+}
+
+.ml-3 {
+  margin: 3rem;
+}
+
+.ml-4 {
+  margin: 4rem;
+}
+
+.ml-5 {
+  margin: 5rem;
+}
+
+/* ######## Padding styles ######### */
+.p-auto {
+  padding: auto auto auto auto;
+}
+
+.px-auto {
+  padding-left: auto;
+  padding-right: auto;
+}
+
+.px-0 {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.px-1 {
+  padding-left: 1 1rem;
+  padding-right: 1rem;
+}
+
+.px-2 {
+  padding-left: 2 1rem;
+  padding-right: 2rem;
+}
+
+.px-3 {
+  padding-left: 3 1rem;
+  padding-right: 3rem;
+}
+
+.px-4 {
+  padding-left: 4 1rem;
+  padding-right: 4rem;
+}
+
+.px-5 {
+  padding-left: 5 1rem;
+  padding-right: 5rem;
+}
+
+.py-auto {
+  padding-top: auto;
+  padding-bottom: auto;
+}
+
+.py-0 {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.py-1 {
+  padding-top: 1 1rem;
+  padding-bottom: 1rem;
+}
+
+.py-2 {
+  padding-top: 2 1rem;
+  padding-bottom: 2rem;
+}
+
+.py-3 {
+  padding-top: 3 1rem;
+  padding-bottom: 3rem;
+}
+
+.py-4 {
+  padding-top: 4 1rem;
+  padding-bottom: 4rem;
+}
+
+.py-5 {
+  padding-top: 5 1rem;
+  padding-bottom: 5rem;
+}
+
+.p-0 {
+  padding: 0;
+}
+
+.p-1 {
+  padding: 1rem;
+}
+
+.p-2 {
+  padding: 2rem;
+}
+
+.p-3 {
+  padding: 3rem;
+}
+
+.p-4 {
+  padding: 4rem;
+}
+
+.p-5 {
+  padding: 5rem;
+}
+
+.pt-0 {
+  padding-top: 0;
+}
+
+.pt-1 {
+  padding-top: 1rem;
+}
+
+.pt-2 {
+  padding-top: 2rem;
+}
+
+.pt-3 {
+  padding-top: 3rem;
+}
+
+.pt-4 {
+  padding-top: 4rem;
+}
+
+.pt-5 {
+  padding-top: 5rem;
+}
+
+.pb-0 {
+  padding-bottom: 0;
+}
+
+.pb-1 {
+  padding-bottom: 1rem;
+}
+
+.pb-2 {
+  padding-bottom: 2rem;
+}
+
+.pb-3 {
+  padding-bottom: 3rem;
+}
+
+.pb-4 {
+  padding-bottom: 4rem;
+}
+
+.pb-5 {
+  padding-bottom: 5rem;
+}
+
+.pr-0 {
+  padding-right: 0;
+}
+
+.pr-1 {
+  padding-right: 1rem;
+}
+
+.pr-2 {
+  padding-right: 2rem;
+}
+
+.pr-3 {
+  padding-right: 3rem;
+}
+
+.pr-4 {
+  padding-right: 4rem;
+}
+
+.pr-5 {
+  padding-right: 5rem;
+}
+
+.pl-0 {
+  padding-left: 0;
+}
+
+.pl-1 {
+  padding-left: 1rem;
+}
+
+.pl-2 {
+  padding-left: 2rem;
+}
+
+.pl-3 {
+  padding-left: 3rem;
+}
+
+.pl-4 {
+  padding-left: 4rem;
+}
+
+.pl-5 {
+  padding-left: 5rem;
+}
+/*# sourceMappingURL=margins&paddings.css.map */

data/app/assets/stylesheets/css/modals.css

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

data/app/assets/stylesheets/css/nav.css

@@ -0,0 +1,259 @@
+/* ############ Nav bar styles ############# */
+@media only screen and (min-width: 826px) {
+  .nav-bar {
+    display: -ms-grid;
+    display: grid;
+    -ms-grid-columns: 2fr 8fr 2fr;
+        grid-template-columns: 2fr 8fr 2fr;
+    height: 70px;
+    width: 100%;
+    background-color: #76e9cc;
+    font-size: 20px;
+    font-family: 'Times New Roman', Times, serif;
+  }
+  .nav-bar .checkbox,
+  .nav-bar .checkbox-lab {
+    display: none;
+  }
+  .nav-bar .nav-start {
+    -ms-grid-column: 1;
+    -ms-grid-column-span: 1;
+    grid-column: 1 / span 1;
+    padding: 0;
+    margin: 23px 0 0 0;
+  }
+  .nav-bar .nav-start p {
+    padding: 0;
+    margin: 0 0 0 20px;
+    width: -webkit-fit-content;
+    width: -moz-fit-content;
+    width: fit-content;
+    text-shadow: 2px 2px #bdbaba;
+    font-weight: 900;
+  }
+  .nav-bar .nav-start p::after {
+    content: '';
+    height: 7px;
+    width: 0;
+    display: block;
+    background-color: ivory;
+    border-radius: 2px;
+  }
+  .nav-bar .nav-start p:hover::after {
+    width: 100%;
+    -webkit-transition: width 0.2s ease-in-out;
+    transition: width 0.2s ease-in-out;
+  }
+  .nav-bar .mid-nav {
+    -ms-grid-column: 2;
+    -ms-grid-column-span: 1;
+    grid-column: 2 / span 1;
+    margin: 0;
+    margin-top: 23px;
+  }
+  .nav-bar .mid-nav ul {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    padding: 0;
+    margin: 0;
+  }
+  .nav-bar .mid-nav ul li {
+    list-style: none;
+    padding: 0;
+    margin: 0 auto 0 auto;
+    font-family: 'Times New Roman', Times, serif;
+    width: -webkit-fit-content;
+    width: -moz-fit-content;
+    width: fit-content;
+  }
+  .nav-bar .mid-nav ul li a {
+    text-decoration: none;
+    color: black;
+    width: -webkit-fit-content;
+    width: -moz-fit-content;
+    width: fit-content;
+    font-weight: 900;
+    text-shadow: 2px 2px #d3d2d2;
+  }
+  .nav-bar .mid-nav ul li a:hover::after {
+    content: '';
+    height: 7px;
+    background-color: aliceblue;
+    display: block;
+    border-radius: 2px;
+  }
+  .nav-bar .nav-end {
+    -ms-grid-column: 3;
+    -ms-grid-column-span: 1;
+    grid-column: 3 / span 1;
+    margin-top: 23px;
+  }
+}
+
+@media only screen and (max-width: 825px) {
+  .nav-bar {
+    all: initial;
+    position: relative;
+    display: -ms-grid;
+    display: grid;
+    -ms-grid-columns: 2fr 4fr 3fr;
+        grid-template-columns: 2fr 4fr 3fr;
+    height: 70px;
+    width: 100%;
+    background-color: #76e9cc;
+    font-size: 20px;
+    font-family: 'Times New Roman', Times, serif;
+  }
+  .nav-bar .checkbox {
+    display: none;
+  }
+  .nav-bar .checkbox:checked ~ .mid-nav {
+    display: block;
+  }
+  .nav-bar .checkbox:checked ~ .checkbox-lab > span {
+    -webkit-transform: rotate(45deg);
+            transform: rotate(45deg);
+    -webkit-transition: -webkit-transform 0.4s ease-in-out;
+    transition: -webkit-transform 0.4s ease-in-out;
+    transition: transform 0.4s ease-in-out;
+    transition: transform 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out;
+  }
+  .nav-bar .checkbox:checked ~ .checkbox-lab > span:hover {
+    -webkit-transform: rotate(180deg);
+            transform: rotate(180deg);
+    -webkit-transition: -webkit-transform 0.7s ease-in-out;
+    transition: -webkit-transform 0.7s ease-in-out;
+    transition: transform 0.7s ease-in-out;
+    transition: transform 0.7s ease-in-out, -webkit-transform 0.7s ease-in-out;
+  }
+  .nav-bar .checkbox:checked ~ .checkbox-lab > span::after {
+    -webkit-transform: rotate(90deg);
+            transform: rotate(90deg);
+    bottom: 0;
+  }
+  .nav-bar .checkbox:checked ~ .checkbox-lab > span::before {
+    display: none;
+  }
+  .nav-bar .checkbox-lab {
+    display: block;
+    height: calc(70px - 23px);
+    margin: 30px 0 0 20px;
+    -ms-grid-column: 1;
+    -ms-grid-column-span: 1;
+    grid-column: 1 / span 1;
+  }
+  .nav-bar .checkbox-lab > span {
+    content: '';
+    display: block;
+    background-color: ivory;
+    width: 55px;
+    height: 6px;
+    position: relative;
+  }
+  .nav-bar .checkbox-lab > span::before {
+    content: '';
+    display: block;
+    background-color: ivory;
+    width: 55px;
+    height: 6px;
+    position: absolute;
+    top: 13px;
+  }
+  .nav-bar .checkbox-lab > span::after {
+    content: '';
+    display: block;
+    background-color: ivory;
+    width: 55px;
+    height: 6px;
+    position: absolute;
+    bottom: 13px;
+  }
+  .nav-bar .nav-start {
+    -ms-grid-column: 2;
+    -ms-grid-column-span: 1;
+    grid-column: 2/ span 1;
+    padding: 0;
+    margin: 23px 0 0 0;
+  }
+  .nav-bar .nav-start p {
+    padding: 0;
+    margin: 0 0 0 20px;
+    width: -webkit-fit-content;
+    width: -moz-fit-content;
+    width: fit-content;
+    text-shadow: 2px 2px #bdbaba;
+    font-weight: 900;
+  }
+  .nav-bar .nav-start p::after {
+    content: '';
+    height: 7px;
+    width: 0;
+    display: block;
+    background-color: ivory;
+    border-radius: 2px;
+  }
+  .nav-bar .nav-start p:hover::after {
+    width: 100%;
+    -webkit-transition: width 0.2s ease-in-out;
+    transition: width 0.2s ease-in-out;
+  }
+  .nav-bar .mid-nav {
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: 0 !important;
+    margin: 0;
+    width: 100%;
+    height: 90vh;
+    background-color: #0dc0c0;
+    z-index: 1;
+  }
+  .nav-bar .mid-nav ul {
+    padding: 0;
+    margin-left: auto;
+    margin-right: auto;
+    width: 20%;
+    height: 30%;
+    margin-top: 30%;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+  }
+  .nav-bar .mid-nav ul li {
+    list-style: none;
+    padding: 0;
+    margin: 0 auto;
+    width: -webkit-fit-content;
+    width: -moz-fit-content;
+    width: fit-content;
+    font-family: 'Times New Roman', Times, serif;
+  }
+  .nav-bar .mid-nav ul li a {
+    text-decoration: none;
+    color: black;
+    width: -webkit-fit-content;
+    width: -moz-fit-content;
+    width: fit-content;
+    font-weight: 900;
+    text-shadow: 2px 2px #d3d2d2;
+  }
+  .nav-bar .mid-nav ul li a:hover::after {
+    content: '';
+    height: 7px;
+    background-color: aliceblue;
+    border-radius: 2px;
+    display: block;
+  }
+  .nav-bar .nav-end {
+    -ms-grid-column: 3;
+    -ms-grid-column-span: 1;
+    grid-column: 3 / span 1;
+    margin-top: 23px;
+  }
+}
+
+.img-rounded {
+  border-radius: 50%;
+}
+/*# sourceMappingURL=nav.css.map */

data/app/assets/stylesheets/css/opacity.css

@@ -0,0 +1,40 @@
+.op-1 {
+  opacity: 0.1;
+}
+
+.op-2 {
+  opacity: 0.2;
+}
+
+.op-3 {
+  opacity: 0.3;
+}
+
+.op-4 {
+  opacity: 0.4;
+}
+
+.op-5 {
+  opacity: 0.5;
+}
+
+.op-6 {
+  opacity: 0.6;
+}
+
+.op-7 {
+  opacity: 0.7;
+}
+
+.op-8 {
+  opacity: 0.8;
+}
+
+.op-9 {
+  opacity: 0.9;
+}
+
+.op-10 {
+  opacity: 1;
+}
+/*# sourceMappingURL=opacity.css.map */