mirror of
https://github.com/twbs/bootstrap.git
synced 2024-12-01 13:24:25 +01:00
remove theme.less and split preboot.less to mixins.less and variables.less to isolate customization from function
This commit is contained in:
Mark Otto
parent
2978934bd5
commit
206334ba70
174
bootstrap-1.3.0.css
vendored
174
bootstrap-1.3.0.css
vendored
@ -6,7 +6,7 @@
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Designed and built with all the love in the world @twitter by @mdo and @fat.
|
||||
* Date: Mon Sep 12 19:40:29 PDT 2011
|
||||
* Date: Mon Sep 12 20:05:37 PDT 2011
|
||||
*/
|
||||
/* Reset.less
|
||||
* Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
|
||||
@ -167,108 +167,12 @@ textarea {
|
||||
overflow: auto;
|
||||
vertical-align: top;
|
||||
}
|
||||
/* Preboot.less
|
||||
* Variables and mixins to pre-ignite any new web development project
|
||||
* ------------------------------------------------------------------ */
|
||||
.clearfix {
|
||||
zoom: 1;
|
||||
}
|
||||
.clearfix:before, .clearfix:after {
|
||||
display: table;
|
||||
content: "";
|
||||
zoom: 1;
|
||||
*display: inline;
|
||||
}
|
||||
.clearfix:after {
|
||||
clear: both;
|
||||
}
|
||||
.center-block {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.btn.danger,
|
||||
.alert-message.danger,
|
||||
.btn.danger:hover,
|
||||
.alert-message.danger:hover,
|
||||
.btn.error,
|
||||
.alert-message.error,
|
||||
.btn.error:hover,
|
||||
.alert-message.error:hover,
|
||||
.btn.success,
|
||||
.alert-message.success,
|
||||
.btn.success:hover,
|
||||
.alert-message.success:hover,
|
||||
.btn.info,
|
||||
.alert-message.info,
|
||||
.btn.info:hover,
|
||||
.alert-message.info:hover {
|
||||
color: #ffffff;
|
||||
}
|
||||
.btn.danger,
|
||||
.alert-message.danger,
|
||||
.btn.error,
|
||||
.alert-message.error {
|
||||
background-color: #c43c35;
|
||||
background-repeat: repeat-x;
|
||||
background-image: -khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35));
|
||||
background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35);
|
||||
background-image: -ms-linear-gradient(top, #ee5f5b, #c43c35);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee5f5b), color-stop(100%, #c43c35));
|
||||
background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35);
|
||||
background-image: -o-linear-gradient(top, #ee5f5b, #c43c35);
|
||||
background-image: linear-gradient(top, #ee5f5b, #c43c35);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
||||
border-color: #c43c35 #c43c35 #882a25;
|
||||
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
.btn.success, .alert-message.success {
|
||||
background-color: #57a957;
|
||||
background-repeat: repeat-x;
|
||||
background-image: -khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));
|
||||
background-image: -moz-linear-gradient(top, #62c462, #57a957);
|
||||
background-image: -ms-linear-gradient(top, #62c462, #57a957);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));
|
||||
background-image: -webkit-linear-gradient(top, #62c462, #57a957);
|
||||
background-image: -o-linear-gradient(top, #62c462, #57a957);
|
||||
background-image: linear-gradient(top, #62c462, #57a957);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
||||
border-color: #57a957 #57a957 #3d773d;
|
||||
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
.btn.info, .alert-message.info {
|
||||
background-color: #339bb9;
|
||||
background-repeat: repeat-x;
|
||||
background-image: -khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));
|
||||
background-image: -moz-linear-gradient(top, #5bc0de, #339bb9);
|
||||
background-image: -ms-linear-gradient(top, #5bc0de, #339bb9);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));
|
||||
background-image: -webkit-linear-gradient(top, #5bc0de, #339bb9);
|
||||
background-image: -o-linear-gradient(top, #5bc0de, #339bb9);
|
||||
background-image: linear-gradient(top, #5bc0de, #339bb9);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
||||
border-color: #339bb9 #339bb9 #22697d;
|
||||
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
/* Theme.less
|
||||
* Customizable set of settings and tweaks for Bootstrap development
|
||||
/* Variables.less
|
||||
* Variables to customize the look and feel of Bootstrap
|
||||
* ----------------------------------------------------- */
|
||||
/* Variables.less
|
||||
* Snippets of reusable CSS to develop faster and keep code readable
|
||||
* ----------------------------------------------------------------- */
|
||||
/*
|
||||
Why Theme.less?
|
||||
---------------
|
||||
Theme is a layer that has been added to Bootstrap to simplify the customization process for developers and designers. The goal of Theme is to provide a single point of customization within Bootstrap so you don't have to modify the core files.
|
||||
|
||||
How to use it
|
||||
-------------
|
||||
We repeat the default variables' values here for easy replacement. Simply modify any of these values and recompile Bootstrap for a more customize look and feel.
|
||||
|
||||
Extending it
|
||||
------------
|
||||
Feel free to create and add new variables and mixins here. The goal is to make this your playground and keep the core files intact.
|
||||
*/
|
||||
/*
|
||||
* Scaffolding
|
||||
* Basic and global styles for generating a grid system, structural layout, and page templates
|
||||
@ -1772,6 +1676,72 @@ footer {
|
||||
.page-header h1 {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.btn.danger,
|
||||
.alert-message.danger,
|
||||
.btn.danger:hover,
|
||||
.alert-message.danger:hover,
|
||||
.btn.error,
|
||||
.alert-message.error,
|
||||
.btn.error:hover,
|
||||
.alert-message.error:hover,
|
||||
.btn.success,
|
||||
.alert-message.success,
|
||||
.btn.success:hover,
|
||||
.alert-message.success:hover,
|
||||
.btn.info,
|
||||
.alert-message.info,
|
||||
.btn.info:hover,
|
||||
.alert-message.info:hover {
|
||||
color: #ffffff;
|
||||
}
|
||||
.btn.danger,
|
||||
.alert-message.danger,
|
||||
.btn.error,
|
||||
.alert-message.error {
|
||||
background-color: #c43c35;
|
||||
background-repeat: repeat-x;
|
||||
background-image: -khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35));
|
||||
background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35);
|
||||
background-image: -ms-linear-gradient(top, #ee5f5b, #c43c35);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee5f5b), color-stop(100%, #c43c35));
|
||||
background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35);
|
||||
background-image: -o-linear-gradient(top, #ee5f5b, #c43c35);
|
||||
background-image: linear-gradient(top, #ee5f5b, #c43c35);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
||||
border-color: #c43c35 #c43c35 #882a25;
|
||||
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
.btn.success, .alert-message.success {
|
||||
background-color: #57a957;
|
||||
background-repeat: repeat-x;
|
||||
background-image: -khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));
|
||||
background-image: -moz-linear-gradient(top, #62c462, #57a957);
|
||||
background-image: -ms-linear-gradient(top, #62c462, #57a957);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));
|
||||
background-image: -webkit-linear-gradient(top, #62c462, #57a957);
|
||||
background-image: -o-linear-gradient(top, #62c462, #57a957);
|
||||
background-image: linear-gradient(top, #62c462, #57a957);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
||||
border-color: #57a957 #57a957 #3d773d;
|
||||
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
.btn.info, .alert-message.info {
|
||||
background-color: #339bb9;
|
||||
background-repeat: repeat-x;
|
||||
background-image: -khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));
|
||||
background-image: -moz-linear-gradient(top, #5bc0de, #339bb9);
|
||||
background-image: -ms-linear-gradient(top, #5bc0de, #339bb9);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));
|
||||
background-image: -webkit-linear-gradient(top, #5bc0de, #339bb9);
|
||||
background-image: -o-linear-gradient(top, #5bc0de, #339bb9);
|
||||
background-image: linear-gradient(top, #5bc0de, #339bb9);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
||||
border-color: #339bb9 #339bb9 #22697d;
|
||||
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
|
||||
11
bootstrap-1.3.0.min.css
vendored
11
bootstrap-1.3.0.min.css
vendored
@ -19,13 +19,6 @@ button,input[type="button"],input[type="reset"],input[type="submit"]{cursor:poin
|
||||
input[type="search"]{-webkit-appearance:textfield;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;}
|
||||
input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}
|
||||
textarea{overflow:auto;vertical-align:top;}
|
||||
.clearfix{zoom:1;}.clearfix:before,.clearfix:after{display:table;content:"";zoom:1;*display:inline;}
|
||||
.clearfix:after{clear:both;}
|
||||
.center-block{display:block;margin-left:auto;margin-right:auto;}
|
||||
.btn.danger,.alert-message.danger,.btn.danger:hover,.alert-message.danger:hover,.btn.error,.alert-message.error,.btn.error:hover,.alert-message.error:hover,.btn.success,.alert-message.success,.btn.success:hover,.alert-message.success:hover,.btn.info,.alert-message.info,.btn.info:hover,.alert-message.info:hover{color:#ffffff;}
|
||||
.btn.danger,.alert-message.danger,.btn.error,.alert-message.error{background-color:#c43c35;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35));background-image:-moz-linear-gradient(top, #ee5f5b, #c43c35);background-image:-ms-linear-gradient(top, #ee5f5b, #c43c35);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee5f5b), color-stop(100%, #c43c35));background-image:-webkit-linear-gradient(top, #ee5f5b, #c43c35);background-image:-o-linear-gradient(top, #ee5f5b, #c43c35);background-image:linear-gradient(top, #ee5f5b, #c43c35);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#c43c35 #c43c35 #882a25;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
|
||||
.btn.success,.alert-message.success{background-color:#57a957;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));background-image:-moz-linear-gradient(top, #62c462, #57a957);background-image:-ms-linear-gradient(top, #62c462, #57a957);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));background-image:-webkit-linear-gradient(top, #62c462, #57a957);background-image:-o-linear-gradient(top, #62c462, #57a957);background-image:linear-gradient(top, #62c462, #57a957);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#57a957 #57a957 #3d773d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
|
||||
.btn.info,.alert-message.info{background-color:#339bb9;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));background-image:-moz-linear-gradient(top, #5bc0de, #339bb9);background-image:-ms-linear-gradient(top, #5bc0de, #339bb9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));background-image:-webkit-linear-gradient(top, #5bc0de, #339bb9);background-image:-o-linear-gradient(top, #5bc0de, #339bb9);background-image:linear-gradient(top, #5bc0de, #339bb9);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#339bb9 #339bb9 #22697d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
|
||||
html,body{background-color:#fff;}
|
||||
body{margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:18px;color:#404040;}
|
||||
.container{width:940px;margin-left:auto;margin-right:auto;zoom:1;}.container:before,.container:after{display:table;content:"";zoom:1;*display:inline;}
|
||||
@ -262,6 +255,10 @@ a.menu:after,.dropdown-toggle:after{width:0;height:0;display:inline-block;conten
|
||||
.hero-unit p{font-size:18px;font-weight:200;line-height:27px;}
|
||||
footer{margin-top:17px;padding-top:17px;border-top:1px solid #eee;}
|
||||
.page-header{margin-bottom:17px;border-bottom:1px solid #ddd;-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);-moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);}.page-header h1{margin-bottom:8px;}
|
||||
.btn.danger,.alert-message.danger,.btn.danger:hover,.alert-message.danger:hover,.btn.error,.alert-message.error,.btn.error:hover,.alert-message.error:hover,.btn.success,.alert-message.success,.btn.success:hover,.alert-message.success:hover,.btn.info,.alert-message.info,.btn.info:hover,.alert-message.info:hover{color:#ffffff;}
|
||||
.btn.danger,.alert-message.danger,.btn.error,.alert-message.error{background-color:#c43c35;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35));background-image:-moz-linear-gradient(top, #ee5f5b, #c43c35);background-image:-ms-linear-gradient(top, #ee5f5b, #c43c35);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee5f5b), color-stop(100%, #c43c35));background-image:-webkit-linear-gradient(top, #ee5f5b, #c43c35);background-image:-o-linear-gradient(top, #ee5f5b, #c43c35);background-image:linear-gradient(top, #ee5f5b, #c43c35);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#c43c35 #c43c35 #882a25;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
|
||||
.btn.success,.alert-message.success{background-color:#57a957;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));background-image:-moz-linear-gradient(top, #62c462, #57a957);background-image:-ms-linear-gradient(top, #62c462, #57a957);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));background-image:-webkit-linear-gradient(top, #62c462, #57a957);background-image:-o-linear-gradient(top, #62c462, #57a957);background-image:linear-gradient(top, #62c462, #57a957);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#57a957 #57a957 #3d773d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
|
||||
.btn.info,.alert-message.info{background-color:#339bb9;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));background-image:-moz-linear-gradient(top, #5bc0de, #339bb9);background-image:-ms-linear-gradient(top, #5bc0de, #339bb9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));background-image:-webkit-linear-gradient(top, #5bc0de, #339bb9);background-image:-o-linear-gradient(top, #5bc0de, #339bb9);background-image:linear-gradient(top, #5bc0de, #339bb9);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#339bb9 #339bb9 #22697d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
|
||||
.btn{cursor:pointer;display:inline-block;background-color:#e6e6e6;background-repeat:no-repeat;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));background-image:-webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);background-image:-ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);padding:5px 14px 6px;text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);color:#333;font-size:13px;line-height:normal;border:1px solid #ccc;border-bottom-color:#bbb;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-webkit-transition:0.1s linear all;-moz-transition:0.1s linear all;-ms-transition:0.1s linear all;-o-transition:0.1s linear all;transition:0.1s linear all;}.btn:hover{background-position:0 -15px;color:#333;text-decoration:none;}
|
||||
.btn:focus{outline:1px dotted #666;}
|
||||
.btn.primary{color:#fff;background-color:#0064cd;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));background-image:-moz-linear-gradient(top, #049cdb, #0064cd);background-image:-ms-linear-gradient(top, #049cdb, #0064cd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));background-image:-webkit-linear-gradient(top, #049cdb, #0064cd);background-image:-o-linear-gradient(top, #049cdb, #0064cd);background-image:linear-gradient(top, #049cdb, #0064cd);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#0064cd #0064cd #003f81;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
|
||||
|
||||
8
lib/bootstrap.less
vendored
8
lib/bootstrap.less
vendored
@ -12,9 +12,11 @@
|
||||
// CSS Reset
|
||||
@import "reset.less";
|
||||
|
||||
// Core
|
||||
@import "preboot.less";
|
||||
@import "theme.less";
|
||||
// Core variables and mixins
|
||||
@import "variables.less"; // Modify this for custom colors, font-sizes, etc
|
||||
@import "mixins.less";
|
||||
|
||||
// Grid system and page structure
|
||||
@import "scaffolding.less";
|
||||
|
||||
// Styled patterns and elements
|
||||
|
||||
@ -1,63 +1,10 @@
|
||||
/* Preboot.less
|
||||
* Variables and mixins to pre-ignite any new web development project
|
||||
* ------------------------------------------------------------------ */
|
||||
/* Variables.less
|
||||
* Snippets of reusable CSS to develop faster and keep code readable
|
||||
* ----------------------------------------------------------------- */
|
||||
|
||||
|
||||
// VARIABLES
|
||||
// ---------
|
||||
|
||||
// Links
|
||||
@linkColor: #0069d6;
|
||||
@linkColorHover: darken(@linkColor, 15);
|
||||
|
||||
// Grays
|
||||
@black: #000;
|
||||
@grayDark: lighten(@black, 25%);
|
||||
@gray: lighten(@black, 50%);
|
||||
@grayLight: lighten(@black, 75%);
|
||||
@grayLighter: lighten(@black, 90%);
|
||||
@white: #fff;
|
||||
|
||||
// Accent Colors
|
||||
@blue: #049CDB;
|
||||
@blueDark: #0064CD;
|
||||
@green: #46a546;
|
||||
@red: #9d261d;
|
||||
@yellow: #ffc40d;
|
||||
@orange: #f89406;
|
||||
@pink: #c3325f;
|
||||
@purple: #7a43b6;
|
||||
|
||||
// Baseline grid
|
||||
@basefont: 13px;
|
||||
@baseline: 18px;
|
||||
|
||||
// Griditude
|
||||
@gridColumns: 16;
|
||||
@gridColumnWidth: 40px;
|
||||
@gridGutterWidth: 20px;
|
||||
@extraSpace: (@gridGutterWidth * 2); // For our grid calculations
|
||||
@siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
|
||||
|
||||
// Color Scheme
|
||||
// Use this to roll your own color schemes if you like (unused by Bootstrap by default)
|
||||
@baseColor: @blue; // Set a base color
|
||||
@complement: spin(@baseColor, 180); // Determine a complementary color
|
||||
@split1: spin(@baseColor, 158); // Split complements
|
||||
@split2: spin(@baseColor, -158);
|
||||
@triad1: spin(@baseColor, 135); // Triads colors
|
||||
@triad2: spin(@baseColor, -135);
|
||||
@tetra1: spin(@baseColor, 90); // Tetra colors
|
||||
@tetra2: spin(@baseColor, -90);
|
||||
@analog1: spin(@baseColor, 22); // Analogs colors
|
||||
@analog2: spin(@baseColor, -22);
|
||||
|
||||
|
||||
// MIXINS
|
||||
// ------
|
||||
|
||||
// Clearfix for clearing floats like a boss h5bp.com/q
|
||||
.clearfix {
|
||||
.clearfix() {
|
||||
zoom: 1;
|
||||
&:before,
|
||||
&:after {
|
||||
@ -72,7 +19,7 @@
|
||||
}
|
||||
|
||||
// Center-align a block level element
|
||||
.center-block {
|
||||
.center-block() {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
@ -207,34 +154,6 @@
|
||||
border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%);
|
||||
border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
|
||||
}
|
||||
// Shared colors for buttons and alerts
|
||||
.btn,
|
||||
.alert-message {
|
||||
// Set text color
|
||||
&.danger,
|
||||
&.danger:hover,
|
||||
&.error,
|
||||
&.error:hover,
|
||||
&.success,
|
||||
&.success:hover,
|
||||
&.info,
|
||||
&.info:hover {
|
||||
color: @white
|
||||
}
|
||||
// Danger and error appear as red
|
||||
&.danger,
|
||||
&.error {
|
||||
.gradientBar(#ee5f5b, #c43c35);
|
||||
}
|
||||
// Success appears as green
|
||||
&.success {
|
||||
.gradientBar(#62c462, #57a957);
|
||||
}
|
||||
// Info appears as a neutral blue
|
||||
&.info {
|
||||
.gradientBar(#5bc0de, #339bb9);
|
||||
}
|
||||
}
|
||||
|
||||
// Gradients
|
||||
#gradient {
|
||||
@ -488,6 +488,35 @@ footer {
|
||||
// BUTTON STYLES
|
||||
// -------------
|
||||
|
||||
// Shared colors for buttons and alerts
|
||||
.btn,
|
||||
.alert-message {
|
||||
// Set text color
|
||||
&.danger,
|
||||
&.danger:hover,
|
||||
&.error,
|
||||
&.error:hover,
|
||||
&.success,
|
||||
&.success:hover,
|
||||
&.info,
|
||||
&.info:hover {
|
||||
color: @white
|
||||
}
|
||||
// Danger and error appear as red
|
||||
&.danger,
|
||||
&.error {
|
||||
.gradientBar(#ee5f5b, #c43c35);
|
||||
}
|
||||
// Success appears as green
|
||||
&.success {
|
||||
.gradientBar(#62c462, #57a957);
|
||||
}
|
||||
// Info appears as a neutral blue
|
||||
&.info {
|
||||
.gradientBar(#5bc0de, #339bb9);
|
||||
}
|
||||
}
|
||||
|
||||
// Base .btn styles
|
||||
.btn {
|
||||
// Button Base
|
||||
|
||||
@ -75,6 +75,7 @@ a {
|
||||
|
||||
// GRID SYSTEM
|
||||
// -----------
|
||||
// To customize the grid system, bring up the variables.less file and change the column count, size, and gutter there
|
||||
|
||||
.row {
|
||||
.clearfix();
|
||||
|
||||
@ -1,59 +0,0 @@
|
||||
/* Theme.less
|
||||
* Customizable set of settings and tweaks for Bootstrap development
|
||||
* ----------------------------------------------------------------- */
|
||||
|
||||
|
||||
/*
|
||||
Why Theme.less?
|
||||
---------------
|
||||
Theme is a layer that has been added to Bootstrap to simplify the customization process for developers and designers. The goal of Theme is to provide a single point of customization within Bootstrap so you don't have to modify the core files.
|
||||
|
||||
How to use it
|
||||
-------------
|
||||
We repeat the default variables' values here for easy replacement. Simply modify any of these values and recompile Bootstrap for a more customize look and feel.
|
||||
|
||||
Extending it
|
||||
------------
|
||||
Feel free to create and add new variables and mixins here. The goal is to make this your playground and keep the core files intact.
|
||||
*/
|
||||
|
||||
|
||||
// Font face, size, weight, and more
|
||||
// ---------------------------------
|
||||
@baseFontSize: 13px; // base font-size
|
||||
@baseLineHeight: 18px; // base line-height of elements (incrementally increases with font-size)
|
||||
|
||||
|
||||
// Link color
|
||||
// ----------
|
||||
@linkColor: #0069d6;
|
||||
// No need to specify a link hover color because we'll automatically do that for you in Preboot
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// COMING SOON...
|
||||
// --------------
|
||||
|
||||
@baseFontFace: "Helvetica";
|
||||
|
||||
|
||||
// Primary button color
|
||||
// -----------------------------
|
||||
@primaryButtonColor: #333;
|
||||
|
||||
|
||||
// Grid system
|
||||
// ---------------------------------
|
||||
// Griditude
|
||||
@gridColumns: 16;
|
||||
@gridColumnWidth: 40px;
|
||||
@gridGutterWidth: 20px;
|
||||
|
||||
|
||||
//
|
||||
// TODO:
|
||||
// - add ability to set app/site-wide base font-face (need better variables: @baseFontSize, @baseFontFace, @baseLineHeight, etc)
|
||||
// - add new docs section for Theme.less
|
||||
//
|
||||
60
lib/variables.less
Normal file
60
lib/variables.less
Normal file
@ -0,0 +1,60 @@
|
||||
/* Variables.less
|
||||
* Variables to customize the look and feel of Bootstrap
|
||||
* ----------------------------------------------------- */
|
||||
|
||||
|
||||
// Links
|
||||
@linkColor: #0069d6;
|
||||
@linkColorHover: darken(@linkColor, 15);
|
||||
|
||||
// Grays
|
||||
@black: #000;
|
||||
@grayDark: lighten(@black, 25%);
|
||||
@gray: lighten(@black, 50%);
|
||||
@grayLight: lighten(@black, 75%);
|
||||
@grayLighter: lighten(@black, 90%);
|
||||
@white: #fff;
|
||||
|
||||
// Accent Colors
|
||||
@blue: #049CDB;
|
||||
@blueDark: #0064CD;
|
||||
@green: #46a546;
|
||||
@red: #9d261d;
|
||||
@yellow: #ffc40d;
|
||||
@orange: #f89406;
|
||||
@pink: #c3325f;
|
||||
@purple: #7a43b6;
|
||||
|
||||
// Baseline grid
|
||||
@basefont: 13px;
|
||||
@baseline: 18px;
|
||||
|
||||
// Griditude
|
||||
// Modify the grid styles in mixins.less
|
||||
@gridColumns: 16;
|
||||
@gridColumnWidth: 40px;
|
||||
@gridGutterWidth: 20px;
|
||||
@extraSpace: (@gridGutterWidth * 2); // For our grid calculations
|
||||
@siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
|
||||
|
||||
// Color Scheme
|
||||
// Use this to roll your own color schemes if you like (unused by Bootstrap by default)
|
||||
@baseColor: @blue; // Set a base color
|
||||
@complement: spin(@baseColor, 180); // Determine a complementary color
|
||||
@split1: spin(@baseColor, 158); // Split complements
|
||||
@split2: spin(@baseColor, -158);
|
||||
@triad1: spin(@baseColor, 135); // Triads colors
|
||||
@triad2: spin(@baseColor, -135);
|
||||
@tetra1: spin(@baseColor, 90); // Tetra colors
|
||||
@tetra2: spin(@baseColor, -90);
|
||||
@analog1: spin(@baseColor, 22); // Analogs colors
|
||||
@analog2: spin(@baseColor, -22);
|
||||
|
||||
|
||||
|
||||
// More variables coming soon:
|
||||
// - @basefont to @baseFontSize
|
||||
// - @baseline to @baseLineHeight
|
||||
// - @baseFontFamily
|
||||
// - @primaryButtonColor
|
||||
// - anything else? File an issue on GitHub
|
||||
Loading…
Reference in New Issue
Block a user