Skip to content

Commit

Permalink
add buttons class helper..
Browse files Browse the repository at this point in the history
  • Loading branch information
nandomoreirame committed Oct 7, 2015
1 parent 3095540 commit cc565f2
Show file tree
Hide file tree
Showing 8 changed files with 536 additions and 25 deletions.
4 changes: 2 additions & 2 deletions bower.json
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
{
"name": "scss-sos",
"version": "1.1.0",
"version": "1.2.0",
"homepage": "https://github.com/nandomoreirame/scss-sos",
"authors": [
"Fernando Moreira <nandomoreira.me@gmail.com>"
],
"description": "CSS helpers using SASS preprocessor",
"main": "",
"main": "helpers.scss",
"moduleType": [],
"keywords": [
"scss",
Expand Down
46 changes: 26 additions & 20 deletions helpers.css
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/*!
* SASS Helpers - v1.1.0
* SASS Helpers - v1.2.0
* @author: Fernando Moreira <nandomoreira.me@gmail.com>
*/
.cfix:before, .clearfix:before, .cfix:after, .clearfix:after { content: " "; display: table; }
Expand Down Expand Up @@ -68,9 +68,9 @@

.va-bottom { vertical-align: bottom !important; }

.shadow { -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); }
.shadow { -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); }

.no-shadow { -webkit-box-shadow: none; box-shadow: none; }
.no-shadow { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }

.ovf-auto { overflow: auto !important; }

Expand Down Expand Up @@ -282,39 +282,39 @@

.no-bdr-t { border-top: none !important; }

.bdrz, .rounded { border-radius: 4px; }
.bdrz, .rounded { -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }

.bdrz-lg { border-radius: 6px; }
.bdrz-lg { -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; }

.bdrz-sm { border-radius: 2px; }
.bdrz-sm { -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; }

.bdrz-t { border-top-right-radius: 4px; border-top-left-radius: 4px; }
.bdrz-t { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; border-top-left-radius: 4px; -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; border-top-right-radius: 4px; }

.bdrz-t-lg { border-top-right-radius: 6px; border-top-left-radius: 6px; }
.bdrz-t-lg { -moz-border-radius-topleft: 6px; -webkit-border-top-left-radius: 6px; border-top-left-radius: 6px; -moz-border-radius-topright: 6px; -webkit-border-top-right-radius: 6px; border-top-right-radius: 6px; }

.bdrz-t-sm { border-top-right-radius: 2px; border-top-left-radius: 2px; }
.bdrz-t-sm { -moz-border-radius-topleft: 2px; -webkit-border-top-left-radius: 2px; border-top-left-radius: 2px; -moz-border-radius-topright: 2px; -webkit-border-top-right-radius: 2px; border-top-right-radius: 2px; }

.bdrz-l { border-bottom-left-radius: 4px; border-top-left-radius: 4px; }
.bdrz-l { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; border-top-left-radius: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; }

.bdrz-l-lg { border-bottom-left-radius: 6px; border-top-left-radius: 6px; }
.bdrz-l-lg { -moz-border-radius-topleft: 6px; -webkit-border-top-left-radius: 6px; border-top-left-radius: 6px; -moz-border-radius-bottomleft: 6px; -webkit-border-bottom-left-radius: 6px; border-bottom-left-radius: 6px; }

.bdrz-l-sm { border-bottom-left-radius: 2px; border-top-left-radius: 2px; }
.bdrz-l-sm { -moz-border-radius-topleft: 2px; -webkit-border-top-left-radius: 2px; border-top-left-radius: 2px; -moz-border-radius-bottomleft: 2px; -webkit-border-bottom-left-radius: 2px; border-bottom-left-radius: 2px; }

.bdrz-r { border-bottom-right-radius: 4px; border-top-right-radius: 4px; }
.bdrz-r { -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; border-top-right-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; }

.bdrz-r-lg { border-bottom-right-radius: 6px; border-top-right-radius: 6px; }
.bdrz-r-lg { -moz-border-radius-topright: 6px; -webkit-border-top-right-radius: 6px; border-top-right-radius: 6px; -moz-border-radius-bottomright: 6px; -webkit-border-bottom-right-radius: 6px; border-bottom-right-radius: 6px; }

.bdrz-r-sm { border-bottom-right-radius: 2px; border-top-right-radius: 2px; }
.bdrz-r-sm { -moz-border-radius-topright: 2px; -webkit-border-top-right-radius: 2px; border-top-right-radius: 2px; -moz-border-radius-bottomright: 2px; -webkit-border-bottom-right-radius: 2px; border-bottom-right-radius: 2px; }

