scss_ninja 0.1.0 → 0.1.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fa2e018750fbdf0d0b54bf801f9066b2ffe79c1a135e6ae96d45d59f985bbd31
-  data.tar.gz: 3c2b59f0a5b83f2f04795608d2bc94e748aad44b79c0b72fc38bff8ba3155a86
+  metadata.gz: d8ea5afdee4c17163da578e58261f2dc3b397897ab1362fe7f3d775801fa0091
+  data.tar.gz: 620e5c4c4f3beeb89956b198011a184d9616a0b9c21d0e371a47deffb8b85e23
 SHA512:
-  metadata.gz: 51749c26ee97e5abd1ea39b214fb4d52e8bb820b686471ffdb05a6b6be901df09ab1a4861fd2d0dfefa1012eff1746f6ed54635801c17e67957c1dcac7ad2013
-  data.tar.gz: 4e8348b46d86fb7632df523845283608e1e8cefb202f6142bcc66f377fd57010c1f3ff3c5155a28bb55a1aa49dae16f8c94b81718833237b00f304cde893a3d2
+  metadata.gz: eed13e61bb890a1f4000f155280c296546cb951d724c94bf78a7bdb24a9808ae25a726302dcbdd09b3ed2875c727c80c0be114a0a0e5a90c6a182d930f362586
+  data.tar.gz: '082c9fe830ae56c2d37d4a849af9af78dc47ca6b3d2e1b800198b1aa0bbc98d717a9679c50fa2c81ab31b952e7e5efef4c7e6bc277fb70d1766b7b89ff91f482'

data/CHANGELOG.md

@@ -3,3 +3,8 @@
 ## [0.1.0] - 2021-10-30
 
 - Initial release
+
+## [0.1.1] - 2021-11-04
+
+- Second version release
+- Add more css styles

data/README.md

@@ -4,7 +4,7 @@ Welcome to your new gem! In this directory, you'll find the files you need to be
 
 TODO: Delete this and the text above, and describe your gem
 
-## Installation
+## Installation for Ruby on Rails Projects
 
 Add this line to your application's Gemfile:
 
@@ -20,9 +20,83 @@ Or install it yourself as:
 
     $ gem install scss_ninja
 
