less-rails-bootswatch 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/Gemfile +3 -0
- data/Gemfile.lock +72 -0
- data/LICENSE +22 -0
- data/LICENSE-bootswatch +13 -0
- data/README.md +29 -0
- data/Rakefile +47 -0
- data/lib/less/rails/bootswatch/engine.rb +9 -0
- data/lib/less/rails/bootswatch/version.rb +7 -0
- data/lib/less/rails/bootswatch.rb +2 -0
- data/vendor/assets/stylesheets/bootswatch/amelia/bootswatch.less +600 -0
- data/vendor/assets/stylesheets/bootswatch/amelia/variables.less +203 -0
- data/vendor/assets/stylesheets/bootswatch/cerulean/bootswatch.less +97 -0
- data/vendor/assets/stylesheets/bootswatch/cerulean/variables.less +203 -0
- data/vendor/assets/stylesheets/bootswatch/cyborg/bootswatch.less +473 -0
- data/vendor/assets/stylesheets/bootswatch/cyborg/variables.less +203 -0
- data/vendor/assets/stylesheets/bootswatch/default/variables.less +201 -0
- data/vendor/assets/stylesheets/bootswatch/journal/bootswatch.less +159 -0
- data/vendor/assets/stylesheets/bootswatch/journal/variables.less +203 -0
- data/vendor/assets/stylesheets/bootswatch/readable/bootswatch.less +452 -0
- data/vendor/assets/stylesheets/bootswatch/readable/variables.less +203 -0
- data/vendor/assets/stylesheets/bootswatch/simplex/bootswatch.less +276 -0
- data/vendor/assets/stylesheets/bootswatch/simplex/variables.less +203 -0
- data/vendor/assets/stylesheets/bootswatch/slate/bootswatch.less +417 -0
- data/vendor/assets/stylesheets/bootswatch/slate/variables.less +203 -0
- data/vendor/assets/stylesheets/bootswatch/spacelab/bootswatch.less +175 -0
- data/vendor/assets/stylesheets/bootswatch/spacelab/variables.less +203 -0
- data/vendor/assets/stylesheets/bootswatch/spruce/bootswatch.less +503 -0
- data/vendor/assets/stylesheets/bootswatch/spruce/variables.less +203 -0
- data/vendor/assets/stylesheets/bootswatch/superhero/bootswatch.less +625 -0
- data/vendor/assets/stylesheets/bootswatch/superhero/variables.less +203 -0
- data/vendor/assets/stylesheets/bootswatch/united/bootswatch.less +97 -0
- data/vendor/assets/stylesheets/bootswatch/united/variables.less +203 -0
- metadata +90 -0
| @@ -0,0 +1,175 @@ | |
| 1 | 
            +
            // Bootswatch.less
         | 
| 2 | 
            +
            // Swatch: Spacelab
         | 
| 3 | 
            +
            // Version: 2.0.2
         | 
| 4 | 
            +
            // -----------------------------------------------------
         | 
| 5 | 
            +
             | 
| 6 | 
            +
            // NAVBAR
         | 
| 7 | 
            +
            // -----------------------------------------------------
         | 
| 8 | 
            +
             | 
| 9 | 
            +
            // navbar style
         | 
| 10 | 
            +
            .navbar {
         | 
| 11 | 
            +
            	border-bottom: 1px solid #CACACA;
         | 
| 12 | 
            +
            	
         | 
| 13 | 
            +
            	.brand {
         | 
| 14 | 
            +
            		font-size: 20px;
         | 
| 15 | 
            +
            		font-weight: bold;
         | 
| 16 | 
            +
            		color: @textColor;
         | 
| 17 | 
            +
            	
         | 
| 18 | 
            +
            		&:hover {
         | 
| 19 | 
            +
            			color: @linkColor;
         | 
| 20 | 
            +
            		}
         | 
| 21 | 
            +
            	}
         | 
| 22 | 
            +
            }
         | 
| 23 | 
            +
             | 
| 24 | 
            +
            // navbar dropshadow
         | 
| 25 | 
            +
            .navbar .navbar-inner {
         | 
| 26 | 
            +
            	.box-shadow(0 1px 0 rgba(255,255,255,0.4));
         | 
| 27 | 
            +
            	.box-shadow(0 0 10px rgba(0,0,0,0.1));
         | 
| 28 | 
            +
            }
         | 