.bdrz-b { border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; }
.bdrz-b { -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; }

.bdrz-b-lg { border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; }
.bdrz-b-lg { -moz-border-radius-bottomleft: 6px; -webkit-border-bottom-left-radius: 6px; border-bottom-left-radius: 6px; -moz-border-radius-bottomright: 6px; -webkit-border-bottom-right-radius: 6px; border-bottom-right-radius: 6px; }

.bdrz-b-sm { border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; }
.bdrz-b-sm { -moz-border-radius-bottomleft: 2px; -webkit-border-bottom-left-radius: 2px; border-bottom-left-radius: 2px; -moz-border-radius-bottomright: 2px; -webkit-border-bottom-right-radius: 2px; border-bottom-right-radius: 2px; }

.dot, .bdrz-50 { border-radius: 50%; }
.dot, .bdrz-50 { -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; }

.unround, .no-bdrz { border-radius: 0; }
.unround, .no-bdrz { -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; }

/*===============================================
= Helpers class for lists =
Expand Down Expand Up @@ -350,3 +350,9 @@
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }

.sr-only-focusable:active, .sr-only-focusable:focus { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; }

/*=======================================
= Buttons helpers =
=======================================*/
.button { -webkit-appearance: none; -moz-appearance: none; border-radius: 0; border-style: solid; border-width: 0; cursor: pointer; font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; font-weight: 500; line-height: normal; margin: 0 0 10px; position: relative; text-align: center; text-decoration: none; display: inline-block; padding: 16px 30px; font-size: 1rem; background-color: #1791A9; border-color: #158297; color: #fff; -moz-transition: background-color 0.1s linear; -o-transition: background-color 0.1s linear; -webkit-transition: background-color 0.1s linear; transition: background-color 0.1s linear; }
.button:hover, .button:focus { background-color: #147e93; }
31 changes: 31 additions & 0 deletions scss/_buttons.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
/*=======================================
= Buttons helpers =
=======================================*/

.button {
-webkit-appearance: none;
-moz-appearance: none;
border-radius: 0;
border-style: solid;
border-width: 0;
cursor: pointer;
font-family: $font-family;
font-weight: $weight-normal;
line-height: normal;
margin: 0 0 $spacer;
position: relative;
text-align: center;
text-decoration: none;
display: inline-block;
padding: $button-spacer-y $button-spacer-x;
font-size: 1rem;
background-color: $button-color;
border-color: darken($button-color, 4%);
color: $white-color;
@include transition(background-color .1s linear);

&:hover,
&:focus {
background-color: darken($button-color, 5%);
}
}
9 changes: 8 additions & 1 deletion scss/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,17 @@
//= Variables =
//===============================

// fonts
//
$font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif !default;

// Colors
//
$white-color : #fff !default;
$silver-color : #eee !default;
$black-color : #000 !default;
$border-color : $silver-color !default;
$button-color : #1791A9 !default;

// font weight
//
Expand All @@ -24,4 +29,6 @@ $border-radius-large : 6px !default;

// Spacer
//
$spacer: 10px !default;
$spacer: 10px !default;
$button-spacer-x: 30px !default;
$button-spacer-y: 16px !default;
8 changes: 6 additions & 2 deletions scss/helpers.scss
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
/*!
* SASS Helpers - v1.1.0
* SASS Helpers - v1.2.0
* @author: Fernando Moreira <nandomoreira.me@gmail.com>
*/

@import "variables";
@import "clearfix";
@import "mixins";

@import "compass/css3";

@import "others";
@import "type";
@import "margins";
Expand All @@ -15,4 +17,6 @@
@import "type";
@import "lists";
@import "background";
@import "accessibility";
@import "accessibility";

@import "buttons";
24 changes: 24 additions & 0 deletions tests/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>Playground</title>
<link type="text/css" href="normalize.css" rel="stylesheet">
<link type="text/css" href="../helpers.css" rel="stylesheet">
<link type="text/css" href="tests.css" rel="stylesheet">
</head>
<body>
<main>
<div class="container">
<h1>Playground</h1>
<a href="#" class="button">Anchor Button</a>
<button>Button</button>
<input type="button" class="button" value="input Button">
<div role="button" class="button">div role="button"</div>
</div>
</main>
</body>
</html>
Loading

0 comments on commit cc565f2

Please sign in to comment.