tachyonscss-rails 4.9.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 9d96d90b381e344f567c0a6095ac52a34a5bc63c31da98f337ea6990e46e30dc
+  data.tar.gz: 7dd5aad4b113febda1d568ec209edfa8b17c81244f9ca0c396a9d4be285d4097
+SHA512:
+  metadata.gz: 5c718c3375f56f6d39d6092f068947c1e3b7ad64564ef6bafd4048e593580ef966ce7ab62231353cae8b38178f99879f06bf663b512413a8f32af3f2e57ae68c
+  data.tar.gz: 80c8a4c19a0b1fb7378e4cd33fbe909d5dd12153ec4baeb270d6732b13e671fae0ca6b05a62e0c372fc34384acc0aacaeb760b3cd8abb252e8700616c4c1985b

data/LICENSE.md

@@ -0,0 +1,33 @@
+[tachyonscss-rails] Copyright (2021) (David Copeland)(“Licensor”)
+
+Hippocratic License Version Number: 2.1.
+
+Purpose. The purpose of this License is for the Licensor named above to permit the Licensee (as defined below) broad permission, if consistent with Human Rights Laws and Human Rights Principles (as each is defined below), to use and work with the Software (as defined below) within the full scope of Licensor’s copyright and patent rights, if any, in the Software, while ensuring attribution and protecting the Licensor from liability.
+
+Permission and Conditions. The Licensor grants permission by this license (“License”), free of charge, to the extent of Licensor’s rights under applicable copyright and patent law, to any person or entity (the “Licensee”) obtaining a copy of this software and associated documentation files (the “Software”), to do everything with the Software that would otherwise infringe (i) the Licensor’s copyright in the Software or (ii) any patent claims to the Software that the Licensor can license or becomes able to license, subject to all of the following terms and conditions:
+
+* Acceptance. This License is automatically offered to every person and entity subject to its terms and conditions. Licensee accepts this License and agrees to its terms and conditions by taking any action with the Software that, absent this License, would infringe any intellectual property right held by Licensor.
+
+* Notice. Licensee must ensure that everyone who gets a copy of any part of this Software from Licensee, with or without changes, also receives the License and the above copyright notice (and if included by the Licensor, patent, trademark and attribution notice). Licensee must cause any modified versions of the Software to carry prominent notices stating that Licensee changed the Software. For clarity, although Licensee is free to create modifications of the Software and distribute only the modified portion created by Licensee with additional or different terms, the portion of the Software not modified must be distributed pursuant to this License. If anyone notifies Licensee in writing that Licensee has not complied with this Notice section, Licensee can keep this License by taking all practical steps to comply within 30 days after the notice. If Licensee does not do so, Licensee’s License (and all rights licensed hereunder) shall end immediately.
+
+* Compliance with Human Rights Principles and Human Rights Laws.
+
+    1. Human Rights Principles.
+
+        (a) Licensee is advised to consult the articles of the United Nations Universal Declaration of Human Rights and the United Nations Global Compact that define recognized principles of international human rights (the “Human Rights Principles”). Licensee shall use the Software in a manner consistent with Human Rights Principles.
+
+        (b) Unless the Licensor and Licensee agree otherwise, any dispute, controversy, or claim arising out of or relating to (i) Section 1(a) regarding Human Rights Principles, including the breach of Section 1(a), termination of this License for breach of the Human Rights Principles, or invalidity of Section 1(a) or (ii) a determination of whether any Law is consistent or in conflict with Human Rights Principles pursuant to Section 2, below, shall be settled by arbitration in accordance with the Hague Rules on Business and Human Rights Arbitration (the “Rules”); provided, however, that Licensee may elect not to participate in such arbitration, in which event this License (and all rights licensed hereunder) shall end immediately. The number of arbitrators shall be one unless the Rules require otherwise.
+
+        Unless both the Licensor and Licensee agree to the contrary: (1) All documents and information concerning the arbitration shall be public and may be disclosed by any party; (2) The repository referred to under Article 43 of the Rules shall make available to the public in a timely manner all documents concerning the arbitration which are communicated to it, including all submissions of the parties, all evidence admitted into the record of the proceedings, all transcripts or other recordings of hearings and all orders, decisions and awards of the arbitral tribunal, subject only to the arbitral tribunal's powers to take such measures as may be necessary to safeguard the integrity of the arbitral process pursuant to Articles 18, 33, 41 and 42 of the Rules; and (3) Article 26(6) of the Rules shall not apply.
+
+    2. Human Rights Laws. The Software shall not be used by any person or entity for any systems, activities, or other uses that violate any Human Rights Laws.  “Human Rights Laws” means any applicable laws, regulations, or rules (collectively, “Laws”) that protect human, civil, labor, privacy, political, environmental, security, economic, due process, or similar rights; provided, however, that such Laws are consistent and not in conflict with Human Rights Principles (a dispute over the consistency or a conflict between Laws and Human Rights Principles shall be determined by arbitration as stated above).  Where the Human Rights Laws of more than one jurisdiction are applicable or in conflict with respect to the use of the Software, the Human Rights Laws that are most protective of the individuals or groups harmed shall apply.
+
+    3. Indemnity. Licensee shall hold harmless and indemnify Licensor (and any other contributor) against all losses, damages, liabilities, deficiencies, claims, actions, judgments, settlements, interest, awards, penalties, fines, costs, or expenses of whatever kind, including Licensor’s reasonable attorneys’ fees, arising out of or relating to Licensee’s use of the Software in violation of Human Rights Laws or Human Rights Principles.
+
+* Failure to Comply. Any failure of Licensee to act according to the terms and conditions of this License is both a breach of the License and an infringement of the intellectual property rights of the Licensor (subject to exceptions under Laws, e.g., fair use). In the event of a breach or infringement, the terms and conditions of this License may be enforced by Licensor under the Laws of any jurisdiction to which Licensee is subject. Licensee also agrees that the Licensor may enforce the terms and conditions of this License against Licensee through specific performance (or similar remedy under Laws) to the extent permitted by Laws. For clarity, except in the event of a breach of this License, infringement, or as otherwise stated in this License, Licensor may not terminate this License with Licensee.
+
+* Enforceability and Interpretation. If any term or provision of this License is determined to be invalid, illegal, or unenforceable by a court of competent jurisdiction, then such invalidity, illegality, or unenforceability shall not affect any other term or provision of this License or invalidate or render unenforceable such term or provision in any other jurisdiction; provided, however, subject to a court modification pursuant to the immediately following sentence, if any term or provision of this License pertaining to Human Rights Laws or Human Rights Principles is deemed invalid, illegal, or unenforceable against Licensee by a court of competent jurisdiction, all rights in the Software granted to Licensee shall be deemed null and void as between Licensor and Licensee. Upon a determination that any term or provision is invalid, illegal, or unenforceable, to the extent permitted by Laws, the court may modify this License to affect the original purpose that the Software be used in compliance with Human Rights Principles and Human Rights Laws as closely as possible. The language in this License shall be interpreted as to its fair meaning and not strictly for or against any party.
+
+* Disclaimer. TO THE FULL EXTENT ALLOWED BY LAW, THIS SOFTWARE COMES “AS IS,” WITHOUT ANY WARRANTY, EXPRESS OR IMPLIED, AND LICENSOR AND ANY OTHER CONTRIBUTOR SHALL NOT BE LIABLE TO ANYONE FOR ANY DAMAGES OR OTHER LIABILITY ARISING FROM, OUT OF, OR IN CONNECTION WITH THE SOFTWARE OR THIS LICENSE, UNDER ANY KIND OF LEGAL CLAIM.
+
+This Hippocratic License is an Ethical Source license (https://ethicalsource.dev) and is offered for use by licensors and licensees at their own risk, on an “AS IS” basis, and with no warranties express or implied, to the maximum extent permitted by Laws.

data/README.md

@@ -0,0 +1,42 @@
+# tachyonscss-rails - Use Tachyons in a Rails App without NPM Modules
+
+Rails 7 has brought the Asset Pipeline back into the spotlight, which means that bundling CSS without NPM requires gems.  This
+gem allows you to use [Tachyons](https://tachyons.io) without having to set up a JS bundler in your Rails 7 app.
+
+## Install
+
+Add to your `Gemfile`:
+
+```ruby
+gem "tachyonscss-rails"
+```
+
+then `bundle install`
+
+## Use
+
+The most common way to use this is:
+
+1. Ensure you have `sassc-rails` in your `Gemfile`
+1. Ensure your `app/assets/stylesheets/application.scss` file is, in fact, a `.scss` file and not `.css`.  If you haven't put anything in it, you can rename it safely.
+1. Add to `app/assets/stylesheets/applicationscss`:
+
+   ```scss
+   @import "tachyons";
+   ```
+1. If you want to customize Tachyons, [the variables partial](https://github.com/tachyons-css/tachyons-sass/blob/master/scss/_variables.scss) is a guide to what you can modify.  To do that, create the file `app/assets/stylesheets/tachyons-overrides.scss` (or whatever name you like).  For example, you could change the green skin like so:
+
+   ```scss
+   $green: 00ff00;
+   ```
+   Then add it *before* the tachyons `@import` in `app/assets/stylesheets/application.scss:
+
+   ```scss
+   @import "tachyons-overrides";
+   @import "tachyons";
+   ```
+
+Basically, this gem makes it so you can `@import "tachyons";` and it will build the CSS file from the contents of the
+[tachyons-sass](https://github.com/tachyons-css/tachyons-sass) module that this gem wraps.
+
+

data/Rakefile

@@ -0,0 +1,43 @@
+require "pathname"
+require "fileutils"
+require "bundler/gem_tasks"
+
+THIS_GEM_ROOT = Pathname(__FILE__).dirname.expand_path
+
+task :default => [ :update_tachyons ]
+
+include FileUtils
+
+task :update_tachyons do
+
+  tmp          = THIS_GEM_ROOT / "tmp"
+  assets_root  = THIS_GEM_ROOT / "app" / "assets" / "stylesheets"
+  partials_dir = assets_root / "scss"
+
+  rm_rf tmp
+  mkdir_p tmp
+  chdir tmp do
+    sh "git clone git@github.com:tachyons-css/tachyons-sass.git"
+    mkdir_p assets_root
+    mkdir_p partials_dir
+    cp "tachyons-sass/tachyons.scss", assets_root
+    Dir["tachyons-sass/scss/*"].each do |file|
+      cp file, partials_dir
+    end
+  end
+  css_lines = File.read(assets_root / "tachyons.scss").split(/\n/)
+  version = nil
+  if css_lines.first =~ /^\/\*\! TACHYONS v(.*) \|.*$/
+    version = $1
+  elsif css_lines.first =~ /^\/\/ \! TACHYONS v(.*) \|.*$/
+    version = $1
+  else
+    raise "Cannot parse version from #{css_lines.first} from #{url}"
+  end
+  File.open(THIS_GEM_ROOT / "lib" / "tachyonscss-rails" / "version.rb","w") do |file|
+    file.puts "module TachyonscssRails"
+    file.puts "  VERSION = \"#{version}\""
+    file.puts "end"
+  end
+  puts "Updated Tachyons, version #{version}"
+end

data/app/assets/stylesheets/scss/_aspect-ratios.scss

@@ -0,0 +1,142 @@
+
+// Converted Variables
+
+
+// Custom Media Query Variables
+
+
+/*
+
+   ASPECT RATIOS
+
+*/
+
+/* This is for fluid media that is embedded from third party sites like youtube, vimeo etc.
+ * Wrap the outer element in aspect-ratio and then extend it with the desired ratio i.e
+ * Make sure there are no height and width attributes on the embedded media.
+ * Adapted from: https://github.com/suitcss/components-flex-embed
+ *
+ * Example:
+ *
+ * <div class="aspect-ratio aspect-ratio--16x9">
+ *  <iframe class="aspect-ratio--object"></iframe>
+ * </div>
+ *
+ * */
+
+.aspect-ratio {
+  height: 0;
+  position: relative;
+}
+
+.aspect-ratio--16x9 { padding-bottom: 56.25%; }
+.aspect-ratio--9x16 { padding-bottom: 177.77%; }
+
+.aspect-ratio--4x3 {  padding-bottom: 75%; }
+.aspect-ratio--3x4 {  padding-bottom: 133.33%; }
+
+.aspect-ratio--6x4 {  padding-bottom: 66.6%; }
+.aspect-ratio--4x6 {  padding-bottom: 150%; }
+
+.aspect-ratio--8x5 {  padding-bottom: 62.5%; }
+.aspect-ratio--5x8 {  padding-bottom: 160%; }
+
+.aspect-ratio--7x5 {  padding-bottom: 71.42%; }
+.aspect-ratio--5x7 {  padding-bottom: 140%; }
+
+.aspect-ratio--1x1 {  padding-bottom: 100%; }
+
+.aspect-ratio--object {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 100;
+}
+
+@media #{$breakpoint-not-small}{
+    .aspect-ratio-ns {
+      height: 0;
+      position: relative;
+    }
+    .aspect-ratio--16x9-ns { padding-bottom: 56.25%; }
+    .aspect-ratio--9x16-ns { padding-bottom: 177.77%; }
+    .aspect-ratio--4x3-ns {  padding-bottom: 75%; }
+    .aspect-ratio--3x4-ns {  padding-bottom: 133.33%; }
+    .aspect-ratio--6x4-ns {  padding-bottom: 66.6%; }
+    .aspect-ratio--4x6-ns {  padding-bottom: 150%; }
+    .aspect-ratio--8x5-ns {  padding-bottom: 62.5%; }
+    .aspect-ratio--5x8-ns {  padding-bottom: 160%; }
+    .aspect-ratio--7x5-ns {  padding-bottom: 71.42%; }
+    .aspect-ratio--5x7-ns {  padding-bottom: 140%; }
+    .aspect-ratio--1x1-ns {  padding-bottom: 100%; }
+    .aspect-ratio--object-ns {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 100;
+    }
+}
+
+@media #{$breakpoint-medium}{
+    .aspect-ratio-m {
+      height: 0;
+      position: relative;
+    }
+    .aspect-ratio--16x9-m { padding-bottom: 56.25%; }
+    .aspect-ratio--9x16-m { padding-bottom: 177.77%; }
+    .aspect-ratio--4x3-m {  padding-bottom: 75%; }
+    .aspect-ratio--3x4-m {  padding-bottom: 133.33%; }
+    .aspect-ratio--6x4-m {  padding-bottom: 66.6%; }
+    .aspect-ratio--4x6-m {  padding-bottom: 150%; }
+    .aspect-ratio--8x5-m {  padding-bottom: 62.5%; }
+    .aspect-ratio--5x8-m {  padding-bottom: 160%; }
+    .aspect-ratio--7x5-m {  padding-bottom: 71.42%; }
+    .aspect-ratio--5x7-m {  padding-bottom: 140%; }
+    .aspect-ratio--1x1-m {  padding-bottom: 100%; }
+    .aspect-ratio--object-m {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 100;
+    }
+}
+
+@media #{$breakpoint-large}{
+    .aspect-ratio-l {
+      height: 0;
+      position: relative;
+    }
+    .aspect-ratio--16x9-l { padding-bottom: 56.25%; }
+    .aspect-ratio--9x16-l { padding-bottom: 177.77%; }
+    .aspect-ratio--4x3-l {  padding-bottom: 75%; }
+    .aspect-ratio--3x4-l {  padding-bottom: 133.33%; }
+    .aspect-ratio--6x4-l {  padding-bottom: 66.6%; }
+    .aspect-ratio--4x6-l {  padding-bottom: 150%; }
+    .aspect-ratio--8x5-l {  padding-bottom: 62.5%; }
+    .aspect-ratio--5x8-l {  padding-bottom: 160%; }
+    .aspect-ratio--7x5-l {  padding-bottom: 71.42%; }
+    .aspect-ratio--5x7-l {  padding-bottom: 140%; }
+    .aspect-ratio--1x1-l {  padding-bottom: 100%; }
+    .aspect-ratio--object-l {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 100;
+    }
+}

data/app/assets/stylesheets/scss/_background-position.scss

@@ -0,0 +1,133 @@
+
+// Converted Variables
+
+
+// Custom Media Query Variables
+
+
+/*
+
+    BACKGROUND POSITION
+
+    Base:
+    bg = background
+
+    Modifiers:
+    -center = center center
+    -top = top center
+    -right = center right
+    -bottom = bottom center
+    -left = center left
+
+    Media Query Extensions:
+      -ns = not-small
+      -m  = medium
+      -l  = large
+
+ */
+
+.bg-center { 
+  background-repeat: no-repeat;
+  background-position: center center; 
+}
+
+.bg-top {    
+  background-repeat: no-repeat; 
+  background-position: top center;    
+}
+
+.bg-right {  
+  background-repeat: no-repeat; 
+  background-position: center right;  
+}
+
+.bg-bottom { 
+  background-repeat: no-repeat; 
+  background-position: bottom center; 
+}
+
+.bg-left {   
+  background-repeat: no-repeat; 
+  background-position: center left;   
+}
+
+@media #{$breakpoint-not-small} {
+  .bg-center-ns { 
+    background-repeat: no-repeat;
+    background-position: center center; 
+  }
+
+  .bg-top-ns {    
+    background-repeat: no-repeat; 
+    background-position: top center;    
+  }
+
+  .bg-right-ns {  
+    background-repeat: no-repeat; 
+    background-position: center right;  
+  }
+
+  .bg-bottom-ns { 
+    background-repeat: no-repeat; 
+    background-position: bottom center; 
+  }
+
+  .bg-left-ns {   
+    background-repeat: no-repeat; 
+    background-position: center left;   
+  }
+}
+
+@media #{$breakpoint-medium} {
+  .bg-center-m { 
+    background-repeat: no-repeat;
+    background-position: center center; 
+  }
+
+  .bg-top-m {    
+    background-repeat: no-repeat; 
+    background-position: top center;    
+  }
+
+  .bg-right-m {  
+    background-repeat: no-repeat; 
+    background-position: center right;  
+  }
+
+  .bg-bottom-m { 
+    background-repeat: no-repeat; 
+    background-position: bottom center; 
+  }
+
+  .bg-left-m {   
+    background-repeat: no-repeat; 
+    background-position: center left;   
+  }
+}
+
+@media #{$breakpoint-large} {
+  .bg-center-l { 
+    background-repeat: no-repeat;
+    background-position: center center; 
+  }
+
+  .bg-top-l {    
+    background-repeat: no-repeat; 
+    background-position: top center;    
+  }
+
+  .bg-right-l {  
+    background-repeat: no-repeat; 
+    background-position: center right;  
+  }
+
+  .bg-bottom-l { 
+    background-repeat: no-repeat; 
+    background-position: bottom center; 
+  }
+
+  .bg-left-l {   
+    background-repeat: no-repeat; 
+    background-position: center left;   
+  }
+}

data/app/assets/stylesheets/scss/_background-size.scss

@@ -0,0 +1,41 @@
+
+// Converted Variables
+
+
+// Custom Media Query Variables
+
+
+/*
+
+   BACKGROUND SIZE
+   Docs: http://tachyons.io/docs/themes/background-size/
+
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
+
+*/
+
+/*
+  Often used in combination with background image set as an inline style
+  on an html element.
+*/
+
+  .cover { background-size: cover!important; }
+  .contain { background-size: contain!important; }
+
+@media #{$breakpoint-not-small} {
+  .cover-ns { background-size: cover!important; }
+  .contain-ns { background-size: contain!important; }
+}
+
+@media #{$breakpoint-medium} {
+  .cover-m { background-size: cover!important; }
+  .contain-m { background-size: contain!important; }
+}
+
+@media #{$breakpoint-large} {
+  .cover-l { background-size: cover!important; }
+  .contain-l { background-size: contain!important; }
+}

data/app/assets/stylesheets/scss/_border-colors.scss

@@ -0,0 +1,93 @@
+
+// Converted Variables
+
+
+// Custom Media Query Variables
+
+
+/*
+
+   BORDER COLORS
+   Docs: http://tachyons.io/docs/themes/borders/
+
+   Border colors can be used to extend the base
+   border classes ba,bt,bb,br,bl found in the _borders.css file.
+
+   The base border class by default will set the color of the border
+   to that of the current text color. These classes are for the cases
+   where you desire for the text and border colors to be different.
+
+   Base:
+     b = border
+
+   Modifiers:
+   --color-name = each color variable name is also a border color name
+
+*/
+
+.b--black {        border-color: $black; }
+.b--near-black {   border-color: $near-black; }
+.b--dark-gray {    border-color: $dark-gray; }
+.b--mid-gray {     border-color: $mid-gray; }
+.b--gray {         border-color: $gray; }
+.b--silver {       border-color: $silver; }
+.b--light-silver { border-color: $light-silver; }
+.b--moon-gray {    border-color: $moon-gray; }
+.b--light-gray {   border-color: $light-gray; }
+.b--near-white {   border-color: $near-white; }
+.b--white {        border-color: $white; }
+
+.b--white-90 {   border-color: $white-90; }
+.b--white-80 {   border-color: $white-80; }
+.b--white-70 {   border-color: $white-70; }
+.b--white-60 {   border-color: $white-60; }
+.b--white-50 {   border-color: $white-50; }
+.b--white-40 {   border-color: $white-40; }
+.b--white-30 {   border-color: $white-30; }
+.b--white-20 {   border-color: $white-20; }
+.b--white-10 {   border-color: $white-10; }
+.b--white-05 {   border-color: $white-05; }
+.b--white-025 {   border-color: $white-025; }
+.b--white-0125 {   border-color: $white-0125; }
+
+.b--black-90 {   border-color: $black-90; }
+.b--black-80 {   border-color: $black-80; }
+.b--black-70 {   border-color: $black-70; }
+.b--black-60 {   border-color: $black-60; }
+.b--black-50 {   border-color: $black-50; }
+.b--black-40 {   border-color: $black-40; }
+.b--black-30 {   border-color: $black-30; }
+.b--black-20 {   border-color: $black-20; }
+.b--black-10 {   border-color: $black-10; }
+.b--black-05 {   border-color: $black-05; }
+.b--black-025 {   border-color: $black-025; }
+.b--black-0125 {   border-color: $black-0125; }
+
+.b--dark-red { border-color: $dark-red; }
+.b--red { border-color: $red; }
+.b--light-red { border-color: $light-red; }
+.b--orange { border-color: $orange; }
+.b--gold { border-color: $gold; }
+.b--yellow { border-color: $yellow; }
+.b--light-yellow { border-color: $light-yellow; }
+.b--purple { border-color: $purple; }
+.b--light-purple { border-color: $light-purple; }
+.b--dark-pink { border-color: $dark-pink; }
+.b--hot-pink { border-color: $hot-pink; }
+.b--pink { border-color: $pink; }
+.b--light-pink { border-color: $light-pink; }
+.b--dark-green { border-color: $dark-green; }
+.b--green { border-color: $green; }
+.b--light-green { border-color: $light-green; }
+.b--navy { border-color: $navy; }
+.b--dark-blue { border-color: $dark-blue; }
+.b--blue { border-color: $blue; }
+.b--light-blue { border-color: $light-blue; }
+.b--lightest-blue { border-color: $lightest-blue; }
+.b--washed-blue { border-color: $washed-blue; }
+.b--washed-green { border-color: $washed-green; }
+.b--washed-yellow { border-color: $washed-yellow; }
+.b--washed-red { border-color: $washed-red; }
+
+.b--transparent { border-color: $transparent; }
+.b--inherit { border-color: inherit; }

data/app/assets/stylesheets/scss/_border-radius.scss

@@ -0,0 +1,134 @@
+
+// Converted Variables
+
+
+// Custom Media Query Variables
+
+
+/*
+
+   BORDER RADIUS
+   Docs: http://tachyons.io/docs/themes/border-radius/
+
+   Base:
+     br   = border-radius
+
+   Modifiers:
+     0    = 0/none
+     1    = 1st step in scale
+     2    = 2nd step in scale
+     3    = 3rd step in scale
+     4    = 4th step in scale
+
+   Literal values:
+     -100 = 100%
+     -pill = 9999px
+
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
+
+*/
+
+  .br0 {        border-radius: $border-radius-none }
+  .br1 {        border-radius: $border-radius-1; }
+  .br2 {        border-radius: $border-radius-2; }
+  .br3 {        border-radius: $border-radius-3; }
+  .br4 {        border-radius: $border-radius-4; }
+  .br-100 {     border-radius: $border-radius-circle; }
+  .br-pill {    border-radius: $border-radius-pill; }
+  .br--bottom {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+  }
+  .br--top {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+  }
+  .br--right {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+  }
+  .br--left {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+  }
+
+@media #{$breakpoint-not-small} {
+  .br0-ns {     border-radius: $border-radius-none }
+  .br1-ns {     border-radius: $border-radius-1; }
+  .br2-ns {     border-radius: $border-radius-2; }
+  .br3-ns {     border-radius: $border-radius-3; }
+  .br4-ns {     border-radius: $border-radius-4; }
+  .br-100-ns {  border-radius: $border-radius-circle; }
+  .br-pill-ns { border-radius: $border-radius-pill; }
+  .br--bottom-ns {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+  }
+  .br--top-ns {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+  }
+  .br--right-ns {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+  }
+  .br--left-ns {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+  }
+}
+
+@media #{$breakpoint-medium} {
+  .br0-m {     border-radius: $border-radius-none }
+  .br1-m {     border-radius: $border-radius-1; }
+  .br2-m {     border-radius: $border-radius-2; }
+  .br3-m {     border-radius: $border-radius-3; }
+  .br4-m {     border-radius: $border-radius-4; }
+  .br-100-m {  border-radius: $border-radius-circle; }
+  .br-pill-m { border-radius: $border-radius-pill; }
+  .br--bottom-m {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+  }
+  .br--top-m {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+  }
+  .br--right-m {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+  }
+  .br--left-m {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+  }
+}
+
+@media #{$breakpoint-large} {
+  .br0-l {     border-radius: $border-radius-none }
+  .br1-l {     border-radius: $border-radius-1; }
+  .br2-l {     border-radius: $border-radius-2; }
+  .br3-l {     border-radius: $border-radius-3; }
+  .br4-l {     border-radius: $border-radius-4; }
+  .br-100-l {  border-radius: $border-radius-circle; }
+  .br-pill-l { border-radius: $border-radius-pill; }
+  .br--bottom-l {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+  }
+  .br--top-l {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+  }
+  .br--right-l {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+  }
+  .br--left-l {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+  }
+}