├── .gitignore ├── Gemfile ├── LICENSE.txt ├── README.md ├── Rakefile ├── app └── assets │ └── stylesheets │ └── basscss │ ├── _align.scss │ ├── _all.scss │ ├── _background-colors.scss │ ├── _background-images.scss │ ├── _border-colors.scss │ ├── _border.scss │ ├── _btn-outline.scss │ ├── _btn-primary.scss │ ├── _btn.scss │ ├── _colors.scss │ ├── _darken.scss │ ├── _flexbox.scss │ ├── _forms.scss │ ├── _grid.scss │ ├── _hide.scss │ ├── _highlight-dark.scss │ ├── _highlight.scss │ ├── _input-range.scss │ ├── _layout.scss │ ├── _lighten.scss │ ├── _margin.scss │ ├── _media-object.scss │ ├── _padding.scss │ ├── _position.scss │ ├── _progress.scss │ ├── _responsive-margin.scss │ ├── _responsive-padding.scss │ ├── _type-scale.scss │ ├── _typography.scss │ ├── basscss-addons.scss │ └── basscss.scss ├── basscss-rails.gemspec └── lib └── basscss ├── rails.rb └── rails ├── engine.rb └── version.rb /.gitignore: -------------------------------------------------------------------------------- 1 | *.gem 2 | *.rbc 3 | .bundle 4 | .config 5 | .yardoc 6 | Gemfile.lock 7 | InstalledFiles 8 | _yardoc 9 | coverage 10 | doc/ 11 | lib/bundler/man 12 | pkg 13 | rdoc 14 | spec/reports 15 | test/tmp 16 | test/version_tmp 17 | tmp 18 | *.bundle 19 | *.so 20 | *.o 21 | *.a 22 | mkmf.log 23 | 24 | node_modules 25 | -------------------------------------------------------------------------------- /Gemfile: -------------------------------------------------------------------------------- 1 | source 'https://rubygems.org' 2 | 3 | # Specify your gem's dependencies in basscss.gemspec 4 | gemspec 5 | -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | Copyright (c) 2014-2015 Brent Jackson, John Otander 2 | 3 | MIT License 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining 6 | a copy of this software and associated documentation files (the 7 | "Software"), to deal in the Software without restriction, including 8 | without limitation the rights to use, copy, modify, merge, publish, 9 | distribute, sublicense, and/or sell copies of the Software, and to 10 | permit persons to whom the Software is furnished to do so, subject to 11 | the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be 14 | included in all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 19 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 20 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 21 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 22 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # BASSCSS for Rails 2 | 3 | Include BASSCSS, the next-level CSS toolkit, in your Rails apps through the assets pipeline. 4 | 5 | Repackaged from by Brent Jackson. 6 | 7 | ## Installation 8 | 9 | Add this line to your application's Gemfile: 10 | 11 | ```ruby 12 | gem 'basscss-rails' 13 | ``` 14 | 15 | And then execute: 16 | 17 | $ bundle 18 | 19 | Or install it yourself as: 20 | 21 | $ gem install basscss-rails 22 | 23 | ##### Using Sass 24 | 25 | You will then need to require the stylesheet in your application.scss: 26 | 27 | ```scss 28 | @import "basscss/basscss"; 29 | ``` 30 | 31 | ##### Using CSS 32 | 33 | Or, in your application.css: 34 | 35 | ```css 36 | *= require basscss/basscss 37 | ``` 38 | 39 | ##### Using the [Basscss addons](https://github.com/basscss/addons) 40 | 41 | You will need to import the `basscss-addons` file, too: 42 | 43 | ###### Sass 44 | 45 | ```scss 46 | @import "basscss/basscss-addons"; 47 | ``` 48 | 49 | ###### CSS 50 | 51 | Or, in your application.css: 52 | 53 | ```css 54 | *= require basscss/basscss-addons 55 | ``` 56 | 57 | ## Usage 58 | 59 | Further documentation can be found on the BASSCSS website: 60 | 61 | ## Contributing 62 | 63 | 1. Fork it ( https://github.com/johnotander/basscss/fork ) 64 | 2. Create your feature branch (`git checkout -b my-new-feature`) 65 | 3. Commit your changes (`git commit -am 'Add some feature'`) 66 | 4. Push to the branch (`git push origin my-new-feature`) 67 | 5. Create a new Pull Request 68 | 69 | ## Acknowledgements 70 | 71 | * The CSS toolkit is written by Brent Jackson: 72 | 73 | More documentation available at . 74 | -------------------------------------------------------------------------------- /Rakefile: -------------------------------------------------------------------------------- 1 | require 'bundler/gem_tasks' 2 | require 'fileutils' 3 | 4 | task :download do 5 | puts 'Updating basscss files' 6 | system 'npm i --save basscss-sass --prefix ./' 7 | end 8 | 9 | task :copy do 10 | puts 'Installing basscss files' 11 | FileUtils.remove_dir 'app/assets/stylesheets/basscss', :force 12 | FileUtils.mkdir 'app/assets/stylesheets/basscss' 13 | FileUtils.cp_r Dir.glob('node_modules/basscss-sass/scss/*.scss'), 'app/assets/stylesheets/basscss/' 14 | end 15 | 16 | task :update => [:download, :copy] 17 | -------------------------------------------------------------------------------- /app/assets/stylesheets/basscss/_align.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* Basscss Align */ 9 | 10 | .align-baseline { vertical-align: baseline } 11 | 12 | .align-top { vertical-align: top } 13 | 14 | .align-middle { vertical-align: middle } 15 | 16 | .align-bottom { vertical-align: bottom } -------------------------------------------------------------------------------- /app/assets/stylesheets/basscss/_all.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* Basscss All */ 9 | 10 | .all-initial { all: initial } 11 | 12 | .all-unset { all: unset } 13 | 14 | .all-inherit { all: inherit } -------------------------------------------------------------------------------- /app/assets/stylesheets/basscss/_background-colors.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | $aqua: #7fdbff !default; 5 | $blue: #0074d9 !default; 6 | $navy: #001f3f !default; 7 | $teal: #39cccc !default; 8 | $green: #2ecc40 !default; 9 | $olive: #3d9970 !default; 10 | $lime: #01ff70 !default; 11 | $yellow: #ffdc00 !default; 12 | $orange: #ff851b !default; 13 | $red: #ff4136 !default; 14 | $fuchsia: #f012be !default; 15 | $purple: #b10dc9 !default; 16 | $maroon: #85144b !default; 17 | $white: #fff !default; 18 | $silver: #ddd !default; 19 | $gray: #aaa !default; 20 | $black: #111 !default; 21 | 22 | // Custom Media Query Variables 23 | 24 | 25 | /* Basscss Background Colors */ 26 | 27 | /* 28 | 29 | COLOR VARIABLES 30 | 31 | - Cool 32 | - Warm 33 | - Gray Scale 34 | 35 | */ 36 | 37 | .bg-black { background-color: $black } 38 | 39 | .bg-gray { background-color: $gray } 40 | 41 | .bg-silver { background-color: $silver } 42 | 43 | .bg-white { background-color: $white } 44 | 45 | .bg-aqua { background-color: $aqua } 46 | 47 | .bg-blue { background-color: $blue } 48 | 49 | .bg-navy { background-color: $navy } 50 | 51 | .bg-teal { background-color: $teal } 52 | 53 | .bg-green { background-color: $green } 54 | 55 | .bg-olive { background-color: $olive } 56 | 57 | .bg-lime { background-color: $lime } 58 | 59 | .bg-yellow { background-color: $yellow } 60 | 61 | .bg-orange { background-color: $orange } 62 | 63 | .bg-red { background-color: $red } 64 | 65 | .bg-fuchsia { background-color: $fuchsia } 66 | 67 | .bg-purple { background-color: $purple } 68 | 69 | .bg-maroon { background-color: $maroon } -------------------------------------------------------------------------------- /app/assets/stylesheets/basscss/_background-images.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* Basscss Background Images */ 9 | 10 | .bg-cover { background-size: cover } 11 | 12 | .bg-contain { background-size: contain } 13 | 14 | .bg-center { background-position: center } 15 | 16 | .bg-top { background-position: top } 17 | 18 | .bg-right { background-position: right } 19 | 20 | .bg-bottom { background-position: bottom } 21 | 22 | .bg-left { background-position: left } -------------------------------------------------------------------------------- /app/assets/stylesheets/basscss/_border-colors.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | $aqua: #7fdbff !default; 5 | $blue: #0074d9 !default; 6 | $navy: #001f3f !default; 7 | $teal: #39cccc !default; 8 | $green: #2ecc40 !default; 9 | $olive: #3d9970 !default; 10 | $lime: #01ff70 !default; 11 | $yellow: #ffdc00 !default; 12 | $orange: #ff851b !default; 13 | $red: #ff4136 !default; 14 | $fuchsia: #f012be !default; 15 | $purple: #b10dc9 !default; 16 | $maroon: #85144b !default; 17 | $white: #fff !default; 18 | $silver: #ddd !default; 19 | $gray: #aaa !default; 20 | $black: #111 !default; 21 | 22 | // Custom Media Query Variables 23 | 24 | 25 | /* Basscss Border Colors */ 26 | 27 | /* 28 | 29 | COLOR VARIABLES 30 | 31 | - Cool 32 | - Warm 33 | - Gray Scale 34 | 35 | */ 36 | 37 | .border-black { border-color: $black } 38 | 39 | .border-gray { border-color: $gray } 40 | 41 | .border-silver { border-color: $silver } 42 | 43 | .border-white { border-color: $white } 44 | 45 | .border-aqua { border-color: $aqua } 46 | 47 | .border-blue { border-color: $blue } 48 | 49 | .border-navy { border-color: $navy } 50 | 51 | .border-teal { border-color: $teal } 52 | 53 | .border-green { border-color: $green } 54 | 55 | .border-olive { border-color: $olive } 56 | 57 | .border-lime { border-color: $lime } 58 | 59 | .border-yellow { border-color: $yellow } 60 | 61 | .border-orange { border-color: $orange } 62 | 63 | .border-red { border-color: $red } 64 | 65 | .border-fuchsia { border-color: $fuchsia } 66 | 67 | .border-purple { border-color: $purple } 68 | 69 | .border-maroon { border-color: $maroon } -------------------------------------------------------------------------------- /app/assets/stylesheets/basscss/_border.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | $border-width: 1px !default; 5 | $border-radius: 3px !default; 6 | 7 | // Custom Media Query Variables 8 | 9 | 10 | /* Basscss Border */ 11 | 12 | .border { 13 | border-style: solid; 14 | border-width: $border-width; 15 | } 16 | 17 | .border-top { 18 | border-top-style: solid; 19 | border-top-width: $border-width; 20 | } 21 | 22 | .border-right { 23 | border-right-style: solid; 24 | border-right-width: $border-width; 25 | } 26 | 27 | .border-bottom { 28 | border-bottom-style: solid; 29 | border-bottom-width: $border-width; 30 | } 31 | 32 | .border-left { 33 | border-left-style: solid; 34 | border-left-width: $border-width; 35 | } 36 | 37 | .border-none { border: 0 } 38 | 39 | .rounded { border-radius: $border-radius } 40 | 41 | .circle { border-radius: 50% } 42 | 43 | .rounded-top { border-radius: $border-radius $border-radius 0 0 } 44 | 45 | .rounded-right { border-radius: 0 $border-radius $border-radius 0 } 46 | 47 | .rounded-bottom { border-radius: 0 0 $border-radius $border-radius } 48 | 49 | .rounded-left { border-radius: $border-radius 0 0 $border-radius } 50 | 51 | .not-rounded { border-radius: 0 } -------------------------------------------------------------------------------- /app/assets/stylesheets/basscss/_btn-outline.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | $border-radius: 3px !default; 5 | $darken-1: rgba(0, 0, 0, .0625) !default; 6 | $darken-2: rgba(0, 0, 0, .125) !default; 7 | $darken-3: rgba(0, 0, 0, .25) !default; 8 | 9 | // Custom Media Query Variables 10 | 11 | 12 | /* Basscss Btn Outline */ 13 | 14 | .btn-outline, 15 | .btn-outline:hover { 16 | border-color: currentcolor; 17 | } 18 | 19 | .btn-outline { 20 | border-radius: $border-radius; 21 | } 22 | 23 | .btn-outline:hover { 24 | box-shadow: inset 0 0 0 20rem $darken-1; 25 | } 26 | 27 | .btn-outline:active { 28 | box-shadow: inset 0 0 0 20rem $darken-2, 29 | inset 0 3px 4px 0 $darken-3, 30 | 0 0 1px $darken-2; 31 | } 32 | 33 | .btn-outline:disabled, 34 | .btn-outline.is-disabled { 35 | opacity: .5; 36 | } -------------------------------------------------------------------------------- /app/assets/stylesheets/basscss/_btn-primary.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | $blue: #0074d9 !default; 5 | $button-color: #fff !default; 6 | $button-background-color: $blue !default; 7 | $border-radius: 3px !default; 8 | $darken-1: rgba(0, 0, 0, .0625) !default; 9 | $darken-2: rgba(0, 0, 0, .125) !default; 10 | $darken-3: rgba(0, 0, 0, .25) !default; 11 | 12 | // Custom Media Query Variables 13 | 14 | 15 | /* Basscss Btn Primary */ 16 | 17 | .btn-primary { 18 | color: $button-color; 19 | background-color: $button-background-color; 20 | border-radius: $border-radius; 21 | } 22 | 23 | .btn-primary:hover { 24 | box-shadow: inset 0 0 0 20rem $darken-1; 25 | } 26 | 27 | .btn-primary:active { 28 | box-shadow: inset 0 0 0 20rem $darken-2, 29 | inset 0 3px 4px 0 $darken-3, 30 | 0 0 1px $darken-2; 31 | } 32 | 33 | .btn-primary:disabled, 34 | .btn-primary.is-disabled { 35 | opacity: .5; 36 | } -------------------------------------------------------------------------------- /app/assets/stylesheets/basscss/_btn.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | $border-width: 1px !default; 5 | $bold-font-weight: bold !default; 6 | $button-font-family: inherit !default; 7 | $button-font-size: inherit !default; 8 | $button-font-weight: $bold-font-weight !default; 9 | $button-line-height: 1.125rem !default; 10 | $button-padding-y: .5rem !default; 11 | $button-padding-x: 1rem !default; 12 | $darken-2: rgba(0, 0, 0, .125) !default; 13 | $darken-3: rgba(0, 0, 0, .25) !default; 14 | 15 | // Custom Media Query Variables 16 | 17 | 18 | /* Basscss Btn */ 19 | 20 | .btn { 21 | font-family: $button-font-family; 22 | font-size: $button-font-size; 23 | font-weight: $button-font-weight; 24 | text-decoration: none; 25 | cursor: pointer; 26 | display: inline-block; 27 | line-height: $button-line-height; 28 | padding: $button-padding-y $button-padding-x; 29 | margin: 0; 30 | height: auto; 31 | border: $border-width solid transparent; 32 | vertical-align: middle; 33 | -webkit-appearance: none; 34 | color: inherit; 35 | background-color: transparent; 36 | } 37 | 38 | .btn:hover { 39 | text-decoration: none; 40 | } 41 | 42 | .btn:focus { 43 | outline: none; 44 | border-color: $darken-2; 45 | box-shadow: 0 0 0 3px $darken-3; 46 | } 47 | 48 | ::-moz-focus-inner { 49 | border: 0; 50 | padding: 0; 51 | } -------------------------------------------------------------------------------- /app/assets/stylesheets/basscss/_colors.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | $aqua: #7fdbff !default; 5 | $blue: #0074d9 !default; 6 | $navy: #001f3f !default; 7 | $teal: #39cccc !default; 8 | $green: #2ecc40 !default; 9 | $olive: #3d9970 !default; 10 | $lime: #01ff70 !default; 11 | $yellow: #ffdc00 !default; 12 | $orange: #ff851b !default; 13 | $red: #ff4136 !default; 14 | $fuchsia: #f012be !default; 15 | $purple: #b10dc9 !default; 16 | $maroon: #85144b !default; 17 | $white: #fff !default; 18 | $silver: #ddd !default; 19 | $gray: #aaa !default; 20 | $black: #111 !default; 21 | 22 | // Custom Media Query Variables 23 | 24 | 25 | /* Basscss Colors */ 26 | 27 | /* 28 | 29 | COLOR VARIABLES 30 | 31 | - Cool 32 | - Warm 33 | - Gray Scale 34 | 35 | */ 36 | 37 | .black { color: $black } 38 | 39 | .gray { color: $gray } 40 | 41 | .silver { color: $silver } 42 | 43 | .white { color: $white } 44 | 45 | .aqua { color: $aqua } 46 | 47 | .blue { color: $blue } 48 | 49 | .navy { color: $navy } 50 | 51 | .teal { color: $teal } 52 | 53 | .green { color: $green } 54 | 55 | .olive { color: $olive } 56 | 57 | .lime { color: $lime } 58 | 59 | .yellow { color: $yellow } 60 | 61 | .orange { color: $orange } 62 | 63 | .red { color: $red } 64 | 65 | .fuchsia { color: $fuchsia } 66 | 67 | .purple { color: $purple } 68 | 69 | .maroon { color: $maroon } 70 | 71 | .color-inherit { color: inherit } 72 | 73 | .muted { opacity: .5 } -------------------------------------------------------------------------------- /app/assets/stylesheets/basscss/_darken.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | $darken-1: rgba(0, 0, 0, .0625) !default; 5 | $darken-2: rgba(0, 0, 0, .125) !default; 6 | $darken-3: rgba(0, 0, 0, .25) !default; 7 | $darken-4: rgba(0, 0, 0, .5) !default; 8 | 9 | // Custom Media Query Variables 10 | 11 | 12 | /* Basscss Darken */ 13 | 14 | .bg-darken-1 { background-color: $darken-1 } 15 | 16 | .bg-darken-2 { background-color: $darken-2 } 17 | 18 | .bg-darken-3 { background-color: $darken-3 } 19 | 20 | .bg-darken-4 { background-color: $darken-4 } -------------------------------------------------------------------------------- /app/assets/stylesheets/basscss/_flexbox.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | $breakpoint-sm: '(min-width: 40em)' !default; 8 | $breakpoint-md: '(min-width: 52em)' !default; 9 | $breakpoint-lg: '(min-width: 64em)' !default; 10 | 11 | 12 | .flex { display: flex } 13 | 14 | @media #{$breakpoint-sm} { 15 | .sm-flex { display: flex } 16 | } 17 | 18 | @media #{$breakpoint-md} { 19 | .md-flex { display: flex } 20 | } 21 | 22 | @media #{$breakpoint-lg} { 23 | .lg-flex { display: flex } 24 | } 25 | 26 | .flex-column { flex-direction: column } 27 | 28 | .flex-wrap { flex-wrap: wrap } 29 | 30 | .items-start { align-items: flex-start } 31 | 32 | .items-end { align-items: flex-end } 33 | 34 | .items-center { align-items: center } 35 | 36 | .items-baseline { align-items: baseline } 37 | 38 | .items-stretch { align-items: stretch } 39 | 40 | .self-start { align-self: flex-start } 41 | 42 | .self-end { align-self: flex-end } 43 | 44 | .self-center { align-self: center } 45 | 46 | .self-baseline { align-self: baseline } 47 | 48 | .self-stretch { align-self: stretch } 49 | 50 | .justify-start { justify-content: flex-start } 51 | 52 | .justify-end { justify-content: flex-end } 53 | 54 | .justify-center { justify-content: center } 55 | 56 | .justify-between { justify-content: space-between } 57 | 58 | .justify-around { justify-content: space-around } 59 | 60 | .content-start { align-content: flex-start } 61 | 62 | .content-end { align-content: flex-end } 63 | 64 | .content-center { align-content: center } 65 | 66 | .content-between { align-content: space-between } 67 | 68 | .content-around { align-content: space-around } 69 | 70 | .content-stretch { align-content: stretch } 71 | 72 | /* 1. Fix for Chrome 44 bug. https://code.google.com/p/chromium/issues/detail?id=506893 */ 73 | 74 | .flex-auto { 75 | flex: 1 1 auto; 76 | min-width: 0; /* 1 */ 77 | min-height: 0; /* 1 */ 78 | } 79 | 80 | .flex-none { flex: none } 81 | 82 | .order-0 { order: 0 } 83 | 84 | .order-1 { order: 1 } 85 | 86 | .order-2 { order: 2 } 87 | 88 | .order-3 { order: 3 } 89 | 90 | .order-last { order: 99999 } -------------------------------------------------------------------------------- /app/assets/stylesheets/basscss/_forms.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* Basscss Forms */ 9 | 10 | .label { 11 | font-size: .875rem; 12 | font-weight: bold; 13 | display: block; 14 | margin-bottom: .5rem; 15 | } 16 | 17 | .input { 18 | font-family: inherit; 19 | font-size: inherit; 20 | display: block; 21 | width: 100%; 22 | height: 2.5rem; 23 | padding: .5rem; 24 | margin-bottom: 1rem; 25 | border: 1px solid #ccc; 26 | border-radius: 3px; 27 | } 28 | 29 | .select { 30 | font-family: inherit; 31 | font-size: inherit; 32 | display: block; 33 | width: 100%; 34 | height: 2.5rem; 35 | padding: .5rem; 36 | margin-bottom: 1rem; 37 | border: 1px solid #ccc; 38 | border-radius: 3px; 39 | } 40 | 41 | .textarea { 42 | font-family: inherit; 43 | font-size: inherit; 44 | display: block; 45 | width: 100%; 46 | padding: .5rem; 47 | margin-bottom: 1rem; 48 | border: 1px solid #ccc; 49 | border-radius: 3px; 50 | } -------------------------------------------------------------------------------- /app/assets/stylesheets/basscss/_grid.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | $breakpoint-sm: '(min-width: 40em)' !default; 8 | $breakpoint-md: '(min-width: 52em)' !default; 9 | $breakpoint-lg: '(min-width: 64em)' !default; 10 | 11 | /* Basscss Grid */ 12 | 13 | .col { 14 | float: left; 15 | box-sizing: border-box; 16 | } 17 | 18 | .col-right { 19 | float: right; 20 | box-sizing: border-box; 21 | } 22 | 23 | .col-1 { 24 | width: (1/12 * 100%); 25 | } 26 | 27 | .col-2 { 28 | width: (2/12 * 100%); 29 | } 30 | 31 | .col-3 { 32 | width: (3/12 * 100%); 33 | } 34 | 35 | .col-4 { 36 | width: (4/12 * 100%); 37 | } 38 | 39 | .col-5 { 40 | width: (5/12 * 100%); 41 | } 42 | 43 | .col-6 { 44 | width: (6/12 * 100%); 45 | } 46 | 47 | .col-7 { 48 | width: (7/12 * 100%); 49 | } 50 | 51 | .col-8 { 52 | width: (8/12 * 100%); 53 | } 54 | 55 | .col-9 { 56 | width: (9/12 * 100%); 57 | } 58 | 59 | .col-10 { 60 | width: (10/12 * 100%); 61 | } 62 | 63 | .col-11 { 64 | width: (11/12 * 100%); 65 | } 66 | 67 | .col-12 { 68 | width: 100%; 69 | } 70 | 71 | @media #{$breakpoint-sm} { 72 | 73 | .sm-col { 74 | float: left; 75 | box-sizing: border-box; 76 | } 77 | 78 | .sm-col-right { 79 | float: right; 80 | box-sizing: border-box; 81 | } 82 | 83 | .sm-col-1 { 84 | width: (1/12 * 100%); 85 | } 86 | 87 | .sm-col-2 { 88 | width: (2/12 * 100%); 89 | } 90 | 91 | .sm-col-3 { 92 | width: (3/12 * 100%); 93 | } 94 | 95 | .sm-col-4 { 96 | width: (4/12 * 100%); 97 | } 98 | 99 | .sm-col-5 { 100 | width: (5/12 * 100%); 101 | } 102 | 103 | .sm-col-6 { 104 | width: (6/12 * 100%); 105 | } 106 | 107 | .sm-col-7 { 108 | width: (7/12 * 100%); 109 | } 110 | 111 | .sm-col-8 { 112 | width: (8/12 * 100%); 113 | } 114 | 115 | .sm-col-9 { 116 | width: (9/12 * 100%); 117 | } 118 | 119 | .sm-col-10 { 120 | width: (10/12 * 100%); 121 | } 122 | 123 | .sm-col-11 { 124 | width: (11/12 * 100%); 125 | } 126 | 127 | .sm-col-12 { 128 | width: 100%; 129 | } 130 | 131 | } 132 | 133 | @media #{$breakpoint-md} { 134 | 135 | .md-col { 136 | float: left; 137 | box-sizing: border-box; 138 | } 139 | 140 | .md-col-right { 141 | float: right; 142 | box-sizing: border-box; 143 | } 144 | 145 | .md-col-1 { 146 | width: (1/12 * 100%); 147 | } 148 | 149 | .md-col-2 { 150 | width: (2/12 * 100%); 151 | } 152 | 153 | .md-col-3 { 154 | width: (3/12 * 100%); 155 | } 156 | 157 | .md-col-4 { 158 | width: (4/12 * 100%); 159 | } 160 | 161 | .md-col-5 { 162 | width: (5/12 * 100%); 163 | } 164 | 165 | .md-col-6 { 166 | width: (6/12 * 100%); 167 | } 168 | 169 | .md-col-7 { 170 | width: (7/12 * 100%); 171 | } 172 | 173 | .md-col-8 { 174 | width: (8/12 * 100%); 175 | } 176 | 177 | .md-col-9 { 178 | width: (9/12 * 100%); 179 | } 180 | 181 | .md-col-10 { 182 | width: (10/12 * 100%); 183 | } 184 | 185 | .md-col-11 { 186 | width: (11/12 * 100%); 187 | } 188 | 189 | .md-col-12 { 190 | width: 100%; 191 | } 192 | 193 | } 194 | 195 | @media #{$breakpoint-lg} { 196 | 197 | .lg-col { 198 | float: left; 199 | box-sizing: border-box; 200 | } 201 | 202 | .lg-col-right { 203 | float: right; 204 | box-sizing: border-box; 205 | } 206 | 207 | .lg-col-1 { 208 | width: (1/12 * 100%); 209 | } 210 | 211 | .lg-col-2 { 212 | width: (2/12 * 100%); 213 | } 214 | 215 | .lg-col-3 { 216 | width: (3/12 * 100%); 217 | } 218 | 219 | .lg-col-4 { 220 | width: (4/12 * 100%); 221 | } 222 | 223 | .lg-col-5 { 224 | width: (5/12 * 100%); 225 | } 226 | 227 | .lg-col-6 { 228 | width: (6/12 * 100%); 229 | } 230 | 231 | .lg-col-7 { 232 | width: (7/12 * 100%); 233 | } 234 | 235 | .lg-col-8 { 236 | width: (8/12 * 100%); 237 | } 238 | 239 | .lg-col-9 { 240 | width: (9/12 * 100%); 241 | } 242 | 243 | .lg-col-10 { 244 | width: (10/12 * 100%); 245 | } 246 | 247 | .lg-col-11 { 248 | width: (11/12 * 100%); 249 | } 250 | 251 | .lg-col-12 { 252 | width: 100%; 253 | } 254 | 255 | } -------------------------------------------------------------------------------- /app/assets/stylesheets/basscss/_hide.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | $breakpoint-xs: '(max-width: 40em)' !default; 8 | $breakpoint-sm-md: '(min-width: 40em) and (max-width: 52em)' !default; 9 | $breakpoint-md-lg: '(min-width: 52em) and (max-width: 64em)' !default; 10 | $breakpoint-lg: '(min-width: 64em)' !default; 11 | 12 | /* Basscss Hide */ 13 | 14 | .hide { 15 | position: absolute !important; 16 | height: 1px; 17 | width: 1px; 18 | overflow: hidden; 19 | clip: rect(1px, 1px, 1px, 1px); 20 | } 21 | 22 | @media #{$breakpoint-xs} { 23 | .xs-hide { display: none !important } 24 | } 25 | 26 | @media #{$breakpoint-sm-md} { 27 | .sm-hide { display: none !important } 28 | } 29 | 30 | @media #{$breakpoint-md-lg} { 31 | .md-hide { display: none !important } 32 | } 33 | 34 | @media #{$breakpoint-lg} { 35 | .lg-hide { display: none !important } 36 | } 37 | 38 | .display-none { display: none !important } -------------------------------------------------------------------------------- /app/assets/stylesheets/basscss/_highlight-dark.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | $aqua: #7fdbff !default; 5 | $blue: #0074d9 !default; 6 | $navy: #001f3f !default; 7 | $teal: #39cccc !default; 8 | $green: #2ecc40 !default; 9 | $olive: #3d9970 !default; 10 | $lime: #01ff70 !default; 11 | $yellow: #ffdc00 !default; 12 | $orange: #ff851b !default; 13 | $red: #ff4136 !default; 14 | $fuchsia: #f012be !default; 15 | $purple: #b10dc9 !default; 16 | $maroon: #85144b !default; 17 | $white: #fff !default; 18 | $silver: #ddd !default; 19 | $gray: #aaa !default; 20 | $black: #111 !default; 21 | $hljs-comment: $silver !default; 22 | $hljs-keyword: white !default; 23 | $hljs-number: $lime !default; 24 | $hljs-string: $red !default; 25 | $hljs-title: $red !default; 26 | $hljs-type: $aqua !default; 27 | $hljs-tag: $aqua !default; 28 | $hljs-attribute: $lime !default; 29 | $hljs-regexp: $lime !default; 30 | $hljs-symbol: $fuchsia !default; 31 | $hljs-built-in: $aqua !default; 32 | $hljs-preprocessor: $silver !default; 33 | $hljs-deletion: $fuchsia !default; 34 | $hljs-addition: $lime !default; 35 | $hljs-change: $aqua !default; 36 | $hljs-chunk: $gray !default; 37 | 38 | // Custom Media Query Variables 39 | 40 | 41 | /* Basscss Highlight */ 42 | 43 | /* 44 | 45 | COLOR VARIABLES 46 | 47 | - Cool 48 | - Warm 49 | - Gray Scale 50 | 51 | */ 52 | 53 | .highlight-dark .hljs { 54 | color: white; 55 | -webkit-text-size-adjust: none; 56 | } 57 | 58 | .highlight-dark .hljs-comment, 59 | .highlight-dark .diff .hljs-header, 60 | .highlight-dark .hljs-javadoc { 61 | color: $hljs-comment; 62 | font-style: italic; 63 | } 64 | 65 | .highlight-dark .hljs-keyword, 66 | .highlight-dark .css .rule .hljs-keyword, 67 | .highlight-dark .hljs-winutils, 68 | .highlight-dark .nginx .hljs-title, 69 | .highlight-dark .hljs-subst, 70 | .highlight-dark .hljs-request, 71 | .highlight-dark .hljs-status { 72 | color: $hljs-keyword; 73 | font-weight: bold; 74 | } 75 | 76 | .highlight-dark .hljs-number, 77 | .highlight-dark .hljs-hexcolor, 78 | .highlight-dark .ruby .hljs-constant { 79 | color: $hljs-number; 80 | } 81 | 82 | .highlight-dark .hljs-string, 83 | .highlight-dark .hljs-tag .hljs-value, 84 | .highlight-dark .hljs-phpdoc, 85 | .highlight-dark .hljs-dartdoc, 86 | .highlight-dark .tex .hljs-formula { 87 | color: $hljs-string; 88 | } 89 | 90 | .hljs-title, 91 | .hljs-id, 92 | .scss .hljs-preprocessor { 93 | color: $hljs-title; 94 | font-weight: bold; 95 | } 96 | 97 | .highlight-dark .hljs-list .hljs-keyword, 98 | .highlight-dark .hljs-subst { 99 | font-weight: normal; 100 | } 101 | 102 | .highlight-dark .hljs-class .hljs-title, 103 | .highlight-dark .hljs-type, 104 | .highlight-dark .vhdl .hljs-literal, 105 | .highlight-dark .tex .hljs-command { 106 | color: $hljs-type; 107 | font-weight: bold; 108 | } 109 | 110 | .highlight-dark .hljs-tag, 111 | .highlight-dark .hljs-tag .hljs-title, 112 | .highlight-dark .hljs-rules .hljs-property, 113 | .highlight-dark .django .hljs-tag .hljs-keyword { 114 | color: $hljs-tag; 115 | font-weight: normal; 116 | } 117 | 118 | .highlight-dark .hljs-attribute, 119 | .highlight-dark .hljs-variable, 120 | .highlight-dark .lisp .hljs-body { 121 | color: $hljs-attribute; 122 | } 123 | 124 | .highlight-dark .hljs-regexp { 125 | color: $hljs-regexp; 126 | } 127 | 128 | .highlight-dark .hljs-symbol, 129 | .highlight-dark .ruby .hljs-symbol .hljs-string, 130 | .highlight-dark .lisp .hljs-keyword, 131 | .highlight-dark .clojure .hljs-keyword, 132 | .highlight-dark .scheme .hljs-keyword, 133 | .highlight-dark .tex .hljs-special, 134 | .highlight-dark .hljs-prompt { 135 | color: $hljs-symbol; 136 | } 137 | 138 | .highlight-dark .hljs-built_in { 139 | color: $hljs-built-in; 140 | } 141 | 142 | .highlight-dark .hljs-preprocessor, 143 | .highlight-dark .hljs-pragma, 144 | .highlight-dark .hljs-pi, 145 | .highlight-dark .hljs-doctype, 146 | .highlight-dark .hljs-shebang, 147 | .highlight-dark .hljs-cdata { 148 | color: $hljs-preprocessor; 149 | font-weight: bold; 150 | } 151 | 152 | .highlight-dark .hljs-deletion { 153 | background: $hljs-deletion; 154 | } 155 | 156 | .highlight-dark .hljs-addition { 157 | background: $hljs-addition; 158 | } 159 | 160 | .highlight-dark .diff .hljs-change { 161 | background: $hljs-change; 162 | } 163 | 164 | .highlight-dark .hljs-chunk { 165 | color: $hljs-chunk; 166 | } -------------------------------------------------------------------------------- /app/assets/stylesheets/basscss/_highlight.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | $aqua: #7fdbff !default; 5 | $blue: #0074d9 !default; 6 | $navy: #001f3f !default; 7 | $teal: #39cccc !default; 8 | $green: #2ecc40 !default; 9 | $olive: #3d9970 !default; 10 | $lime: #01ff70 !default; 11 | $yellow: #ffdc00 !default; 12 | $orange: #ff851b !default; 13 | $red: #ff4136 !default; 14 | $fuchsia: #f012be !default; 15 | $purple: #b10dc9 !default; 16 | $maroon: #85144b !default; 17 | $white: #fff !default; 18 | $silver: #ddd !default; 19 | $gray: #aaa !default; 20 | $black: #111 !default; 21 | $hljs-comment: $gray !default; 22 | $hljs-keyword: $black !default; 23 | $hljs-number: $olive !default; 24 | $hljs-string: $blue !default; 25 | $hljs-title: $blue !default; 26 | $hljs-type: $navy !default; 27 | $hljs-tag: $navy !default; 28 | $hljs-attribute: $olive !default; 29 | $hljs-regexp: $olive !default; 30 | $hljs-symbol: $purple !default; 31 | $hljs-built-in: $navy !default; 32 | $hljs-preprocessor: $gray !default; 33 | $hljs-deletion: $fuchsia !default; 34 | $hljs-addition: $lime !default; 35 | $hljs-change: $navy !default; 36 | $hljs-chunk: $silver !default; 37 | 38 | // Custom Media Query Variables 39 | 40 | 41 | /* Basscss Highlight */ 42 | 43 | /* 44 | 45 | COLOR VARIABLES 46 | 47 | - Cool 48 | - Warm 49 | - Gray Scale 50 | 51 | */ 52 | 53 | .hljs { 54 | -webkit-text-size-adjust: none; 55 | } 56 | 57 | .hljs-comment, 58 | .diff .hljs-header, 59 | .hljs-javadoc { 60 | color: $hljs-comment; 61 | font-style: italic; 62 | } 63 | 64 | .hljs-keyword, 65 | .css .rule .hljs-keyword, 66 | .hljs-winutils, 67 | .nginx .hljs-title, 68 | .hljs-subst, 69 | .hljs-request, 70 | .hljs-status { 71 | color: $hljs-keyword; 72 | font-weight: bold; 73 | } 74 | 75 | .hljs-number, 76 | .hljs-hexcolor, 77 | .ruby .hljs-constant { 78 | color: $hljs-number; 79 | } 80 | 81 | .hljs-string, 82 | .hljs-tag .hljs-value, 83 | .hljs-phpdoc, 84 | .hljs-dartdoc, 85 | .tex .hljs-formula { 86 | color: $hljs-string; 87 | } 88 | 89 | .hljs-title, 90 | .hljs-id, 91 | .scss .hljs-preprocessor { 92 | color: $hljs-title; 93 | font-weight: bold; 94 | } 95 | 96 | .hljs-list .hljs-keyword, 97 | .hljs-subst { 98 | font-weight: normal; 99 | } 100 | 101 | .hljs-class .hljs-title, 102 | .hljs-type, 103 | .vhdl .hljs-literal, 104 | .tex .hljs-command { 105 | color: $hljs-type; 106 | font-weight: bold; 107 | } 108 | 109 | .hljs-tag, 110 | .hljs-tag .hljs-title, 111 | .hljs-rules .hljs-property, 112 | .django .hljs-tag .hljs-keyword { 113 | color: $hljs-tag; 114 | font-weight: normal; 115 | } 116 | 117 | .hljs-attribute, 118 | .hljs-variable, 119 | .lisp .hljs-body { 120 | color: $hljs-attribute; 121 | } 122 | 123 | .hljs-regexp { 124 | color: $hljs-regexp; 125 | } 126 | 127 | .hljs-symbol, 128 | .ruby .hljs-symbol .hljs-string, 129 | .lisp .hljs-keyword, 130 | .clojure .hljs-keyword, 131 | .scheme .hljs-keyword, 132 | .tex .hljs-special, 133 | .hljs-prompt { 134 | color: $hljs-symbol; 135 | } 136 | 137 | .hljs-built_in { 138 | color: $hljs-built-in; 139 | } 140 | 141 | .hljs-preprocessor, 142 | .hljs-pragma, 143 | .hljs-pi, 144 | .hljs-doctype, 145 | .hljs-shebang, 146 | .hljs-cdata { 147 | color: $hljs-preprocessor; 148 | font-weight: bold; 149 | } 150 | 151 | .hljs-deletion { 152 | background: $hljs-deletion; 153 | } 154 | 155 | .hljs-addition { 156 | background: $hljs-addition; 157 | } 158 | 159 | .diff .hljs-change { 160 | background: $hljs-change; 161 | } 162 | 163 | .hljs-chunk { 164 | color: $hljs-chunk; 165 | } 166 | 167 | /* Mapped colors */ -------------------------------------------------------------------------------- /app/assets/stylesheets/basscss/_input-range.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | $form-field-padding-x: .5rem !default; 5 | $form-field-padding-y: .5rem !default; 6 | $form-field-height: 2.25rem !default; 7 | $border-radius: 3px !default; 8 | $darken-3: rgba(0, 0, 0, .25) !default; 9 | $range-thumb-width: $form-field-padding-x !default; 10 | $range-thumb-height: ( $form-field-height - ($form-field-padding-y * 2) ) !default; 11 | $range-track-height: ( $form-field-padding-y / 2 ) !default; 12 | $range-thumb-offset: ( $range-thumb-height / -2 + ($range-track-height / 2) ) !default; 13 | $range-thumb-pseudo-size: $form-field-height !default; 14 | 15 | // Custom Media Query Variables 16 | 17 | 18 | /* Basscss Input Range */ 19 | 20 | .input-range { 21 | vertical-align: middle; 22 | background-color: transparent; 23 | padding-top: $form-field-padding-y; 24 | padding-bottom: $form-field-padding-y; 25 | color: inherit; 26 | background-color: transparent; 27 | -webkit-appearance: none; 28 | } 29 | 30 | .input-range::-webkit-slider-thumb { 31 | position: relative; 32 | width: $range-thumb-width; 33 | height: $range-thumb-height; 34 | cursor: pointer; 35 | margin-top: $range-thumb-offset; 36 | border-radius: $border-radius; 37 | background-color: currentcolor; 38 | -webkit-appearance: none; 39 | } 40 | 41 | /* Touch screen friendly pseudo element */ 42 | 43 | .input-range::-webkit-slider-thumb:before { 44 | content: ''; 45 | display: block; 46 | position: absolute; 47 | top: ( -.5 * $range-thumb-pseudo-size + (.5 * $range-thumb-height) ); 48 | left: ( (-.5 * $range-thumb-pseudo-size) + (.5 * $range-thumb-width) ); 49 | width: $range-thumb-pseudo-size; 50 | height: $range-thumb-pseudo-size; 51 | opacity: 0; 52 | } 53 | 54 | .input-range::-moz-range-thumb { 55 | width: $range-thumb-width; 56 | height: $range-thumb-height; 57 | cursor: pointer; 58 | border-radius: $border-radius; 59 | border-color: transparent; 60 | border-width: 0; 61 | background-color: currentcolor; 62 | } 63 | 64 | .input-range::-webkit-slider-runnable-track { 65 | height: $range-track-height; 66 | cursor: pointer; 67 | border-radius: $border-radius; 68 | background-color: $darken-3; 69 | } 70 | 71 | .input-range::-moz-range-track { 72 | height: $range-track-height; 73 | cursor: pointer; 74 | border-radius: $border-radius; 75 | background-color: $darken-3; 76 | } 77 | 78 | .input-range:focus { 79 | outline: none; 80 | } -------------------------------------------------------------------------------- /app/assets/stylesheets/basscss/_layout.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | $width-1: 24rem !default; 5 | $width-2: 32rem !default; 6 | $width-3: 48rem !default; 7 | $width-4: 64rem !default; 8 | 9 | // Custom Media Query Variables 10 | 11 | 12 | /* Basscss Layout */ 13 | 14 | .inline { display: inline } 15 | 16 | .block { display: block } 17 | 18 | .inline-block { display: inline-block } 19 | 20 | .table { display: table } 21 | 22 | .table-cell { display: table-cell } 23 | 24 | .overflow-hidden { overflow: hidden } 25 | 26 | .overflow-scroll { overflow: scroll } 27 | 28 | .overflow-auto { overflow: auto } 29 | 30 | .clearfix:before, 31 | .clearfix:after { 32 | content: " "; 33 | display: table 34 | } 35 | 36 | .clearfix:after { clear: both } 37 | 38 | .left { float: left } 39 | 40 | .right { float: right } 41 | 42 | .fit { max-width: 100% } 43 | 44 | .max-width-1 { max-width: $width-1 } 45 | 46 | .max-width-2 { max-width: $width-2 } 47 | 48 | .max-width-3 { max-width: $width-3 } 49 | 50 | .max-width-4 { max-width: $width-4 } 51 | 52 | .border-box { box-sizing: border-box } -------------------------------------------------------------------------------- /app/assets/stylesheets/basscss/_lighten.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | $lighten-1: rgba(255, 255, 255, .0625) !default; 5 | $lighten-2: rgba(255, 255, 255, .125) !default; 6 | $lighten-3: rgba(255, 255, 255, .25) !default; 7 | $lighten-4: rgba(255, 255, 255, .5) !default; 8 | 9 | // Custom Media Query Variables 10 | 11 | 12 | /* Basscss Lighten */ 13 | 14 | .bg-lighten-1 { background-color: $lighten-1 } 15 | 16 | .bg-lighten-2 { background-color: $lighten-2 } 17 | 18 | .bg-lighten-3 { background-color: $lighten-3 } 19 | 20 | .bg-lighten-4 { background-color: $lighten-4 } -------------------------------------------------------------------------------- /app/assets/stylesheets/basscss/_margin.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | $space-1: .5rem !default; 5 | $space-2: 1rem !default; 6 | $space-3: 2rem !default; 7 | $space-4: 4rem !default; 8 | 9 | // Custom Media Query Variables 10 | 11 | 12 | /* Basscss Margin */ 13 | 14 | .m0 { margin: 0 } 15 | 16 | .mt0 { margin-top: 0 } 17 | 18 | .mr0 { margin-right: 0 } 19 | 20 | .mb0 { margin-bottom: 0 } 21 | 22 | .ml0 { margin-left: 0 } 23 | 24 | .mx0 { margin-left: 0; margin-right: 0 } 25 | 26 | .my0 { margin-top: 0; margin-bottom: 0 } 27 | 28 | .m1 { margin: $space-1 } 29 | 30 | .mt1 { margin-top: $space-1 } 31 | 32 | .mr1 { margin-right: $space-1 } 33 | 34 | .mb1 { margin-bottom: $space-1 } 35 | 36 | .ml1 { margin-left: $space-1 } 37 | 38 | .mx1 { margin-left: $space-1; margin-right: $space-1 } 39 | 40 | .my1 { margin-top: $space-1; margin-bottom: $space-1 } 41 | 42 | .m2 { margin: $space-2 } 43 | 44 | .mt2 { margin-top: $space-2 } 45 | 46 | .mr2 { margin-right: $space-2 } 47 | 48 | .mb2 { margin-bottom: $space-2 } 49 | 50 | .ml2 { margin-left: $space-2 } 51 | 52 | .mx2 { margin-left: $space-2; margin-right: $space-2 } 53 | 54 | .my2 { margin-top: $space-2; margin-bottom: $space-2 } 55 | 56 | .m3 { margin: $space-3 } 57 | 58 | .mt3 { margin-top: $space-3 } 59 | 60 | .mr3 { margin-right: $space-3 } 61 | 62 | .mb3 { margin-bottom: $space-3 } 63 | 64 | .ml3 { margin-left: $space-3 } 65 | 66 | .mx3 { margin-left: $space-3; margin-right: $space-3 } 67 | 68 | .my3 { margin-top: $space-3; margin-bottom: $space-3 } 69 | 70 | .m4 { margin: $space-4 } 71 | 72 | .mt4 { margin-top: $space-4 } 73 | 74 | .mr4 { margin-right: $space-4 } 75 | 76 | .mb4 { margin-bottom: $space-4 } 77 | 78 | .ml4 { margin-left: $space-4 } 79 | 80 | .mx4 { margin-left: $space-4; margin-right: $space-4 } 81 | 82 | .my4 { margin-top: $space-4; margin-bottom: $space-4 } 83 | 84 | .mxn1 { margin-left: -$space-1; margin-right: -$space-1; } 85 | 86 | .mxn2 { margin-left: -$space-2; margin-right: -$space-2; } 87 | 88 | .mxn3 { margin-left: -$space-3; margin-right: -$space-3; } 89 | 90 | .mxn4 { margin-left: -$space-4; margin-right: -$space-4; } 91 | 92 | .ml-auto { margin-left: auto } 93 | 94 | .mr-auto { margin-right: auto } 95 | 96 | .mx-auto { margin-left: auto; margin-right: auto; } -------------------------------------------------------------------------------- /app/assets/stylesheets/basscss/_media-object.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | $space-1: .5rem !default; 5 | $media-object-space: $space-1 !default; 6 | 7 | // Custom Media Query Variables 8 | 9 | $breakpoint-sm: '(min-width: 40em)' !default; 10 | $breakpoint-md: '(min-width: 52em)' !default; 11 | $breakpoint-lg: '(min-width: 64em)' !default; 12 | 13 | /* Basscss Media Object */ 14 | 15 | .media, 16 | .sm-media, 17 | .md-media, 18 | .lg-media { 19 | margin-left: -$media-object-space; 20 | margin-right: -$media-object-space; 21 | } 22 | 23 | .media { 24 | display: flex; 25 | } 26 | 27 | .media-center { 28 | align-items: center; 29 | } 30 | 31 | .media-bottom { 32 | align-items: flex-end; 33 | } 34 | 35 | .media-img, 36 | .media-body { 37 | padding-left: $media-object-space; 38 | padding-right: $media-object-space; 39 | } 40 | 41 | .media-body { 42 | flex: 1 1 auto; 43 | } 44 | 45 | @media #{$breakpoint-sm} { 46 | .sm-media { display: flex } 47 | } 48 | 49 | @media #{$breakpoint-md} { 50 | .md-media { display: flex } 51 | } 52 | 53 | @media #{$breakpoint-lg} { 54 | .lg-media { display: flex } 55 | } -------------------------------------------------------------------------------- /app/assets/stylesheets/basscss/_padding.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | $space-1: .5rem !default; 5 | $space-2: 1rem !default; 6 | $space-3: 2rem !default; 7 | $space-4: 4rem !default; 8 | 9 | // Custom Media Query Variables 10 | 11 | 12 | /* Basscss Padding */ 13 | 14 | .p0 { padding: 0 } 15 | 16 | .pt0 { padding-top: 0 } 17 | 18 | .pr0 { padding-right: 0 } 19 | 20 | .pb0 { padding-bottom: 0 } 21 | 22 | .pl0 { padding-left: 0 } 23 | 24 | .px0 { padding-left: 0; padding-right: 0 } 25 | 26 | .py0 { padding-top: 0; padding-bottom: 0 } 27 | 28 | .p1 { padding: $space-1 } 29 | 30 | .pt1 { padding-top: $space-1 } 31 | 32 | .pr1 { padding-right: $space-1 } 33 | 34 | .pb1 { padding-bottom: $space-1 } 35 | 36 | .pl1 { padding-left: $space-1 } 37 | 38 | .py1 { padding-top: $space-1; padding-bottom: $space-1 } 39 | 40 | .px1 { padding-left: $space-1; padding-right: $space-1 } 41 | 42 | .p2 { padding: $space-2 } 43 | 44 | .pt2 { padding-top: $space-2 } 45 | 46 | .pr2 { padding-right: $space-2 } 47 | 48 | .pb2 { padding-bottom: $space-2 } 49 | 50 | .pl2 { padding-left: $space-2 } 51 | 52 | .py2 { padding-top: $space-2; padding-bottom: $space-2 } 53 | 54 | .px2 { padding-left: $space-2; padding-right: $space-2 } 55 | 56 | .p3 { padding: $space-3 } 57 | 58 | .pt3 { padding-top: $space-3 } 59 | 60 | .pr3 { padding-right: $space-3 } 61 | 62 | .pb3 { padding-bottom: $space-3 } 63 | 64 | .pl3 { padding-left: $space-3 } 65 | 66 | .py3 { padding-top: $space-3; padding-bottom: $space-3 } 67 | 68 | .px3 { padding-left: $space-3; padding-right: $space-3 } 69 | 70 | .p4 { padding: $space-4 } 71 | 72 | .pt4 { padding-top: $space-4 } 73 | 74 | .pr4 { padding-right: $space-4 } 75 | 76 | .pb4 { padding-bottom: $space-4 } 77 | 78 | .pl4 { padding-left: $space-4 } 79 | 80 | .py4 { padding-top: $space-4; padding-bottom: $space-4 } 81 | 82 | .px4 { padding-left: $space-4; padding-right: $space-4 } -------------------------------------------------------------------------------- /app/assets/stylesheets/basscss/_position.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | $z1: 1 !default; 5 | $z2: 2 !default; 6 | $z3: 3 !default; 7 | $z4: 4 !default; 8 | 9 | // Custom Media Query Variables 10 | 11 | 12 | /* Basscss Position */ 13 | 14 | .relative { position: relative } 15 | 16 | .absolute { position: absolute } 17 | 18 | .fixed { position: fixed } 19 | 20 | .top-0 { top: 0 } 21 | 22 | .right-0 { right: 0 } 23 | 24 | .bottom-0 { bottom: 0 } 25 | 26 | .left-0 { left: 0 } 27 | 28 | .z1 { z-index: $z1 } 29 | 30 | .z2 { z-index: $z2 } 31 | 32 | .z3 { z-index: $z3 } 33 | 34 | .z4 { z-index: $z4 } -------------------------------------------------------------------------------- /app/assets/stylesheets/basscss/_progress.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | $form-field-height: 2.25rem !default; 5 | $form-field-padding-y: .5rem !default; 6 | $darken-2: rgba(0, 0, 0, .125) !default; 7 | 8 | // Custom Media Query Variables 9 | 10 | 11 | /* Basscss Progress */ 12 | 13 | .progress { 14 | display: block; 15 | width: 100%; 16 | height: ( $form-field-height / 4 ); 17 | margin: $form-field-padding-y 0; 18 | overflow: hidden; 19 | background-color: $darken-2; 20 | border: 0; 21 | border-radius: 10000px; 22 | -webkit-appearance: none; 23 | } 24 | 25 | .progress::-webkit-progress-bar { 26 | -webkit-appearance: none; 27 | background-color: $darken-2 28 | } 29 | 30 | .progress::-webkit-progress-value { 31 | -webkit-appearance: none; 32 | background-color: currentcolor; 33 | } 34 | 35 | .progress::-moz-progress-bar { 36 | background-color: currentcolor; 37 | } -------------------------------------------------------------------------------- /app/assets/stylesheets/basscss/_responsive-margin.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | $space-1: .5rem !default; 5 | $space-2: 1rem !default; 6 | $space-3: 2rem !default; 7 | $space-4: 4rem !default; 8 | 9 | // Custom Media Query Variables 10 | 11 | $breakpoint-sm: '(min-width: 40em)' !default; 12 | $breakpoint-md: '(min-width: 52em)' !default; 13 | $breakpoint-lg: '(min-width: 64em)' !default; 14 | 15 | /* Basscss Responsive Margin */ 16 | 17 | @media #{$breakpoint-sm} { 18 | 19 | .sm-m0 { margin: 0 } 20 | .sm-mt0 { margin-top: 0 } 21 | .sm-mr0 { margin-right: 0 } 22 | .sm-mb0 { margin-bottom: 0 } 23 | .sm-ml0 { margin-left: 0 } 24 | .sm-mx0 { margin-left: 0; margin-right: 0 } 25 | .sm-my0 { margin-top: 0; margin-bottom: 0 } 26 | 27 | .sm-m1 { margin: $space-1 } 28 | .sm-mt1 { margin-top: $space-1 } 29 | .sm-mr1 { margin-right: $space-1 } 30 | .sm-mb1 { margin-bottom: $space-1 } 31 | .sm-ml1 { margin-left: $space-1 } 32 | .sm-mx1 { margin-left: $space-1; margin-right: $space-1 } 33 | .sm-my1 { margin-top: $space-1; margin-bottom: $space-1 } 34 | 35 | .sm-m2 { margin: $space-2 } 36 | .sm-mt2 { margin-top: $space-2 } 37 | .sm-mr2 { margin-right: $space-2 } 38 | .sm-mb2 { margin-bottom: $space-2 } 39 | .sm-ml2 { margin-left: $space-2 } 40 | .sm-mx2 { margin-left: $space-2; margin-right: $space-2 } 41 | .sm-my2 { margin-top: $space-2; margin-bottom: $space-2 } 42 | 43 | .sm-m3 { margin: $space-3 } 44 | .sm-mt3 { margin-top: $space-3 } 45 | .sm-mr3 { margin-right: $space-3 } 46 | .sm-mb3 { margin-bottom: $space-3 } 47 | .sm-ml3 { margin-left: $space-3 } 48 | .sm-mx3 { margin-left: $space-3; margin-right: $space-3 } 49 | .sm-my3 { margin-top: $space-3; margin-bottom: $space-3 } 50 | 51 | .sm-m4 { margin: $space-4 } 52 | .sm-mt4 { margin-top: $space-4 } 53 | .sm-mr4 { margin-right: $space-4 } 54 | .sm-mb4 { margin-bottom: $space-4 } 55 | .sm-ml4 { margin-left: $space-4 } 56 | .sm-mx4 { margin-left: $space-4; margin-right: $space-4 } 57 | .sm-my4 { margin-top: $space-4; margin-bottom: $space-4 } 58 | 59 | .sm-mxn1 { margin-left: -$space-1; margin-right: -$space-1 } 60 | .sm-mxn2 { margin-left: -$space-2; margin-right: -$space-2 } 61 | .sm-mxn3 { margin-left: -$space-3; margin-right: -$space-3 } 62 | .sm-mxn4 { margin-left: -$space-4; margin-right: -$space-4 } 63 | 64 | .sm-ml-auto { margin-left: auto } 65 | .sm-mr-auto { margin-right: auto } 66 | .sm-mx-auto { margin-left: auto; margin-right: auto } 67 | 68 | } 69 | 70 | @media #{$breakpoint-md} { 71 | 72 | .md-m0 { margin: 0 } 73 | .md-mt0 { margin-top: 0 } 74 | .md-mr0 { margin-right: 0 } 75 | .md-mb0 { margin-bottom: 0 } 76 | .md-ml0 { margin-left: 0 } 77 | .md-mx0 { margin-left: 0; margin-right: 0 } 78 | .md-my0 { margin-top: 0; margin-bottom: 0 } 79 | 80 | .md-m1 { margin: $space-1 } 81 | .md-mt1 { margin-top: $space-1 } 82 | .md-mr1 { margin-right: $space-1 } 83 | .md-mb1 { margin-bottom: $space-1 } 84 | .md-ml1 { margin-left: $space-1 } 85 | .md-mx1 { margin-left: $space-1; margin-right: $space-1 } 86 | .md-my1 { margin-top: $space-1; margin-bottom: $space-1 } 87 | 88 | .md-m2 { margin: $space-2 } 89 | .md-mt2 { margin-top: $space-2 } 90 | .md-mr2 { margin-right: $space-2 } 91 | .md-mb2 { margin-bottom: $space-2 } 92 | .md-ml2 { margin-left: $space-2 } 93 | .md-mx2 { margin-left: $space-2; margin-right: $space-2 } 94 | .md-my2 { margin-top: $space-2; margin-bottom: $space-2 } 95 | 96 | .md-m3 { margin: $space-3 } 97 | .md-mt3 { margin-top: $space-3 } 98 | .md-mr3 { margin-right: $space-3 } 99 | .md-mb3 { margin-bottom: $space-3 } 100 | .md-ml3 { margin-left: $space-3 } 101 | .md-mx3 { margin-left: $space-3; margin-right: $space-3 } 102 | .md-my3 { margin-top: $space-3; margin-bottom: $space-3 } 103 | 104 | .md-m4 { margin: $space-4 } 105 | .md-mt4 { margin-top: $space-4 } 106 | .md-mr4 { margin-right: $space-4 } 107 | .md-mb4 { margin-bottom: $space-4 } 108 | .md-ml4 { margin-left: $space-4 } 109 | .md-mx4 { margin-left: $space-4; margin-right: $space-4 } 110 | .md-my4 { margin-top: $space-4; margin-bottom: $space-4 } 111 | 112 | .md-mxn1 { margin-left: -$space-1; margin-right: -$space-1; } 113 | .md-mxn2 { margin-left: -$space-2; margin-right: -$space-2; } 114 | .md-mxn3 { margin-left: -$space-3; margin-right: -$space-3; } 115 | .md-mxn4 { margin-left: -$space-4; margin-right: -$space-4; } 116 | 117 | .md-ml-auto { margin-left: auto } 118 | .md-mr-auto { margin-right: auto } 119 | .md-mx-auto { margin-left: auto; margin-right: auto; } 120 | 121 | } 122 | 123 | @media #{$breakpoint-lg} { 124 | 125 | .lg-m0 { margin: 0 } 126 | .lg-mt0 { margin-top: 0 } 127 | .lg-mr0 { margin-right: 0 } 128 | .lg-mb0 { margin-bottom: 0 } 129 | .lg-ml0 { margin-left: 0 } 130 | .lg-mx0 { margin-left: 0; margin-right: 0 } 131 | .lg-my0 { margin-top: 0; margin-bottom: 0 } 132 | 133 | .lg-m1 { margin: $space-1 } 134 | .lg-mt1 { margin-top: $space-1 } 135 | .lg-mr1 { margin-right: $space-1 } 136 | .lg-mb1 { margin-bottom: $space-1 } 137 | .lg-ml1 { margin-left: $space-1 } 138 | .lg-mx1 { margin-left: $space-1; margin-right: $space-1 } 139 | .lg-my1 { margin-top: $space-1; margin-bottom: $space-1 } 140 | 141 | .lg-m2 { margin: $space-2 } 142 | .lg-mt2 { margin-top: $space-2 } 143 | .lg-mr2 { margin-right: $space-2 } 144 | .lg-mb2 { margin-bottom: $space-2 } 145 | .lg-ml2 { margin-left: $space-2 } 146 | .lg-mx2 { margin-left: $space-2; margin-right: $space-2 } 147 | .lg-my2 { margin-top: $space-2; margin-bottom: $space-2 } 148 | 149 | .lg-m3 { margin: $space-3 } 150 | .lg-mt3 { margin-top: $space-3 } 151 | .lg-mr3 { margin-right: $space-3 } 152 | .lg-mb3 { margin-bottom: $space-3 } 153 | .lg-ml3 { margin-left: $space-3 } 154 | .lg-mx3 { margin-left: $space-3; margin-right: $space-3 } 155 | .lg-my3 { margin-top: $space-3; margin-bottom: $space-3 } 156 | 157 | .lg-m4 { margin: $space-4 } 158 | .lg-mt4 { margin-top: $space-4 } 159 | .lg-mr4 { margin-right: $space-4 } 160 | .lg-mb4 { margin-bottom: $space-4 } 161 | .lg-ml4 { margin-left: $space-4 } 162 | .lg-mx4 { margin-left: $space-4; margin-right: $space-4 } 163 | .lg-my4 { margin-top: $space-4; margin-bottom: $space-4 } 164 | 165 | .lg-mxn1 { margin-left: -$space-1; margin-right: -$space-1; } 166 | .lg-mxn2 { margin-left: -$space-2; margin-right: -$space-2; } 167 | .lg-mxn3 { margin-left: -$space-3; margin-right: -$space-3; } 168 | .lg-mxn4 { margin-left: -$space-4; margin-right: -$space-4; } 169 | 170 | .lg-ml-auto { margin-left: auto } 171 | .lg-mr-auto { margin-right: auto } 172 | .lg-mx-auto { margin-left: auto; margin-right: auto; } 173 | 174 | } -------------------------------------------------------------------------------- /app/assets/stylesheets/basscss/_responsive-padding.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | $space-1: .5rem !default; 5 | $space-2: 1rem !default; 6 | $space-3: 2rem !default; 7 | $space-4: 4rem !default; 8 | 9 | // Custom Media Query Variables 10 | 11 | $breakpoint-sm: '(min-width: 40em)' !default; 12 | $breakpoint-md: '(min-width: 52em)' !default; 13 | $breakpoint-lg: '(min-width: 64em)' !default; 14 | 15 | /* Basscss Responsive Padding */ 16 | 17 | @media #{$breakpoint-sm} { 18 | 19 | .sm-p0 { padding: 0 } 20 | .sm-pt0 { padding-top: 0 } 21 | .sm-pr0 { padding-right: 0 } 22 | .sm-pb0 { padding-bottom: 0 } 23 | .sm-pl0 { padding-left: 0 } 24 | .sm-px0 { padding-left: 0; padding-right: 0 } 25 | .sm-py0 { padding-top: 0; padding-bottom: 0 } 26 | 27 | .sm-p1 { padding: $space-1 } 28 | .sm-pt1 { padding-top: $space-1 } 29 | .sm-pr1 { padding-right: $space-1 } 30 | .sm-pb1 { padding-bottom: $space-1 } 31 | .sm-pl1 { padding-left: $space-1 } 32 | .sm-px1 { padding-left: $space-1; padding-right: $space-1 } 33 | .sm-py1 { padding-top: $space-1; padding-bottom: $space-1 } 34 | 35 | .sm-p2 { padding: $space-2 } 36 | .sm-pt2 { padding-top: $space-2 } 37 | .sm-pr2 { padding-right: $space-2 } 38 | .sm-pb2 { padding-bottom: $space-2 } 39 | .sm-pl2 { padding-left: $space-2 } 40 | .sm-px2 { padding-left: $space-2; padding-right: $space-2 } 41 | .sm-py2 { padding-top: $space-2; padding-bottom: $space-2 } 42 | 43 | .sm-p3 { padding: $space-3 } 44 | .sm-pt3 { padding-top: $space-3 } 45 | .sm-pr3 { padding-right: $space-3 } 46 | .sm-pb3 { padding-bottom: $space-3 } 47 | .sm-pl3 { padding-left: $space-3 } 48 | .sm-px3 { padding-left: $space-3; padding-right: $space-3 } 49 | .sm-py3 { padding-top: $space-3; padding-bottom: $space-3 } 50 | 51 | .sm-p4 { padding: $space-4 } 52 | .sm-pt4 { padding-top: $space-4 } 53 | .sm-pr4 { padding-right: $space-4 } 54 | .sm-pb4 { padding-bottom: $space-4 } 55 | .sm-pl4 { padding-left: $space-4 } 56 | .sm-px4 { padding-left: $space-4; padding-right: $space-4 } 57 | .sm-py4 { padding-top: $space-4; padding-bottom: $space-4 } 58 | 59 | } 60 | 61 | @media #{$breakpoint-md} { 62 | 63 | .md-p0 { padding: 0 } 64 | .md-pt0 { padding-top: 0 } 65 | .md-pr0 { padding-right: 0 } 66 | .md-pb0 { padding-bottom: 0 } 67 | .md-pl0 { padding-left: 0 } 68 | .md-px0 { padding-left: 0; padding-right: 0 } 69 | .md-py0 { padding-top: 0; padding-bottom: 0 } 70 | 71 | .md-p1 { padding: $space-1 } 72 | .md-pt1 { padding-top: $space-1 } 73 | .md-pr1 { padding-right: $space-1 } 74 | .md-pb1 { padding-bottom: $space-1 } 75 | .md-pl1 { padding-left: $space-1 } 76 | .md-px1 { padding-left: $space-1; padding-right: $space-1 } 77 | .md-py1 { padding-top: $space-1; padding-bottom: $space-1 } 78 | 79 | .md-p2 { padding: $space-2 } 80 | .md-pt2 { padding-top: $space-2 } 81 | .md-pr2 { padding-right: $space-2 } 82 | .md-pb2 { padding-bottom: $space-2 } 83 | .md-pl2 { padding-left: $space-2 } 84 | .md-px2 { padding-left: $space-2; padding-right: $space-2 } 85 | .md-py2 { padding-top: $space-2; padding-bottom: $space-2 } 86 | 87 | .md-p3 { padding: $space-3 } 88 | .md-pt3 { padding-top: $space-3 } 89 | .md-pr3 { padding-right: $space-3 } 90 | .md-pb3 { padding-bottom: $space-3 } 91 | .md-pl3 { padding-left: $space-3 } 92 | .md-px3 { padding-left: $space-3; padding-right: $space-3 } 93 | .md-py3 { padding-top: $space-3; padding-bottom: $space-3 } 94 | 95 | .md-p4 { padding: $space-4 } 96 | .md-pt4 { padding-top: $space-4 } 97 | .md-pr4 { padding-right: $space-4 } 98 | .md-pb4 { padding-bottom: $space-4 } 99 | .md-pl4 { padding-left: $space-4 } 100 | .md-px4 { padding-left: $space-4; padding-right: $space-4 } 101 | .md-py4 { padding-top: $space-4; padding-bottom: $space-4 } 102 | 103 | } 104 | 105 | @media #{$breakpoint-lg} { 106 | 107 | .lg-p0 { padding: 0 } 108 | .lg-pt0 { padding-top: 0 } 109 | .lg-pr0 { padding-right: 0 } 110 | .lg-pb0 { padding-bottom: 0 } 111 | .lg-pl0 { padding-left: 0 } 112 | .lg-px0 { padding-left: 0; padding-right: 0 } 113 | .lg-py0 { padding-top: 0; padding-bottom: 0 } 114 | 115 | .lg-p1 { padding: $space-1 } 116 | .lg-pt1 { padding-top: $space-1 } 117 | .lg-pr1 { padding-right: $space-1 } 118 | .lg-pb1 { padding-bottom: $space-1 } 119 | .lg-pl1 { padding-left: $space-1 } 120 | .lg-px1 { padding-left: $space-1; padding-right: $space-1 } 121 | .lg-py1 { padding-top: $space-1; padding-bottom: $space-1 } 122 | 123 | .lg-p2 { padding: $space-2 } 124 | .lg-pt2 { padding-top: $space-2 } 125 | .lg-pr2 { padding-right: $space-2 } 126 | .lg-pb2 { padding-bottom: $space-2 } 127 | .lg-pl2 { padding-left: $space-2 } 128 | .lg-px2 { padding-left: $space-2; padding-right: $space-2 } 129 | .lg-py2 { padding-top: $space-2; padding-bottom: $space-2 } 130 | 131 | .lg-p3 { padding: $space-3 } 132 | .lg-pt3 { padding-top: $space-3 } 133 | .lg-pr3 { padding-right: $space-3 } 134 | .lg-pb3 { padding-bottom: $space-3 } 135 | .lg-pl3 { padding-left: $space-3 } 136 | .lg-px3 { padding-left: $space-3; padding-right: $space-3 } 137 | .lg-py3 { padding-top: $space-3; padding-bottom: $space-3 } 138 | 139 | .lg-p4 { padding: $space-4 } 140 | .lg-pt4 { padding-top: $space-4 } 141 | .lg-pr4 { padding-right: $space-4 } 142 | .lg-pb4 { padding-bottom: $space-4 } 143 | .lg-pl4 { padding-left: $space-4 } 144 | .lg-px4 { padding-left: $space-4; padding-right: $space-4 } 145 | .lg-py4 { padding-top: $space-4; padding-bottom: $space-4 } 146 | 147 | } -------------------------------------------------------------------------------- /app/assets/stylesheets/basscss/_type-scale.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | $h1: 2rem !default; 5 | $h2: 1.5rem !default; 6 | $h3: 1.25rem !default; 7 | $h4: 1rem !default; 8 | $h5: .875rem !default; 9 | $h6: .75rem !default; 10 | 11 | // Custom Media Query Variables 12 | 13 | 14 | /* Basscss Type Scale */ 15 | 16 | .h1 { font-size: $h1 } 17 | 18 | .h2 { font-size: $h2 } 19 | 20 | .h3 { font-size: $h3 } 21 | 22 | .h4 { font-size: $h4 } 23 | 24 | .h5 { font-size: $h5 } 25 | 26 | .h6 { font-size: $h6 } -------------------------------------------------------------------------------- /app/assets/stylesheets/basscss/_typography.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | $line-height-1: 1 !default; 5 | $line-height-2: 1.125 !default; 6 | $line-height-3: 1.25 !default; 7 | $line-height-4: 1.5 !default; 8 | $letter-spacing: 1 !default; 9 | $caps-letter-spacing: .2em !default; 10 | $bold-font-weight: bold !default; 11 | 12 | // Custom Media Query Variables 13 | 14 | 15 | /* Basscss Typography */ 16 | 17 | .font-family-inherit { font-family: inherit } 18 | 19 | .font-size-inherit { font-size: inherit } 20 | 21 | .text-decoration-none { text-decoration: none } 22 | 23 | .bold { font-weight: $bold-font-weight /* Fallback value: bold */ } 24 | 25 | .regular { font-weight: normal } 26 | 27 | .italic { font-style: italic } 28 | 29 | .caps { text-transform: uppercase; letter-spacing: $caps-letter-spacing; } 30 | 31 | .left-align { text-align: left } 32 | 33 | .center { text-align: center } 34 | 35 | .right-align { text-align: right } 36 | 37 | .justify { text-align: justify } 38 | 39 | .nowrap { white-space: nowrap } 40 | 41 | .break-word { word-wrap: break-word } 42 | 43 | .line-height-1 { line-height: $line-height-1 } 44 | 45 | .line-height-2 { line-height: $line-height-2 } 46 | 47 | .line-height-3 { line-height: $line-height-3 } 48 | 49 | .line-height-4 { line-height: $line-height-4 } 50 | 51 | .list-style-none { list-style: none } 52 | 53 | .underline { text-decoration: underline } 54 | 55 | .truncate { 56 | max-width: 100%; 57 | overflow: hidden; 58 | text-overflow: ellipsis; 59 | white-space: nowrap; 60 | } 61 | 62 | .list-reset { 63 | list-style: none; 64 | padding-left: 0; 65 | } -------------------------------------------------------------------------------- /app/assets/stylesheets/basscss/basscss-addons.scss: -------------------------------------------------------------------------------- 1 | @import "all"; 2 | @import "background-colors"; 3 | @import "background-images"; 4 | @import "border-colors"; 5 | @import "btn"; 6 | @import "btn-outline"; 7 | @import "btn-primary"; 8 | @import "colors"; 9 | @import "darken"; 10 | @import "forms"; 11 | @import "highlight-dark"; 12 | @import "highlight"; 13 | @import "input-range"; 14 | @import "lighten"; 15 | @import "media-object"; 16 | @import "progress"; 17 | @import "responsive-margin"; 18 | @import "responsive-padding"; -------------------------------------------------------------------------------- /app/assets/stylesheets/basscss/basscss.scss: -------------------------------------------------------------------------------- 1 | @import "type-scale"; 2 | @import "typography"; 3 | @import "layout"; 4 | @import "align"; 5 | @import "margin"; 6 | @import "padding"; 7 | @import "grid"; 8 | @import "flexbox"; 9 | @import "position"; 10 | @import "border"; 11 | @import "hide"; -------------------------------------------------------------------------------- /basscss-rails.gemspec: -------------------------------------------------------------------------------- 1 | # coding: utf-8 2 | lib = File.expand_path('../lib', __FILE__) 3 | $LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib) 4 | require 'basscss/rails/version' 5 | 6 | Gem::Specification.new do |spec| 7 | spec.name = "basscss-rails" 8 | spec.version = Basscss::Rails::VERSION 9 | spec.authors = ["John Otander"] 10 | spec.email = ["johnotander@gmail.com"] 11 | spec.summary = %q{Include BASSCSS in your Rails apps.} 12 | spec.description = %q{Include BASSCSS, a simple, responsive CSS toolkit based on OOCSS principles in your Rails apps.} 13 | spec.homepage = "https://github.com/johnotander/basscss-rails" 14 | spec.license = "MIT" 15 | 16 | spec.files = `git ls-files -z`.split("\x0") 17 | spec.executables = spec.files.grep(%r{^bin/}) { |f| File.basename(f) } 18 | spec.test_files = spec.files.grep(%r{^(test|spec|features)/}) 19 | spec.require_paths = ["lib"] 20 | 21 | spec.add_development_dependency "bundler", "~> 1.6" 22 | spec.add_development_dependency "rake" 23 | end 24 | -------------------------------------------------------------------------------- /lib/basscss/rails.rb: -------------------------------------------------------------------------------- 1 | require "basscss/rails/version" 2 | require "basscss/rails/engine" 3 | 4 | module Basscss 5 | module Rails 6 | end 7 | end 8 | -------------------------------------------------------------------------------- /lib/basscss/rails/engine.rb: -------------------------------------------------------------------------------- 1 | module Basscss 2 | module Rails 3 | if defined?(::Rails::Engine) 4 | class Engine < ::Rails::Engine 5 | end 6 | end 7 | end 8 | end 9 | -------------------------------------------------------------------------------- /lib/basscss/rails/version.rb: -------------------------------------------------------------------------------- 1 | module Basscss 2 | module Rails 3 | VERSION = '4.1.0' 4 | end 5 | end 6 | --------------------------------------------------------------------------------