| 29 | 
            +
             | 
| 30 | 
            +
            // nav item typography
         | 
| 31 | 
            +
            .navbar .nav > li > a {
         | 
| 32 | 
            +
            	font-weight: bold;
         | 
| 33 | 
            +
            	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
         | 
| 34 | 
            +
            }
         | 
| 35 | 
            +
             | 
| 36 | 
            +
            .navbar .nav .active > a {
         | 
| 37 | 
            +
            	background-color: transparent;
         | 
| 38 | 
            +
            	color: @textColor;
         | 
| 39 | 
            +
            	
         | 
| 40 | 
            +
            	&:hover {
         | 
| 41 | 
            +
            		background-color: transparent;
         | 
| 42 | 
            +
            		color: @linkColor;
         | 
| 43 | 
            +
            	}
         | 
| 44 | 
            +
            }
         | 
| 45 | 
            +
             | 
| 46 | 
            +
            .navbar .nav > li > a:hover,
         | 
| 47 | 
            +
            .navbar .nav .open.dropdown .dropdown-toggle {
         | 
| 48 | 
            +
            	color: @linkColor !important;
         | 
| 49 | 
            +
            }
         | 
| 50 | 
            +
             | 
| 51 | 
            +
            .navbar .nav .dropdown-toggle .caret {
         | 
| 52 | 
            +
            	border-top-color: @textColor;
         | 
| 53 | 
            +
            	opacity: 1;
         | 
| 54 | 
            +
            }
         | 
| 55 | 
            +
             | 
| 56 | 
            +
            .nav .open.dropdown .caret,
         | 
| 57 | 
            +
            .nav .dropdown-toggle:hover .caret {
         | 
| 58 | 
            +
            	border-top-color: @linkColor !important;
         | 
| 59 | 
            +
            }
         | 
| 60 | 
            +
             | 
| 61 | 
            +
            div.subnav .nav > li > a {
         | 
| 62 | 
            +
            	font-weight: bold;
         | 
| 63 | 
            +
            	color: #777;
         | 
| 64 | 
            +
            	
         | 
| 65 | 
            +
            	&:hover {
         | 
| 66 | 
            +
            		color: @linkColor;
         | 
| 67 | 
            +
            	}
         | 
| 68 | 
            +
            }
         | 
| 69 | 
            +
             | 
| 70 | 
            +
            div.subnav .nav > li.active > a {
         | 
| 71 | 
            +
            	color: @textColor;
         | 
| 72 | 
            +
            	
         | 
| 73 | 
            +
            	&:hover {
         | 
| 74 | 
            +
            		color: @grayDark;
         | 
| 75 | 
            +
            	}
         | 
| 76 | 
            +
            }
         | 
| 77 | 
            +
             | 
| 78 | 
            +
            div.subnav .nav > li > .dropdown-toggle {
         | 
| 79 | 
            +
            	background-color: transparent;
         | 
| 80 | 
            +
            	color: @linkColor;
         | 
| 81 | 
            +
            }
         | 
| 82 | 
            +
             | 
| 83 | 
            +
            .navbar-search .search-query,
         | 
| 84 | 
            +
            .navbar-search .search-query:hover {
         | 
| 85 | 
            +
            	border: none;
         | 
| 86 | 
            +
            	color: @grayLight;
         | 
| 87 | 
            +
            	.placeholder(@grayLight);
         | 
| 88 | 
            +
            	.box-shadow(inset 0 1px 2px rgba(0, 0, 0, 0.5));
         | 
| 89 | 
            +
            	
         | 
| 90 | 
            +
                &:focus,
         | 
| 91 | 
            +
                &.focused {
         | 
| 92 | 
            +
            		.box-shadow(inset 0 1px 2px rgba(0, 0, 0, 0.5));
         | 
| 93 | 
            +
            		color: @textColor;
         | 
| 94 | 
            +
            	}
         | 
| 95 | 
            +
            }
         | 
| 96 | 
            +
             | 
| 97 | 
            +
            .navbar .nav-collapse.in > .nav li > a {
         | 
| 98 | 
            +
             | 
| 99 | 
            +
            	color: @textColor;
         | 
| 100 | 
            +
             | 
| 101 | 
            +
            	.caret {
         | 
| 102 | 
            +
            		border-top-color: @grayLight;
         | 
| 103 | 
            +
            	}
         | 
| 104 | 
            +
            }
         | 
