Skip to content
This repository has been archived by the owner on Dec 11, 2021. It is now read-only.

Variables: Initial pass on button variables #138

Closed
wants to merge 19 commits into from
Closed

Variables: Initial pass on button variables #138

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
dbfc7b9
Variables: Initial pass on button variables
sfrisk Nov 24, 2015
e5caf9e
Buttons: Fixing spacing issue
sfrisk Nov 24, 2015
f6f2b11
Buttons: Base Pass on button sizes and button colors.
sfrisk Dec 15, 2015
55fbd8c
Buttons: Fix typo on h2
sfrisk Dec 15, 2015
d13b067
Linting: Fixed linting and linting errors
sfrisk Jan 19, 2016
c319292
Merge branch '96-buttons-take-two' of https://github.com/sfrisk/css-c…
sfrisk Jan 19, 2016
210edcb
Buttons: Playing around with some spacing and variables
sfrisk Jan 19, 2016
37a638c
Linting: fixed error with js linting
sfrisk Jan 19, 2016
81e6191
Colors: Initial pass on updated palette.
sfrisk Jan 26, 2016
39c0b5b
Merge branch 'palette' into 96-buttons-take-two
sfrisk Jan 26, 2016
4b2f1e9
Buttons: Adding Palette for example
sfrisk Jan 26, 2016
b6e7feb
Buttons: colors updated, styling updated, added disabled styles
sfrisk Feb 9, 2016
f84475b
Buttons: Playing around with shadows
sfrisk Feb 9, 2016
b58b5f2
Buttons: Demos for buttons as links & input
sfrisk Feb 16, 2016
c7acbce
Buttons: Adding Button Bar, Block Buttons
sfrisk Feb 16, 2016
63024ce
Buttons: Making all buttons not rely on cascading styling
sfrisk Mar 1, 2016
edad94c
Buttons: Fixing spacing
sfrisk Mar 1, 2016
dc506a9
Buttons: Color and shadow update
sfrisk Mar 4, 2016
2bfa912
Buttons: disabled cursor is not-allowed
sfrisk Mar 8, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .csslintrc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
"box-sizing": false,
"compatible-vendor-prefixes": false,
"duplicate-background-images": false,
"font-sizes": false,
"import": false,
"important": false,
"outline-none": false,
Expand Down
179 changes: 179 additions & 0 deletions demos/buttons.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,179 @@
<!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-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 Active</h3>
<p>
<button class="btn 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-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-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-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 Active</h3>
<p>
<button class="btn 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-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-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>Default Buttons</h2>
<p>
<button class="btn">Default</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-danger">Danger</button>
</p>

<h3>Default Active</h3>
<p>
<button class="btn active">Default</button>
<button class="btn btn-primary active">Primary</button>
<button class="btn btn-success active">Success</button>
<button class="btn btn-info active">Info</button>
<button class="btn btn-warning active">Warning</button>
<button class="btn btn-danger active">Danger</button>
</p>

<h3>Default Focus</h3>
<p>
<button class="btn focus">Default</button>
<button class="btn btn-primary focus">Primary</button>
<button class="btn btn-success focus">Success</button>
<button class="btn btn-info focus">Info</button>
<button class="btn btn-warning focus">Warning</button>
<button class="btn btn-danger focus">Danger</button>
</p>

<h3>Default Hover</h3>
<p>
<button class="btn hover">Default</button>
<button class="btn btn-primary hover">Primary</button>
<button class="btn btn-success hover">Success</button>
<button class="btn btn-info hover">Info</button>
<button class="btn btn-warning hover">Warning</button>
<button class="btn btn-danger hover">Danger</button>
</p>

<h2>Large Buttons</h2>
<p>
<button class="btn 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 Active</h3>
<p>
<button class="btn 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-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-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>


</body>
</html>
56 changes: 56 additions & 0 deletions scss/atoms/buttons/_buttons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
/*
* ==========================================================================
* Buttons
* ==========================================================================
*/

@import
"dist/chassis",
"mixins";

.btn {
border: 1px solid transparent;
cursor: pointer;
font-family: $ui-btn-font;
font-weight: map-get($ui-btn, font-weight);
margin: map-get($ui-btn, margin);
text-transform: map-get($ui-btn, text-transform);
@include btn-colors($ui-btn-default);
@include btn-size($ui-btn-md);
}

/* Button Colors */

.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-sm {
@include btn-size($ui-btn-sm);
}

.btn-xs {
@include btn-size($ui-btn-xs);
}
45 changes: 45 additions & 0 deletions scss/atoms/buttons/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
@mixin btn-colors($btn-colors) {
color: map-get($btn-colors, color);
background: map-get($btn-colors, background);
border-color: map-get($btn-colors, border);

&:active,
&.active {
@include btn-active($btn-colors);
}

&:focus,
&.focus {
@include btn-focus($btn-colors);
}

&:hover,
&.hover {
@include btn-hover($btn-colors);
}
}

@mixin btn-size($btn-size) {
border-radius: map-get($btn-size, border-radius);
font-size: map-get($btn-size, font-size);
line-height: map-get($btn-size, line-height);
padding: map-get($btn-size, padding);
}

@mixin btn-active($btn-colors) {
color: map-get($btn-colors, color);
background: darken(map-get($btn-colors, background), 30%);
border-color: map-get($btn-colors, border);
}

@mixin btn-focus($btn-colors) {
color: map-get($btn-colors, color);
background: darken(map-get($btn-colors, background), 25%);
border-color: map-get($btn-colors, border);
}

@mixin btn-hover($btn-colors) {
color: map-get($btn-colors, color);
background: darken(map-get($btn-colors, background), 20%);
border-color: map-get($btn-colors, border);
}
3 changes: 2 additions & 1 deletion scss/lint.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,8 @@

@import
"atoms/icons/icons",
"atoms/typography/typography";
"atoms/typography/typography",
"atoms/buttons/buttons";

@import
"views/main";
3 changes: 2 additions & 1 deletion scss/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,8 @@

@import
"atoms/icons/icons",
"atoms/typography/typography";
"atoms/typography/typography",
"atoms/buttons/buttons";

@import
"views/main";
Loading