GIPainter-button 0.1.1 → 0.2.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/assets/stylesheets/Base/_base.scss +53 -0
- data/assets/stylesheets/Base/_color.scss +21 -0
- data/assets/stylesheets/Base/_core.scss +3 -0
- data/assets/stylesheets/Base/_size.scss +23 -0
- data/assets/stylesheets/Mixins/_color.scss +66 -0
- data/assets/stylesheets/Mixins/_size.scss +6 -0
- data/assets/stylesheets/Variables/_button.scss +18 -0
- data/assets/stylesheets/_GIPainter-button.scss +14 -14
- data/lib/GIPainter-button/version.rb +1 -1
- data/lib/GIPainter-button.rb +5 -5
- data/templates/project/manifest.rb +6 -6
- metadata +9 -3
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 2c1ebff47af33a9c27a0d4243e172d7dac905a02
|
|
4
|
+
data.tar.gz: ff63b78c607e5a97ac7b741dbac9d6ea21386780
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: aa214d9ef38517017b09a7de568c5fa8d9567bb457e858601ed0cb9133532a6c7885b4a5aaf76e5acf28e1557be14b7f1c0777ba49d2f2af457c44dcb1e0add2
|
|
7
|
+
data.tar.gz: e4d7a99cd79b621bf7aa077e643385ea91ecde13b23de06c220a105473873f47cb4c9ecbd025733908088c7af83c0dc2c6def250d1e197258165ae45e9de8877
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
//-----------------------------------
|
|
2
|
+
// BUTTONS BASE
|
|
3
|
+
//-----------------------------------
|
|
4
|
+
|
|
5
|
+
////
|
|
6
|
+
/// @access private
|
|
7
|
+
/// @group Buttons
|
|
8
|
+
/// @type string
|
|
9
|
+
////
|
|
10
|
+
|
|
11
|
+
.btn {
|
|
12
|
+
display: inline-block;
|
|
13
|
+
font-weight: $btn-font-weight;
|
|
14
|
+
@include line-height($font-size-base);
|
|
15
|
+
text-align: center;
|
|
16
|
+
white-space: nowrap;
|
|
17
|
+
vertical-align: middle;
|
|
18
|
+
user-select: none;
|
|
19
|
+
border: $btn-border-width solid transparent;
|
|
20
|
+
@include button-size($btn-padding-y, $btn-padding-x, $font-size-base);
|
|
21
|
+
@include transition(all .2s ease-in-out);
|
|
22
|
+
|
|
23
|
+
// Share hover and focus styles
|
|
24
|
+
@include selected() {
|
|
25
|
+
text-decoration: none;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
&:focus,
|
|
29
|
+
&.focus {
|
|
30
|
+
outline: 0;
|
|
31
|
+
@include box-shadow(0 0 0 2px rgba($brand-primary, .25));
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
// Disabled comes first so active can properly restyle
|
|
35
|
+
&.disabled,
|
|
36
|
+
&:disabled {
|
|
37
|
+
cursor: not-allowed;
|
|
38
|
+
opacity: .65;
|
|
39
|
+
@include box-shadow(none);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
&:active,
|
|
43
|
+
&.active {
|
|
44
|
+
background-image: none;
|
|
45
|
+
@include box-shadow(inset 0 3px 5px rgba($black,.125));
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
// Future-proof disabling of clicks on `<a>` elements
|
|
50
|
+
a.btn.disabled,
|
|
51
|
+
fieldset[disabled] a.btn {
|
|
52
|
+
pointer-events: none;
|
|
53
|
+
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
//-----------------------------------
|
|
2
|
+
// BUTTONS COLORS
|
|
3
|
+
//-----------------------------------
|
|
4
|
+
|
|
5
|
+
////
|
|
6
|
+
/// @access private
|
|
7
|
+
/// @group Buttons
|
|
8
|
+
/// @type string
|
|
9
|
+
////
|
|
10
|
+
|
|
11
|
+
//** Default buttons color
|
|
12
|
+
/// Buttons colors
|
|
13
|
+
/// @example css - class="btn--(type)"
|
|
14
|
+
/// .btn--primary {
|
|
15
|
+
///
|
|
16
|
+
/// }
|
|
17
|
+
@each $name, $value in $default_colors {
|
|
18
|
+
.btn--#{"" + $name} {
|
|
19
|
+
@include button-variant($value);
|
|
20
|
+
}
|
|
21
|
+
}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
//-----------------------------------
|
|
2
|
+
// BUTTONS SIZE
|
|
3
|
+
//-----------------------------------
|
|
4
|
+
|
|
5
|
+
////
|
|
6
|
+
/// @access private
|
|
7
|
+
/// @group Buttons
|
|
8
|
+
/// @type string
|
|
9
|
+
////
|
|
10
|
+
|
|
11
|
+
//** Default buttons size
|
|
12
|
+
/// Buttons size
|
|
13
|
+
/// @example css - class="btn--(type)"
|
|
14
|
+
/// .btn--lg {
|
|
15
|
+
///
|
|
16
|
+
/// }
|
|
17
|
+
.btn--lg {
|
|
18
|
+
@include button-size($btn-padding-x * 1.5, $btn-padding-y * 1.5, $font-size-large);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.btn--sm {
|
|
22
|
+
@include button-size($btn-padding-x * .5, $btn-padding-y * .5, $font-size-small);
|
|
23
|
+
}
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
//-----------------------------------
|
|
2
|
+
// COLORS MIXINS
|
|
3
|
+
//-----------------------------------
|
|
4
|
+
|
|
5
|
+
////
|
|
6
|
+
/// @access public
|
|
7
|
+
/// @group Mixins
|
|
8
|
+
/// @type string
|
|
9
|
+
////
|
|
10
|
+
|
|
11
|
+
/// Mixin helper to set button color
|
|
12
|
+
/// @param {Color} $color - color of your button
|
|
13
|
+
/// @example scss - Usage
|
|
14
|
+
/// .foo {
|
|
15
|
+
/// @include button-variant(#FFAAAA);
|
|
16
|
+
/// }
|
|
17
|
+
/// @example css - Result
|
|
18
|
+
/// .foo {
|
|
19
|
+
/// color: rgba(0, 0, 0, 0.8);
|
|
20
|
+
/// background-color: #FFAAAA;
|
|
21
|
+
/// box-shadow(inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075));
|
|
22
|
+
/// }
|
|
23
|
+
/// .foo:hover, .foo.hover, .foo:focus, .foo.focus {
|
|
24
|
+
/// color: rgba(0, 0, 0, 0.8);
|
|
25
|
+
/// background-color: #FF6666;
|
|
26
|
+
/// }
|
|
27
|
+
/// .foo.disabled, .food:disabled {
|
|
28
|
+
/// background-color: #FFBBBB;
|
|
29
|
+
/// color: rgba(0, 0, 0, 0.8);
|
|
30
|
+
/// }
|
|
31
|
+
/// .foo.active, .food:active {
|
|
32
|
+
/// background-color: #FF6666;
|
|
33
|
+
/// color: rgba(0, 0, 0, 0.8);
|
|
34
|
+
/// background-image: none;
|
|
35
|
+
/// box-shadow(inset 0 3px 5px rgba(0, 0, 0, .125));
|
|
36
|
+
/// }
|
|
37
|
+
|
|
38
|
+
@mixin button-variant($color) {
|
|
39
|
+
$active-background: darken($color, 10%);
|
|
40
|
+
$disabled-background: lighten($color, 10%);
|
|
41
|
+
|
|
42
|
+
@include text-contrast($color);
|
|
43
|
+
background-color: $background;
|
|
44
|
+
@include box-shadow(inset 0 1px 0 rgba($white,.15), 0 1px 1px rgba($black,.075));
|
|
45
|
+
|
|
46
|
+
// Hover and focus styles are shared
|
|
47
|
+
@include selected() {
|
|
48
|
+
@include text-contrast($active-background);
|
|
49
|
+
background-color: $active-background;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
// Disabled comes first so active can properly restyle
|
|
53
|
+
&:disabled,
|
|
54
|
+
&.disabled {
|
|
55
|
+
background-color: $disabled-background;
|
|
56
|
+
@include text-contrast($disabled-background);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
&:active,
|
|
60
|
+
&.active {
|
|
61
|
+
@include text-contrast($active-background);
|
|
62
|
+
background-color: $active-background;
|
|
63
|
+
background-image: none; // Remove the gradient for the pressed/active state
|
|
64
|
+
@include box-shadow(inset 0 3px 5px rgba($black,.125));
|
|
65
|
+
}
|
|
66
|
+
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
//-----------------------------------
|
|
2
|
+
// BUTTONS VARIABLES
|
|
3
|
+
//-----------------------------------
|
|
4
|
+
|
|
5
|
+
////
|
|
6
|
+
/// @access public
|
|
7
|
+
/// @group Buttons
|
|
8
|
+
/// @type String
|
|
9
|
+
////
|
|
10
|
+
|
|
11
|
+
/// Grid variables
|
|
12
|
+
/// @prop {Number} max-grid-columns [$max-grid-columns]
|
|
13
|
+
|
|
14
|
+
$btn_font_weight: 300 !default;
|
|
15
|
+
$btn-border-width: 1px !default;
|
|
16
|
+
$btn-padding-x: 1rem !default;
|
|
17
|
+
$btn-padding-y: .5rem !default;
|
|
18
|
+
|
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
// @file
|
|
2
|
-
// SCSS partials import
|
|
3
|
-
// -----------------------------------------------------------------------------
|
|
4
|
-
|
|
5
|
-
// COMPASS Imports
|
|
6
|
-
// -----------------------------------------------------------------------------
|
|
7
|
-
@import "compass";
|
|
8
|
-
@import 'compass/css3';
|
|
9
|
-
|
|
10
|
-
// GIPainter Variables and Mixins
|
|
11
|
-
// -----------------------------------------------------------------------------
|
|
12
|
-
@import "Variables/**/*";
|
|
13
|
-
@import "Mixins/**/*";
|
|
14
|
-
@import "Functions/**/*";
|
|
1
|
+
// @file
|
|
2
|
+
// SCSS partials import
|
|
3
|
+
// -----------------------------------------------------------------------------
|
|
4
|
+
|
|
5
|
+
// COMPASS Imports
|
|
6
|
+
// -----------------------------------------------------------------------------
|
|
7
|
+
@import "compass";
|
|
8
|
+
@import 'compass/css3';
|
|
9
|
+
|
|
10
|
+
// GIPainter Variables and Mixins
|
|
11
|
+
// -----------------------------------------------------------------------------
|
|
12
|
+
@import "Variables/**/*";
|
|
13
|
+
@import "Mixins/**/*";
|
|
14
|
+
@import "Functions/**/*";
|
|
15
15
|
@import "Base/core";
|
data/lib/GIPainter-button.rb
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
require 'rubygems'
|
|
2
2
|
require 'bundler/setup'
|
|
3
|
-
require "GIPainter-
|
|
3
|
+
require "GIPainter-[exemple]/version"
|
|
4
4
|
|
|
5
|
-
module
|
|
5
|
+
module GIPainter_[exemple]
|
|
6
6
|
class << self
|
|
7
7
|
def load!
|
|
8
8
|
register_compass_extension if compass?
|
|
@@ -38,8 +38,8 @@ module GIPainter_button
|
|
|
38
38
|
|
|
39
39
|
def register_compass_extension
|
|
40
40
|
::Compass::Frameworks.register(
|
|
41
|
-
'GIPainter-
|
|
42
|
-
:version =>
|
|
41
|
+
'GIPainter-[exemple]',
|
|
42
|
+
:version => GIPainter_[exemple]::VERSION,
|
|
43
43
|
:path => gem_path,
|
|
44
44
|
:stylesheets_directory => stylesheets_path,
|
|
45
45
|
:templates_directory => File.join(gem_path, 'templates')
|
|
@@ -48,4 +48,4 @@ module GIPainter_button
|
|
|
48
48
|
end
|
|
49
49
|
end
|
|
50
50
|
|
|
51
|
-
|
|
51
|
+
GIPainter_[exemple].load!
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
stylesheet '_GIPainter-button.scss', :media => 'screen, projection'
|
|
2
|
-
|
|
3
|
-
description "A Compass plugin for the Genious-interactive agency"
|
|
4
|
-
|
|
5
|
-
help %Q{
|
|
6
|
-
See GIPainter documentation
|
|
1
|
+
stylesheet '_GIPainter-button.scss', :media => 'screen, projection'
|
|
2
|
+
|
|
3
|
+
description "A Compass plugin for the Genious-interactive agency"
|
|
4
|
+
|
|
5
|
+
help %Q{
|
|
6
|
+
See GIPainter documentation
|
|
7
7
|
}
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: GIPainter-button
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.
|
|
4
|
+
version: 0.2.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Genious Interactive
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2017-
|
|
11
|
+
date: 2017-03-14 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: GIPainter-base
|
|
@@ -144,7 +144,13 @@ extensions: []
|
|
|
144
144
|
extra_rdoc_files: []
|
|
145
145
|
files:
|
|
146
146
|
- README.md
|
|
147
|
+
- assets/stylesheets/Base/_base.scss
|
|
148
|
+
- assets/stylesheets/Base/_color.scss
|
|
147
149
|
- assets/stylesheets/Base/_core.scss
|
|
150
|
+
- assets/stylesheets/Base/_size.scss
|
|
151
|
+
- assets/stylesheets/Mixins/_color.scss
|
|
152
|
+
- assets/stylesheets/Mixins/_size.scss
|
|
153
|
+
- assets/stylesheets/Variables/_button.scss
|
|
148
154
|
- assets/stylesheets/_GIPainter-button.scss
|
|
149
155
|
- lib/GIPainter-button.rb
|
|
150
156
|
- lib/GIPainter-button/version.rb
|
|
@@ -170,7 +176,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
|
170
176
|
version: '0'
|
|
171
177
|
requirements: []
|
|
172
178
|
rubyforge_project:
|
|
173
|
-
rubygems_version: 2.
|
|
179
|
+
rubygems_version: 2.5.2
|
|
174
180
|
signing_key:
|
|
175
181
|
specification_version: 4
|
|
176
182
|
summary: A compass extension | grid
|