GIPainter-button 0.1.1 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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
|