Permalink
Browse files

Buttons: Base Styling of Button Classes

Fixes gh-96
Closes gh-138
  • Loading branch information...
sfrisk committed Nov 24, 2015
1 parent 2958621 commit 4d3769f40d2ce7c12399e3984407229b7593b681
View
@@ -4,6 +4,8 @@
"box-sizing": false,
"compatible-vendor-prefixes": false,
"duplicate-background-images": false,
"fallback-colors": false,
"font-sizes": false,
"import": false,
"important": false,
"outline-none": false,
View
@@ -0,0 +1,259 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Chassis - Typography</title>
<meta name="description" content="Button skeleton for styling">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../dist/css/chassis.css">
<link rel="stylesheet" href="demos.css">
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700,400italic,700italic" rel="stylesheet">
</head>
<body>
<h1>CSS Chassis</h1>
<h2>Extra Small Buttons</h2>
<p>
<button class="btn btn-default btn-xs">Default</button>
<button class="btn btn-primary btn-xs">Primary</button>
<button class="btn btn-success btn-xs">Success</button>
<button class="btn btn-info btn-xs">Info</button>
<button class="btn btn-warning btn-xs">Warning</button>
<button class="btn btn-danger btn-xs">Danger</button>
</p>
<h3>Extra Small Disabled</h3>
<p>
<button disabled="disabled" class="btn btn-default btn-xs">Default</button>
<button disabled="disabled" class="btn btn-primary btn-xs">Primary</button>
<button disabled="disabled" class="btn btn-success btn-xs">Success</button>
<button disabled="disabled" class="btn btn-info btn-xs">Info</button>
<button disabled="disabled" class="btn btn-warning btn-xs">Warning</button>
<button disabled="disabled" class="btn btn-danger btn-xs">Danger</button>
</p>
<h3>Extra Small Active</h3>
<p>
<button class="btn btn-default btn-xs active">Default</button>
<button class="btn btn-primary btn-xs active">Primary</button>
<button class="btn btn-success btn-xs active">Success</button>
<button class="btn btn-info btn-xs active">Info</button>
<button class="btn btn-warning btn-xs active">Warning</button>
<button class="btn btn-danger btn-xs active">Danger</button>
</p>
<h3>Extra Small Focus</h3>
<p>
<button class="btn btn-default btn-xs focus">Default</button>
<button class="btn btn-primary btn-xs focus">Primary</button>
<button class="btn btn-success btn-xs focus">Success</button>
<button class="btn btn-info btn-xs focus">Info</button>
<button class="btn btn-warning btn-xs focus">Warning</button>
<button class="btn btn-danger btn-xs focus">Danger</button>
</p>
<h3>Extra Small Hover</h3>
<p>
<button class="btn btn-default btn-xs hover">Default</button>
<button class="btn btn-primary btn-xs hover">Primary</button>
<button class="btn btn-success btn-xs hover">Success</button>
<button class="btn btn-info btn-xs hover">Info</button>
<button class="btn btn-warning btn-xs hover">Warning</button>
<button class="btn btn-danger btn-xs hover">Danger</button>
</p>
<h2>Small Buttons</h2>
<p>
<button class="btn btn-default btn-sm">Default</button>
<button class="btn btn-primary btn-sm">Primary</button>
<button class="btn btn-success btn-sm">Success</button>
<button class="btn btn-info btn-sm">Info</button>
<button class="btn btn-warning btn-sm">Warning</button>
<button class="btn btn-danger btn-sm">Danger</button>
</p>
<h3>Small Disabled</h3>
<p>
<button disabled="disabled" class="btn btn-default btn-sm">Default</button>
<button disabled="disabled" class="btn btn-primary btn-sm">Primary</button>
<button disabled="disabled" class="btn btn-success btn-sm">Success</button>
<button disabled="disabled" class="btn btn-info btn-sm">Info</button>
<button disabled="disabled" class="btn btn-warning btn-sm">Warning</button>
<button disabled="disabled" class="btn btn-danger btn-sm">Danger</button>
</p>
<h3>Small Active</h3>
<p>
<button class="btn btn-default btn-sm active">Default</button>
<button class="btn btn-primary btn-sm active">Primary</button>
<button class="btn btn-success btn-sm active">Success</button>
<button class="btn btn-info btn-sm active">Info</button>
<button class="btn btn-warning btn-sm active">Warning</button>
<button class="btn btn-danger btn-sm active">Danger</button>
</p>
<h3>Small Focus</h3>
<p>
<button class="btn btn-default btn-sm focus">Default</button>
<button class="btn btn-primary btn-sm focus">Primary</button>
<button class="btn btn-success btn-sm focus">Success</button>
<button class="btn btn-info btn-sm focus">Info</button>
<button class="btn btn-warning btn-sm focus">Warning</button>
<button class="btn btn-danger btn-sm focus">Danger</button>
</p>
<h3>Small Hover</h3>
<p>
<button class="btn btn-default btn-sm hover">Default</button>
<button class="btn btn-primary btn-sm hover">Primary</button>
<button class="btn btn-success btn-sm hover">Success</button>
<button class="btn btn-info btn-sm hover">Info</button>
<button class="btn btn-warning btn-sm hover">Warning</button>
<button class="btn btn-danger btn-sm hover">Danger</button>
</p>
<h2>Medium Buttons</h2>
<p>
<button class="btn btn-default btn-md">Default</button>
<button class="btn btn-primary btn-md">Primary</button>
<button class="btn btn-success btn-md">Success</button>
<button class="btn btn-info btn-md">Info</button>
<button class="btn btn-warning btn-md">Warning</button>
<button class="btn btn-danger btn-md">Danger</button>
</p>
<h3>Medium Disabled</h3>
<p>
<button disabled="disabled" class="btn btn-default btn-md">Default</button>
<button disabled="disabled" class="btn btn-primary btn-md">Primary</button>
<button disabled="disabled" class="btn btn-success btn-md">Success</button>
<button disabled="disabled" class="btn btn-info btn-md">Info</button>
<button disabled="disabled" class="btn btn-warning btn-md">Warning</button>
<button disabled="disabled" class="btn btn-danger btn-md">Danger</button>
</p>
<h3>Medium Active</h3>
<p>
<button class="btn btn-default btn-md active">Default</button>
<button class="btn btn-primary btn-md active">Primary</button>
<button class="btn btn-success btn-md active">Success</button>
<button class="btn btn-info btn-md active">Info</button>
<button class="btn btn-warning btn-md active">Warning</button>
<button class="btn btn-danger btn-md active">Danger</button>
</p>
<h3>Medium Focus</h3>
<p>
<button class="btn btn-default btn-md focus">Default</button>
<button class="btn btn-primary btn-md focus">Primary</button>
<button class="btn btn-success btn-md focus">Success</button>
<button class="btn btn-info btn-md focus">Info</button>
<button class="btn btn-warning btn-md focus">Warning</button>
<button class="btn btn-danger btn-md focus">Danger</button>
</p>
<h3>Medium Hover</h3>
<p>
<button class="btn btn-default btn-md hover">Default</button>
<button class="btn btn-primary btn-md hover">Primary</button>
<button class="btn btn-success btn-md hover">Success</button>
<button class="btn btn-info btn-md hover">Info</button>
<button class="btn btn-warning btn-md hover">Warning</button>
<button class="btn btn-danger btn-md hover">Danger</button>
</p>
<h2>Large Buttons</h2>
<p>
<button class="btn btn-default btn-lg">Default</button>
<button class="btn btn-primary btn-lg">Primary</button>
<button class="btn btn-success btn-lg">Success</button>
<button class="btn btn-info btn-lg">Info</button>
<button class="btn btn-warning btn-lg">Warning</button>
<button class="btn btn-danger btn-lg">Danger</button>
</p>
<h3>Large Disabled</h3>
<p>
<button disabled="disabled" class="btn btn-default btn-lg">Default</button>
<button disabled="disabled" class="btn btn-primary btn-lg">Primary</button>
<button disabled="disabled" class="btn btn-success btn-lg">Success</button>
<button disabled="disabled" class="btn btn-info btn-lg">Info</button>
<button disabled="disabled" class="btn btn-warning btn-lg">Warning</button>
<button disabled="disabled" class="btn btn-danger btn-lg">Danger</button>
</p>
<h3>Large Active</h3>
<p>
<button class="btn btn-default btn-lg active">Default</button>
<button class="btn btn-primary btn-lg active">Primary</button>
<button class="btn btn-success btn-lg active">Success</button>
<button class="btn btn-info btn-lg active">Info</button>
<button class="btn btn-warning btn-lg active">Warning</button>
<button class="btn btn-danger btn-lg active">Danger</button>
</p>
<h3>Large Focus</h3>
<p>
<button class="btn btn-default btn-lg focus">Default</button>
<button class="btn btn-primary btn-lg focus">Primary</button>
<button class="btn btn-success btn-lg focus">Success</button>
<button class="btn btn-info btn-lg focus">Info</button>
<button class="btn btn-warning btn-lg focus">Warning</button>
<button class="btn btn-danger btn-lg focus">Danger</button>
</p>
<h3>Large Hover</h3>
<p>
<button class="btn btn-default btn-lg hover">Default</button>
<button class="btn btn-primary btn-lg hover">Primary</button>
<button class="btn btn-success btn-lg hover">Success</button>
<button class="btn btn-info btn-lg hover">Info</button>
<button class="btn btn-warning btn-lg hover">Warning</button>
<button class="btn btn-danger btn-lg hover">Danger</button>
</p>
<h3>Anchor Links as Buttons</h3>
<p>
<a href="#" class="btn btn-default btn-md" role="button">Default</a>
<a href="#" class="btn btn-primary btn-md" role="button">Primary</a>
<a href="#" class="btn btn-success btn-md" role="button">Success</a>
<a href="#" class="btn btn-info btn-md" role="button">Info</a>
<a href="#" class="btn btn-warning btn-md" role="button">Warning</a>
<a href="#" class="btn btn-danger btn-md" role="button">Danger</a>
</p>
<h3>Input[type=submit]</h3>
<p>
<input type="submit" class="btn btn-default btn-md" value="Default">
<input type="submit" class="btn btn-primary btn-md" value="Primary">
<input type="submit" class="btn btn-success btn-md" value="Success">
<input type="submit" class="btn btn-info btn-md" value="Info">
<input type="submit" class="btn btn-warning btn-md" value="Warning">
<input type="submit" class="btn btn-danger btn-md" value="Danger">
</p>
<h2>Block Buttons</h2>
<p>
<button class="btn btn-default btn-lg btn-block">Default</button>
<button class="btn btn-primary btn-lg btn-block">Primary</button>
<button class="btn btn-success btn-lg btn-block">Success</button>
<button class="btn btn-info btn-lg btn-block">Info</button>
<button class="btn btn-warning btn-lg btn-block">Warning</button>
<button class="btn btn-danger btn-lg btn-block">Danger</button>
</p>
<h2>Button Bar</h2>
<p class="btn-group">
<button class="btn-group--btn btn-default btn-lg">Default</button>
<button class="btn-group--btn btn-primary btn-lg">Primary</button>
<button class="btn-group--btn btn-success btn-lg">Success</button>
<button class="btn-group--btn btn-info btn-lg">Info</button>
<button class="btn-group--btn btn-warning btn-lg">Warning</button>
<button class="btn-group--btn btn-danger btn-lg">Danger</button>
</p>
</body>
</html>
View
@@ -1,5 +1,5 @@
body {
max-width: 700px;
max-width: 900px;
margin: 3em auto;
padding: 0 1em;
}
@@ -0,0 +1,13 @@
/*
* ==========================================================================
* Misc. Sass Functions to ease calculations
* ==========================================================================
*/
@function map-deep-get($map, $keys...) {
$value: $map;
@each $key in $keys {
$value: map-get($value, $key);
}
@return $value;
}
@@ -0,0 +1,87 @@
/*
* ==========================================================================
* Buttons
* ==========================================================================
*/
@import
"dist/chassis",
"mixins";
.btn-group {
position: relative;
display: inline-block;
vertical-align: middle;
&--btn {
float: left;
@include btn(0);
}
&--btn:first-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
&--btn:last-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
&--btn:not(:first-child):not(:last-child) {
border-radius: 0;
}
}
.btn-block {
display: block;
width: 100%;
}
.btn {
@include btn( map-get($ui-btn, margin));
}
/* Button Colors */
.btn-default {
@include btn-colors($ui-btn-default);
}
.btn-primary {
@include btn-colors($ui-btn-primary);
}
.btn-success {
@include btn-colors($ui-btn-success);
}
.btn-info {
@include btn-colors($ui-btn-info);
}
.btn-warning {
@include btn-colors($ui-btn-warning);
}
.btn-danger {
@include btn-colors($ui-btn-danger );
}
/* Button Sizes */
.btn-lg {
@include btn-size($ui-btn-lg);
}
.btn-md {
@include btn-size($ui-btn-md);
}
.btn-sm {
@include btn-size($ui-btn-sm);
}
.btn-xs {
@include btn-size($ui-btn-xs);
}
Oops, something went wrong.

0 comments on commit 4d3769f

Please sign in to comment.