0ct0pu5/min
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

remove need for :not() btn selector

Browse source 
removal of the need for
.btn:not([class*='btn-'])
by incorporating the 'not' styles into basic buttons, and then modifying the btn- classes to overwrite the base button styles.

i was able to get the library down to 1k gzipped by doing this (though I still haven't brought over all the navbar styling, so it's probably a bit more than that)

this means we can keep btn-small (which i've also renamed to btn-sm) to be consistent with the other class names.
This commit is contained in:
Scott O'Hara 2014-02-17 10:38:19 -05:00
parent bac5b7e514
commit 491360b7ef
2 changed files with 16 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.gitignore vendored
View file

@ -1,3 +1,5 @@
/sass/.DS_Store
/.sass-cache
/sass/.sass-cache/

41
sass/_button.scss
View file

@ -2,8 +2,10 @@
// Mixin to set btn background for inactive, active & hover states
//-------------------------------------------------------------------
@mixin btn-style($bg, $bg-hover, $bg-active) {
@mixin btn-style($bg, $bg-hover, $bg-active, $b-color, $t-color) {
background: $bg;
border-color: $b-color;
color: $t-color;
&:hover {
background: $bg-hover;
@ -15,6 +17,9 @@
}
@if $import-buttons == true {
//-------------------------------------------------------------------
// Button Styles & Classes
@ -25,58 +30,40 @@
// Set Generic <button> and .btn styling.
// use .btn on any element to give it the styling of a button
.btn {
@include btn-style(#fff, #eee, #ddd);
@include btn-style(#fff, #eee, #ddd, #000, #000);
border-radius: 10px; // rounded corners
border: 0;
color: #fff;
border: 2px solid;
cursor: pointer;
display: inline-block; // Enables non-inline-block elements like <div>s to be buttons
font-size: 2.5em;
margin: .3em .7em;
outline: 0; // when the button is focused, don't show an outline
padding: 15px 40px 16px;
padding: 13px 38px 14px;
text-decoration: none;
// to make sure buttons are visible when not paired with a coloring
// class, we give the <button> and .btn a dark border and text color
&:not([class*='btn-']) {
border: 2px solid;
box-shadow: 0 0 0 2px inset;
// We use box shadow here because then we can
// apply a border without changing the element height
color: #000;
padding: 13px 38px 14px;
// keeps relative sizing to buttons w/out borders
&.btn-small {
padding: 8px 14px 9px;
// 2px smaller than the normal padding to account for the border
}
}
}
// Set colors for your buttons, see the button mixin at the top of this
// file to see how the hex colors are allocated
.btn-a {
@include btn-style(#0ae, #09d, #08b);
@include btn-style(#0ae, #09d, #08b, #0ae, #fff);
}
.btn-b {
@include btn-style(#3c5, #2b4, #2a4);
@include btn-style(#3c5, #2b4, #2a4, #3c5, #fff);
}
.btn-c {
@include btn-style(#d33, #c22, #b22);
@include btn-style(#d33, #c22, #b22, #d33, #fff);
}
// Add this class to a <button> or element with a .btn class
// to create a smaller sized button.
.btn-small {
.btn-sm {
border-radius: 7px; /* rounded corners */
font-size: 1em;
padding: 7px 19px 8px;
padding: 8px 14px 9px;
}