+## Installation for Pure html Projects
+
+- add the following line of code to your html document`s head
+
+```html
+ <link rel="stylesheet" href="https://tongoonamujera.github.io/scss_ninja/app/assets/stylesheets/css/scss_ninja.css">
+```
+
 ## Usage
 
-TODO: Write usage instructions here
+- This gem is used for stylesheets
+
+  - for rails projects add the following code to any scss file  `@import 'scss_ninja';`
+
+  - complete usage instructions to come!!!!!!!!!!!!!
+
+- ## Margins
+
+    |lowest margin class| highest margin class| explanation|
+    |:-----------------:|:-------------------:|:----------:|
+    |`m-1`              | `m-5`               |add margin around the whole element|
+    |`mt-1`             | `mt-5`              |margin-top|
+    |`mr-1`             | `mr-5`              |margin-right|
+    |`mb-1`             | `mb-5`              |margin-bottom|
+    |`ml-1`             | `ml-5`              |margin-left|
+
+- ## Paddings
+
+    |lowest padding class| highest padding class| explanation|
+    |:------------------:|:--------------------:|:----------:|
+    |`p-1`               | `p-5`                |add padding around the whole element|
+    |`pt-1`              | `pt-5`               |padding-top|
+    |`pr-1`              | `pr-5`               |padding-right|
+    |`pb-1`              | `pb-5`               |padding-bottom|
+    |`pl-1`              | `pl-5`               |paddding-left|
+
+- ## Backgrounds
+
+    |background-color|         class       | color      |
+    |:--------------:|:-------------------:|:----------:|
+    |red     | `bg-red`      |![....](https://via.placeholder.com/30/ff0000/000000?txt=+)|
+    |orange     |`bg-orn`|![....](https://via.placeholder.com/30/ffa500/000000?txt=+)
+    |green     |`bg-suc`|![....](https://via.placeholder.com/30/008000/000000?txt=+)
+    |pink     |`bg-pnk`|![....](https://via.placeholder.com/30/ff00ff/000000?txt=+)
+    |blue      |`bg-info`|![....](https://via.placeholder.com/30/0000ff/000000?txt=+)
+    |cyan      |`bg-pri`|![....](https://via.placeholder.com/30/00ffff/000000?txt=+)
+
+- ## Columns
+
+    |        class       |% width relative to container|
+    |:------------------:|:---------------------------:|
+    |`column-1`          |           8.33              |
+    |`column-2`          |           16.67             |
+    |`column-3`          |             25              |
+    |`column-4`          |           33.33             |
+    |`column-5`          |           41.67             |
+    |`column-6`          |             50              |
+    |`column-7`          |           58.33             |
+    |`column-8`          |           66.67             |
+    |`column-9`          |             75              |
+    |`column-10`         |           83.33             |
+    |`column-11`         |           91.67             |
+    |`column-12`         |            100              |
+
+```diff
+- columns start from 1 to 12, the width increases as the number increases
+```
+
+- ## Heights and Widths
+
+    |lowest height class| highest height class| explanation|
+    |:-----------------:|:-------------------:|:----------:|
+    |`h-1`              | `h-10`               |height for an element|
+
+    |lowest width class| highest width class| explanation|
+    |:----------------:|:------------------:|:----------:|
+    |`w-1`             | `w-10`             |width for an element|
 
 ## Development
 
@@ -32,7 +106,7 @@ To install this gem onto your local machine, run `bundle exec rake install`. To
 
 ## Contributing
 
-Bug reports and pull requests are welcome on GitHub at https://github.com/[USERNAME]/scss_ninja. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [code of conduct](https://github.com/[USERNAME]/scss_ninja/blob/master/CODE_OF_CONDUCT.md).
+Bug reports and pull requests are welcome on GitHub [at](https://github.com/tongoonamujera/scss_ninja). This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [code of conduct](https://github.com/tongoonamujera/scss_ninja/blob/main/CODE_OF_CONDUCT.md).
 
 ## License
 
@@ -40,4 +114,4 @@ The gem is available as open source under the terms of the [MIT License](https:/
 
 ## Code of Conduct
 
-Everyone interacting in the ScssNinja project's codebases, issue trackers, chat rooms and mailing lists is expected to follow the [code of conduct](https://github.com/[USERNAME]/scss_ninja/blob/master/CODE_OF_CONDUCT.md).
+Everyone interacting in the ScssNinja project's codebases, issue trackers, chat rooms and mailing lists is expected to follow the [code of conduct](https://github.com/tongoonamujera/scss_ninja/blob/main/CODE_OF_CONDUCT.md).

data/app/assets/stylesheets/border&radius.scss

@@ -0,0 +1,174 @@
+@for $i from 1 through 5 {
+  @if $i == 5 {
+    .br-r {
+      border-radius: $i * 20%;
+    }
+
+    .bbrr-r {
+      border-bottom-right-radius: $i * 1rem;
+    }
+
+    .btrr-r {
+      border-top-right-radius: $i * 1rem;
+    }
+
+    .btlr-r {
+      border-top-right-radius: $i * 1rem;
+    }
+
+    .bblr-r {
+      border-top-right-radius: $i * 1rem;
+    }
+  } @else {
+    .br-#{$i} {
+      border-radius: $i * 1rem;
+    }
+
+    .bbrr-#{$i} {
+      border-bottom-right-radius: $i * 1rem;
+    }
+
+    .btrr-#{$i} {
+      border-top-right-radius: $i * 1rem;
+    }
+
+    .btlr-#{$i} {
+      border-top-right-radius: $i * 1rem;
+    }
+
+    .bblr-#{$i} {
+      border-top-right-radius: $i * 1rem;
+    }
+  }
+}
+
+.bt-red {
+  border-top: 1px solid red;
+}
+
+.bt-pnk {
+  border-top: 1px solid rgb(163, 12, 151);
+}
+
+.bt-orn {
+  border-top: 1px solid orange;
+}
+
+.bt-pri {
+  border-top: 1px solid cyan;
+}
+
+.bt-info {
+  border-top: 1px solid blue;
+}
+
+.bt-light {
+  border-top: 1px solid gray;
+}
+
+.bt-dark {
+  border-top: 1px solid black;
+}
+
+.bt-dark {
+  border-top: 1px solid white;
+}
+
+
+.bl-red {
+  border-left: 1px solid red;
+}
+
+.bl-pnk {
+  border-left: 1px solid rgb(163, 12, 151);
+}
+
+.bl-orn {
+  border-left: 1px solid orange;
+}
+
+.bl-pri {
+  border-left: 1px solid cyan;
+}
+
+.bl-info {
+  border-left: 1px solid blue;
+}
+
+.bl-light {
+  border-left: 1px solid gray;
+}
+
+.bl-dark {
+  border-left: 1px solid black;
+}
+
+.bl-dark {
+  border-left: 1px solid white;
+}
+
+
+.bb-red {
+  border-bottom: 1px solid red;
+}
+
+.bb-pnk {
+  border-bottom: 1px solid rgb(163, 12, 151);
+}
+
+.bb-orn {
+  border-bottom: 1px solid orange;
+}
+
+.bb-pri {
+  border-bottom: 1px solid cyan;
+}
+
+.bb-info {
+  border-bottom: 1px solid blue;
+}
+
+.bb-light {
+  border-bottom: 1px solid gray;
+}
+
+.bb-dark {
+  border-bottom: 1px solid black;
+}
+
+.bb-dark {
+  border-bottom: 1px solid white;
+}
+
+
+.br-red {
+  border-right: 1px solid red;
+}
+
+.br-pnk {
+  border-right: 1px solid rgb(163, 12, 151);
+}
+
+.br-orn {
+  border-right: 1px solid orange;
+}
+
+.br-pri {
+  border-right: 1px solid cyan;
+}
+
+.br-info {
+  border-right: 1px solid blue;
+}
+
+.br-light {
+  border-right: 1px solid gray;
+}
+
+.br-dark {
+  border-right: 1px solid black;
+}
+
+.br-dark {
+  border-right: 1px solid white;
+}

data/app/assets/stylesheets/cards.scss

@@ -0,0 +1,119 @@
+/* ####### Styles for card ######## */
+
+.card {
+  width: 94%;
+  display: flex;
+  border: 1px solid rgb(226, 222, 222);
+  border-radius: 20px;
+  padding: 0 3% 3% 0;
+  box-shadow: 5px 10px rgb(233, 232, 232);
+
+  .aside {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-left: 0;
+    padding-left: 0;
+    border: inherit;
+    border-top-left-radius: inherit;
+    font-family: 'Times New Roman', Times, serif;
+
+    .aside-header {
+      margin-top: 0%;
+    }
+
+    .aside-body {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-evenly;
+      align-items: center;
+      margin-left: 10px;
+      padding-left: 0;
+    }
+  }
+
+  .body {
+    display: flex;
+    flex-direction: column;
+
+    .card-header {
+      font-weight: 900;
+      text-align: center;
+    }
+
+    .card-content {
+      width: 100%;
+      margin-left: 0.9%;
+    }
+
+    .card-footer {
+      display: flex;
+      justify-content: space-evenly;
+    }
+  }
+}
+
+.cards {
+  width: 100%;
+  background-color: rgb(245, 238, 238);
+  color: black;
+  border-radius: 10px;
+  position: relative;
+  height: 100%;
+
+  .card-header {
+    background-color: rgb(187, 184, 184);
+    width: 100%;
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+    position: absolute;
+    top: 0;
+    left: auto;
+    height: 20%;
+    font-weight: 900;
+    box-shadow: 0 5px rgb(231, 229, 229);
+
+    .card-header-content {
+      width: fit-content;
+      height: 70%;
+      margin: auto auto auto auto;
+      transform: translateY(50%);
+    }
+  }
+
+  .card-body {
+    margin-left: 3%;
+    margin-right: 3%;
+    position: absolute;
+    top: 22%;
+    width: fit-content;
+    max-width: inherit;
+    height: 63%;
+    border-radius: inherit;
+    // background-color: rgb(120, 9, 134);
+
+    .card-body-content {
+      width: fit-content;
+      margin: auto auto auto auto;
+      text-align: center;
+      padding: 1%;
+    }
+  }
+
+  .card-footer {
+    position: absolute;
+    bottom: 0;
+    height: 13%;
+    width: 100%;
+    background-color: rgb(224, 222, 222);
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+    display: flex;
+    .card-footer-content {
+      width: auto;
+      margin: auto;
+      padding: 2% 1% 2% 1%;
+    }
+  }
+}

data/app/assets/stylesheets/carousel.scss

@@ -153,4 +153,65 @@
       }
     }
   }
+}
+
+
+
+
+
+
+.pagination {
+  width: inherit;
+  height: 100%;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  @for $i from 1 through 10 {
+    .input-#{$i} {
+      display: none;
+    }
+  }
+
+  @for $i from 1 through 10 {
+    .page-#{$i} {
+      position: absolute;
+      top: 0;
+      width: 100%;
+      display: none;
+    }
+  }
+
+  @for $i from 1 through 10 {
+    .input-#{$i}:checked ~ .page-#{$i} {
+      display: block;
+    }
+
+    .input-#{$i}:checked ~ .pagination-control > .lab-#{$i} {
+      background-color: rgb(219, 51, 9);
+      color: lemonchiffon;
+    }
+  }
+
+  .pagination-control {
+    position: absolute;
+    bottom: 0;
+    transform: translateY(90%);
+    width: 100%;
+    height: 10%;
+    display: flex;
+    justify-content: center;
+
+    @for $i from 1 through 10 {
+      .lab-#{$i} {
+        width: fit-content;
+        padding: 0.7rem 0.5rem 0.7rem 0.5rem;
+        background-color: rgb(73, 65, 6);
+        border-radius: 5px;
+        margin: auto;
+      }
+    }
+  }
 }

data/app/assets/stylesheets/columns.scss

@@ -0,0 +1,228 @@
+body {
+  margin: 0;
+  width: 100vw;
+  height: 100vh;
+  padding: 0;
+}
+
+.flex-col {
+  display: flex;
+  flex-direction: column;
+}
+
+.has-text-centered {
+  text-align: center;
+  align-content: center;
+  width: 100%;
+}
+
+.is-fullwidth {
+  width: inherit;
+}
+
+.submit {
+  padding-left: 2.5rem;
+  padding-right: 2.5rem;
+  padding-top: 0.7rem;
+  padding-bottom: 0.7rem;
+  font-size: 17px;
+  font-weight: 900;
+  border: 1px solid rgb(9, 231, 194);
+  border-radius: 7px;
+  color: white;
+  margin-bottom: 1.2rem;
+  text-align: center;
+  text-decoration: none;
+}
+
+.main {
+  margin: 0;
+  height: 84%;
+  width: 100%;
+}
+
+.button {
+  padding: 0.7rem 2.5rem 0.7rem 2.5rem;
+  font-size: 17px;
+  font-weight: 900;
+  background-color: #000000;
+  border: 1px solid rgb(9, 231, 194);
+  border-radius: 7px;
+  color: white;
+  text-decoration: none;
+}
+
+/* ################ Styles for columns ################# */
+
+$column: 12;
+
+@for $i from 1 through $column {
+  @if $column <= 11 {
+    .column-#{$i} {
+      width: (99% * ($i / $column));
+      height: inherit;
+      margin-right: 0 0.5% 0 0.5%;
+    }
+  } @else {
+    .column-#{$i} {
+      width: (100% * ($i / $column));
+      height: inherit;
+    }
+  }
+}
+
+.columns {
+  width: 100%;
+  height: fit-content;
+}
+
+.is-centered {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+@media only screen and (max-width: 576px) {
+  $column: 12;
+
+  @for $i from 1 through $column {
+    @if $column <= 11 {
+      .m-column-#{$i} {
+        width: (99% * ($i / $column)) !important;
+        height: inherit;
+        margin-right: 0 0.5% 0 0.5%;
+      }
+    } @else {
+      .m-column-#{$i} {
+        width: (100% * ($i / $column)) !important;
+        height: inherit;
+      }
+    }
+  }
+
+  .columns {
+    width: 100%;
+    height: fit-content;
+  }
+
+  .is-centered {
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+
+@media only screen and(min-width: 577px) and (max-width: 768px) {
+  $column: 12;
+
+  @for $i from 1 through $column {
+    @if $column <= 11 {
+      .lm-column-#{$i} {
+        width: (99% * ($i / $column));
+        height: inherit;
+        margin-right: 0 0.5% 0 0.5%;
+      }
+    } @else {
+      .lm-column-#{$i} {
+        width: (100% * ($i / $column));
+        height: inherit;
+      }
+    }
+  }
+
+  .columns {
+    width: 100%;
+    height: fit-content;
+  }
+
+  .is-centered {
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+@media only screen and(min-width: 769px) and (max-width: 992px) {
+  $column: 12;
+
+  @for $i from 1 through $column {
+    @if $column <= 11 {
+      .t-column-#{$i} {
+        width: (99% * ($i / $column));
+        height: inherit;
+        margin-right: 0 0.5% 0 0.5%;
+      }
+    } @else {
+      .t-column-#{$i} {
+        width: (100% * ($i / $column));
+        height: inherit;
+      }
+    }
+  }
+
+  .columns {
+    width: 100%;
+    height: fit-content;
+  }
+
+  .is-centered {
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+@media only screen and(min-width: 992px) and (max-width: 1200px) {
+  $column: 12;
+
+  @for $i from 1 through $column {
+    @if $column <= 11 {
+      .d-column-#{$i} {
+        width: (99% * ($i / $column));
+        height: inherit;
+        margin-right: 0 0.5% 0 0.5%;
+      }
+    } @else {
+      .d-column-#{$i} {
+        width: (100% * ($i / $column));
+        height: inherit;
+      }
+    }
+  }
+
+  .columns {
+    width: 100%;
+    height: fit-content;
+  }
+
+  .is-centered {
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+@media only screen and (min-width: 1200px) {
+  $column: 12;
+
+  @for $i from 1 through $column {
+    @if $column <= 11 {
+      .ld-column-#{$i} {
+        width: (99% * ($i / $column));
+        height: inherit;
+        margin-right: 0 0.5% 0 0.5%;
+      }
+    } @else {
+      .ld-column-#{$i} {
+        width: (100% * ($i / $column));
+        height: inherit;
+      }
+    }
+  }
+
+  .columns {
+    width: 100%;
+    height: fit-content;
+  }
+
+  .is-centered {
+    margin-left: auto;
+    margin-right: auto;
+  }
+}