| 105 | 
            +
             | 
| 106 | 
            +
             | 
| 107 | 
            +
            .navbar .nav-collapse.in > .nav li > a:hover {
         | 
| 108 | 
            +
            	text-shadow: none;
         | 
| 109 | 
            +
            	color: @linkColor;
         | 
| 110 | 
            +
            	background-color: transparent;
         | 
| 111 | 
            +
            	
         | 
| 112 | 
            +
            	.caret {
         | 
| 113 | 
            +
            		border-top-color: @white;
         | 
| 114 | 
            +
            	}
         | 
| 115 | 
            +
            }
         | 
| 116 | 
            +
             | 
| 117 | 
            +
            // BUTTON
         | 
| 118 | 
            +
            // -----------------------------------------------------
         | 
| 119 | 
            +
             | 
| 120 | 
            +
            .btn {
         | 
| 121 | 
            +
            	.buttonBackground(#F4F4F4, #ECECEC);
         | 
| 122 | 
            +
            }
         | 
| 123 | 
            +
             | 
| 124 | 
            +
            .btn-primary {
         | 
| 125 | 
            +
            	.buttonBackground(#909090, #3F3F3F);
         | 
| 126 | 
            +
            }
         | 
| 127 | 
            +
             | 
| 128 | 
            +
            .btn-warning {
         | 
| 129 | 
            +
              .buttonBackground(lighten(@yellow, 15%), @yellow);
         | 
| 130 | 
            +
            }
         | 
| 131 | 
            +
             | 
| 132 | 
            +
            .btn-danger {
         | 
| 133 | 
            +
              .buttonBackground(lighten(#DA2D2D, 15%), #DA2D2D);
         | 
| 134 | 
            +
            }
         | 
| 135 | 
            +
             | 
| 136 | 
            +
            .btn-success {
         | 
| 137 | 
            +
              .buttonBackground(#8ADD6D, #60B044);
         | 
| 138 | 
            +
            }
         | 
| 139 | 
            +
             | 
| 140 | 
            +
            .btn-info {
         | 
| 141 | 
            +
              .buttonBackground(lighten(#4488BB, 15%), #4488BB);
         | 
| 142 | 
            +
            }
         | 
| 143 | 
            +
             | 
| 144 | 
            +
            .btn-inverse {
         | 
| 145 | 
            +
              .buttonBackground(lighten(@purple, 5%), @purple);
         | 
| 146 | 
            +
            }
         | 
| 147 | 
            +
             | 
| 148 | 
            +
            // FORMS
         | 
| 149 | 
            +
            // -----------------------------------------------------
         | 
| 150 | 
            +
             | 
| 151 | 
            +
            .control-group.warning {
         | 
| 152 | 
            +
              .formFieldState(#E29235, #E29235, @warningBackground);
         | 
| 153 | 
            +
            }
         | 
| 154 | 
            +
             | 
| 155 | 
            +
            .control-group.error {
         | 
| 156 | 
            +
              .formFieldState(#C00, #C00, @errorBackground);
         | 
| 157 | 
            +
            }
         | 
| 158 | 
            +
             | 
| 159 | 
            +
            .control-group.success {
         | 
| 160 | 
            +
              .formFieldState(#2BA949, #2BA949, @successBackground);
         | 
| 161 | 
            +
            }
         | 
| 162 | 
            +
             | 
| 163 | 
            +
             | 
| 164 | 
            +
            // MISC
         | 
| 165 | 
            +
            // -----------------------------------------------------
         | 
| 166 | 
            +
             | 
| 167 | 
            +
            .label-important { background-color: #BD2C00; }
         | 
| 168 | 
            +
            .label-warning   { background-color: #E3E84D; }
         | 
| 169 | 
            +
            .label-success   { background-color: #6CC644; }
         | 
| 170 | 
            +
            .label-info      { background-color: #4183C4; }
         | 
| 171 | 
            +
             | 
| 172 | 
            +
            .hero-unit {
         | 
| 173 | 
            +
                .box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
         | 
| 174 | 
            +
                border: 1px solid rgba(0,0,0,.05);
         | 
| 175 | 
            +
            }
         | 
| @@ -0,0 +1,203 @@ | |
| 1 | 
            +
            // Variables.less
         | 
| 2 | 
            +
            // Variables to customize the look and feel of Bootstrap
         | 
| 3 | 
            +
            // Swatch: Spacelab
         | 
| 4 | 
            +
            // Version: 2.0.2
         | 
| 5 | 
            +
            // -----------------------------------------------------
         | 
| 6 | 
            +
             | 
| 7 | 
            +
             | 
| 8 | 
            +
             | 
| 9 | 
            +
            // GLOBAL VALUES
         | 
| 10 | 
            +
            // --------------------------------------------------
         | 
| 11 | 
            +
             | 
| 12 | 
            +
             | 
| 13 | 
            +
            // Grays
         | 
| 14 | 
            +
            // -------------------------
         | 
| 15 | 
            +
            @black:                 #000;
         | 
| 16 | 
            +
            @grayDarker:            #222;
         | 
| 17 | 
            +
            @grayDark:              #333;
         | 
| 18 | 
            +
            @gray:                  #555;
         | 
| 19 | 
            +
            @grayLight:             #999;
         | 
| 20 | 
            +
            @grayLighter:           #F5F5F5;
         | 
| 21 | 
            +
            @white:                 #fff;
         | 
| 22 | 
            +
             | 
| 23 | 
            +
             | 
| 24 | 
            +
            // Accent colors
         | 
| 25 | 
            +
            // -------------------------
         | 
| 26 | 
            +
            @blue:                  #4183C4;
         | 
| 27 | 
            +
            @blueDark:              #405A6A;
         | 
| 28 | 
            +
            @green:                 #84DE81;
         | 
| 29 | 
            +
            @red:                   #E5322C;
         | 
| 30 | 
            +
            @yellow:                #F4CA00;
         | 
| 31 | 
            +
            @orange:                #FF7D00;
         | 
| 32 | 
            +
            @pink:                  #F44B8C;
         | 
| 33 | 
            +
            @purple:                #405A6A;
         | 
| 34 | 
            +
             | 
| 35 | 
            +
             | 
| 36 | 
            +
            // Scaffolding
         | 
| 37 | 
            +
            // -------------------------
         | 
| 38 | 
            +
            @bodyBackground:        @white;
         | 
| 39 | 
            +
            @textColor:             @grayDark;
         | 
| 40 | 
            +
             | 
| 41 | 
            +
             | 
| 42 | 
            +
            // Links
         | 
| 43 | 
            +
            // -------------------------
         | 
| 44 | 
            +
            @linkColor:             #4183C4;
         | 
| 45 | 
            +
            @linkColorHover:        @linkColor;
         | 
| 46 | 
            +
             | 
| 47 | 
            +
             | 
| 48 | 
            +
            // Typography
         | 
| 49 | 
            +
            // -------------------------
         | 
| 50 | 
            +
            @baseFontSize:          13px;
         | 
| 51 | 
            +
            @baseFontFamily:        "Helvetica Neue", Helvetica, Arial, sans-serif;
         | 
| 52 | 
            +
            @baseLineHeight:        18px;
         | 
| 53 | 
            +
            @altFontFamily:         Georgia, "Times New Roman", Times, serif;
         | 
| 54 | 
            +
             | 
| 55 | 
            +
            @headingsFontFamily:    inherit; // empty to use BS default, @baseFontFamily
         | 
| 56 | 
            +
            @headingsFontWeight:    bold;    // instead of browser default, bold
         | 
| 57 | 
            +
            @headingsColor:         inherit; // empty to use BS default, @textColor
         | 
| 58 | 
            +
             | 
| 59 | 
            +
             | 
| 60 | 
            +
            // Tables
         | 
| 61 | 
            +
            // -------------------------
         | 
| 62 | 
            +
            @tableBackground:                   transparent; // overall background-color
         | 
| 63 | 
            +
            @tableBackgroundAccent:             #f9f9f9; // for striping
         | 
| 64 | 
            +
            @tableBackgroundHover:              #f5f5f5; // for hover
         | 
| 65 | 
            +
            @tableBorder:                       #ddd; // table and cell border
         | 
| 66 | 
            +
             | 
| 67 | 
            +
             | 
| 68 | 
            +
            // Buttons
         | 
| 69 | 
            +
            // -------------------------
         | 
| 70 | 
            +
            @btnBackground:                     @white;
         | 
| 71 | 
            +
            @btnBackgroundHighlight:            darken(@white, 10%);
         | 
| 72 | 
            +
            @btnBorder:                         darken(@white, 20%);
         | 
| 73 | 
            +
             | 
| 74 | 
            +
            @btnPrimaryBackground:              @linkColor;
         | 
| 75 | 
            +
            @btnPrimaryBackgroundHighlight:     spin(@btnPrimaryBackground, 15%);
         | 
| 76 | 
            +
             | 
| 77 | 
            +
            @btnInfoBackground:                 #5bc0de;
         | 
| 78 | 
            +
            @btnInfoBackgroundHighlight:        #2f96b4;
         | 
| 79 | 
            +
             | 
| 80 | 
            +
            @btnSuccessBackground:              #62c462;
         | 
| 81 | 
            +
            @btnSuccessBackgroundHighlight:     #51a351;
         | 
| 82 | 
            +
             | 
| 83 | 
            +
            @btnWarningBackground:              lighten(@orange, 15%);
         | 
| 84 | 
            +
            @btnWarningBackgroundHighlight:     @orange;
         | 
| 85 | 
            +
             | 
| 86 | 
            +
            @btnDangerBackground:               #ee5f5b;
         | 
| 87 | 
            +
            @btnDangerBackgroundHighlight:      #bd362f;
         | 
| 88 | 
            +
             | 
| 89 | 
            +
            @btnInverseBackground:              @gray;
         | 
| 90 | 
            +
            @btnInverseBackgroundHighlight:     @grayDarker;
         | 
| 91 | 
            +
             | 
| 92 | 
            +
             | 
| 93 | 
            +
            // Forms
         | 
| 94 | 
            +
            // -------------------------
         | 
| 95 | 
            +
            @inputBackground:               @white;
         | 
| 96 | 
            +
            @inputBorder:                   #ccc;
         | 
| 97 | 
            +
            @inputDisabledBackground:       @grayLighter;
         | 
| 98 | 
            +
             | 
| 99 | 
            +
             | 
| 100 | 
            +
            // Dropdowns
         | 
| 101 | 
            +
            // -------------------------
         | 
| 102 | 
            +
            @dropdownBackground:            @white;
         | 
| 103 | 
            +
            @dropdownBorder:                rgba(0,0,0,.2);
         | 
| 104 | 
            +
            @dropdownLinkColor:             @grayDark;
         | 
| 105 | 
            +
            @dropdownLinkColorHover:        @white;
         | 
| 106 | 
            +
            @dropdownLinkBackgroundHover:   @linkColor;
         | 
| 107 | 
            +
             | 
| 108 | 
            +
             | 
| 109 | 
            +
             | 
| 110 | 
            +
             | 
| 111 | 
            +
            // COMPONENT VARIABLES
         | 
| 112 | 
            +
            // --------------------------------------------------
         | 
| 113 | 
            +
             | 
| 114 | 
            +
            // Z-index master list
         | 
| 115 | 
            +
            // -------------------------
         | 
| 116 | 
            +
            // Used for a bird's eye view of components dependent on the z-axis
         | 
| 117 | 
            +
            // Try to avoid customizing these :)
         | 
| 118 | 
            +
            @zindexDropdown:          1000;
         | 
| 119 | 
            +
            @zindexPopover:           1010;
         | 
| 120 | 
            +
            @zindexTooltip:           1020;
         | 
| 121 | 
            +
            @zindexFixedNavbar:       1030;
         | 
| 122 | 
            +
            @zindexModalBackdrop:     1040;
         | 
| 123 | 
            +
            @zindexModal:             1050;
         | 
| 124 | 
            +
             | 
| 125 | 
            +
             | 
| 126 | 
            +
            // Sprite icons path
         | 
| 127 | 
            +
            // -------------------------
         | 
| 128 | 
            +
            @iconSpritePath:          "./twitter/bootstrap/glyphicons-halflings.png";
         | 
| 129 | 
            +
            @iconWhiteSpritePath:     "./twitter/bootstrap/glyphicons-halflings-white.png";
         | 
| 130 | 
            +
             | 
| 131 | 
            +
             | 
| 132 | 
            +
            // Input placeholder text color
         | 
| 133 | 
            +
            // -------------------------
         | 
| 134 | 
            +
            @placeholderText:         @grayLight;
         | 
| 135 | 
            +
             | 
| 136 | 
            +
             | 
| 137 | 
            +
            // Hr border color
         | 
| 138 | 
            +
            // -------------------------
         | 
| 139 | 
            +
            @hrBorder:                @grayLighter;
         | 
| 140 | 
            +
             | 
| 141 | 
            +
             | 
| 142 | 
            +
            // Navbar
         | 
| 143 | 
            +
            // -------------------------
         | 
| 144 | 
            +
            @navbarHeight:                    40px;
         | 
| 145 | 
            +
            @navbarBackground:                #EAEAEA;
         | 
| 146 | 
            +
            @navbarBackgroundHighlight:       lighten(@navbarBackground, 15%);
         | 
| 147 | 
            +
             | 
| 148 | 
            +
            @navbarText:                      @grayDarker;
         | 
| 149 | 
            +
            @navbarLinkColor:                 @grayDarker;
         | 
| 150 | 
            +
            @navbarLinkColorHover:            @linkColor;
         | 
| 151 | 
            +
            @navbarLinkColorActive:           @navbarLinkColorHover;
         | 
| 152 | 
            +
            @navbarLinkBackgroundHover:       transparent;
         | 
| 153 | 
            +
            @navbarLinkBackgroundActive:      @navbarBackground;
         | 
| 154 | 
            +
             | 
| 155 | 
            +
            @navbarSearchBackground:          lighten(@navbarBackground, 25%);
         | 
| 156 | 
            +
            @navbarSearchBackgroundFocus:     @white;
         | 
| 157 | 
            +
            @navbarSearchBorder:              darken(@navbarSearchBackground, 30%);
         | 
| 158 | 
            +
            @navbarSearchPlaceholderColor:    #ccc;
         | 
| 159 | 
            +
             | 
| 160 | 
            +
             | 
| 161 | 
            +
            // Hero unit
         | 
| 162 | 
            +
            // -------------------------
         | 
| 163 | 
            +
            @heroUnitBackground:              @grayLighter;
         | 
| 164 | 
            +
            @heroUnitHeadingColor:            inherit;
         | 
| 165 | 
            +
            @heroUnitLeadColor:               inherit;
         | 
| 166 | 
            +
             | 
| 167 | 
            +
             | 
| 168 | 
            +
            // Form states and alerts
         | 
| 169 | 
            +
            // -------------------------
         | 
| 170 | 
            +
            @warningText:             #393939;
         | 
| 171 | 
            +
            @warningBackground:       #F5F3B4;
         | 
| 172 | 
            +
            @warningBorder:           darken(spin(@warningBackground, -10), 3%);
         | 
| 173 | 
            +
             | 
| 174 | 
            +
            @errorText:               @warningText;
         | 
| 175 | 
            +
            @errorBackground:         #FFE9E9;
         | 
| 176 | 
            +
            @errorBorder:             darken(spin(@errorBackground, -10), 3%);
         | 
| 177 | 
            +
             | 
| 178 | 
            +
            @successText:             #333;
         | 
| 179 | 
            +
            @successBackground:       #BEDEBE;
         | 
| 180 | 
            +
            @successBorder:           darken(spin(@successBackground, -10), 5%);
         | 
| 181 | 
            +
             | 
| 182 | 
            +
            @infoText:                #1B3650;
         | 
| 183 | 
            +
            @infoBackground:          #E4F0FF;
         | 
| 184 | 
            +
            @infoBorder:              darken(spin(@infoBackground, -10), 7%);
         | 
| 185 | 
            +
             | 
| 186 | 
            +
             | 
| 187 | 
            +
             | 
| 188 | 
            +
             | 
| 189 | 
            +
            // GRID
         | 
| 190 | 
            +
            // --------------------------------------------------
         | 
| 191 | 
            +
             | 
| 192 | 
            +
            // Default 940px grid
         | 
| 193 | 
            +
            // -------------------------
         | 
| 194 | 
            +
            @gridColumns:             12;
         | 
| 195 | 
            +
            @gridColumnWidth:         60px;
         | 
| 196 | 
            +
            @gridGutterWidth:         20px;
         | 
| 197 | 
            +
            @gridRowWidth:            (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
         | 
| 198 | 
            +
             | 
| 199 | 
            +
             | 
| 200 | 
            +
            // Fluid grid
         | 
| 201 | 
            +
            // -------------------------
         | 
| 202 | 
            +
            @fluidGridColumnWidth:    6.382978723%;
         | 
| 203 | 
            +
            @fluidGridGutterWidth:    2.127659574%;
         |