kube-rails 0.3.1 → 0.4.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +2 -2
- data/Rakefile +14 -13
- data/lib/generators/kube/install/install_generator.rb +6 -7
- data/lib/generators/kube/themed/themed_generator.rb +28 -22
- data/lib/kube-rails.rb +8 -8
- data/lib/kube/rails/engine.rb +3 -3
- data/lib/kube/rails/kube.rb +2 -2
- data/lib/kube/rails/version.rb +1 -1
- data/vendor/kube/alerts.less +63 -0
- data/vendor/kube/blocks.less +31 -59
- data/vendor/kube/breadcrumbs.less +47 -0
- data/vendor/kube/buttons.less +138 -139
- data/vendor/kube/forms.less +283 -160
- data/vendor/kube/grid.less +143 -241
- data/vendor/kube/helpers.less +111 -49
- data/vendor/kube/kube.less +14 -5
- data/vendor/kube/labels.less +105 -0
- data/vendor/kube/messages.less +64 -0
- data/vendor/kube/mixins.less +238 -49
- data/vendor/kube/pagination.less +45 -0
- data/vendor/kube/reset.less +158 -0
- data/vendor/kube/tables.less +121 -33
- data/vendor/kube/typography.less +169 -201
- data/vendor/kube/variables.less +137 -55
- metadata +44 -26
- data/vendor/kube/navigation.less +0 -244
- data/vendor/kube/normalize.less +0 -225
- data/vendor/kube/prettyprint.less +0 -69
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 2836d088abf94375e59137a3c72e3e9ece0d19dc
|
|
4
|
+
data.tar.gz: 6bd62af0ced82d95f42a4fdcd60cdfa7bcbf26d2
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 3776999f3a0319d7f7359b97e448dab35f5fab674a10c54f4c0fb4b194d04b436f6d9fe593d3f4443d3ae342b58c694a9dde552ba9323fb528be17dbbe0454d6
|
|
7
|
+
data.tar.gz: d0b2c9c530f5d945a544d129cf277a488233a65c207852306fcd008222ebffa86af5cb28884f2067b86a7eb4bbd39058d8d9bdf5f0e140f8983f83129c6c124d
|
data/README.md
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
# Kube for Rails
|
|
2
|
-
[Kube](http://imperavi.com/kube/) is a minimal CSS-framework for developers. This projects integrates it for Rails
|
|
1
|
+
# Kube for Rails 4 Asset Pipeline
|
|
2
|
+
[Kube](http://imperavi.com/kube/) is a minimal CSS-framework for developers. This projects integrates it for Rails 4 Asset Pipeline.
|
|
3
3
|
|
|
4
4
|
[](https://codeclimate.com/github/mmozuras/kube-rails)
|
|
5
5
|
[](http://travis-ci.org/mmozuras/kube-rails)
|
data/Rakefile
CHANGED
|
@@ -1,13 +1,14 @@
|
|
|
1
|
-
#!/usr/bin/env rake
|
|
2
|
-
require 'bundler'
|
|
3
|
-
Bundler::GemHelper.install_tasks
|
|
4
|
-
|
|
5
|
-
desc
|
|
6
|
-
task :bundle do
|
|
7
|
-
sh 'bundle install'
|
|
8
|
-
sh 'gem build *.gemspec'
|
|
9
|
-
sh 'gem install *.gem'
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
task
|
|
1
|
+
#!/usr/bin/env rake
|
|
2
|
+
require 'bundler'
|
|
3
|
+
Bundler::GemHelper.install_tasks
|
|
4
|
+
|
|
5
|
+
desc 'Bundle the gem'
|
|
6
|
+
task :bundle do
|
|
7
|
+
sh 'bundle install'
|
|
8
|
+
sh 'gem build *.gemspec'
|
|
9
|
+
sh 'gem install *.gem'
|
|
10
|
+
sh 'rm *.gem'
|
|
11
|
+
end
|
|
12
|
+
|
|
13
|
+
task(:default).clear
|
|
14
|
+
task default: :bundle
|
|
@@ -3,24 +3,23 @@ require 'rails/generators'
|
|
|
3
3
|
module Kube
|
|
4
4
|
module Generators
|
|
5
5
|
class InstallGenerator < ::Rails::Generators::Base
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
desc "This generator installs Kube to Asset Pipeline"
|
|
6
|
+
source_root File.expand_path('../templates', __FILE__)
|
|
7
|
+
desc 'This generator installs Kube to Asset Pipeline'
|
|
9
8
|
|
|
10
9
|
def add_assets
|
|
11
10
|
if File.exist?('app/assets/stylesheets/application.css')
|
|
12
|
-
content = File.read(
|
|
11
|
+
content = File.read('app/assets/stylesheets/application.css')
|
|
13
12
|
unless content.match(/require_tree\s+\.\s*$/)
|
|
14
13
|
style_require_block = " *= require kube\n"
|
|
15
|
-
insert_into_file
|
|
14
|
+
insert_into_file 'app/assets/stylesheets/application.css', style_require_block, after: "require_self\n"
|
|
16
15
|
end
|
|
17
16
|
else
|
|
18
|
-
copy_file
|
|
17
|
+
copy_file 'application.css', 'app/assets/stylesheets/application.css'
|
|
19
18
|
end
|
|
20
19
|
end
|
|
21
20
|
|
|
22
21
|
def add_kube
|
|
23
|
-
copy_file
|
|
22
|
+
copy_file 'kube.less', 'app/assets/stylesheets/kube.css.less'
|
|
24
23
|
end
|
|
25
24
|
end
|
|
26
25
|
end
|
|
@@ -5,10 +5,10 @@ module Kube
|
|
|
5
5
|
module Generators
|
|
6
6
|
class ThemedGenerator < ::Rails::Generators::Base
|
|
7
7
|
source_root File.expand_path('../templates', __FILE__)
|
|
8
|
-
argument :controller_path,
|
|
9
|
-
argument :model_name,
|
|
10
|
-
argument :layout,
|
|
11
|
-
|
|
8
|
+
argument :controller_path, type: :string
|
|
9
|
+
argument :model_name, type: :string, required: false
|
|
10
|
+
argument :layout, type: :string, default: 'application',
|
|
11
|
+
banner: 'Specify application layout'
|
|
12
12
|
|
|
13
13
|
def initialize(args, *options)
|
|
14
14
|
super(args, *options)
|
|
@@ -28,9 +28,7 @@ module Kube
|
|
|
28
28
|
@model_name = @model_name.camelize
|
|
29
29
|
end
|
|
30
30
|
|
|
31
|
-
|
|
32
|
-
@controller_routing_path
|
|
33
|
-
end
|
|
31
|
+
attr_reader :controller_routing_path
|
|
34
32
|
|
|
35
33
|
def singular_controller_routing_path
|
|
36
34
|
@controller_routing_path.singularize
|
|
@@ -50,13 +48,17 @@ module Kube
|
|
|
50
48
|
|
|
51
49
|
def columns
|
|
52
50
|
begin
|
|
53
|
-
model_columns.
|
|
51
|
+
model_columns.map do |c|
|
|
52
|
+
::Rails::Generators::GeneratedAttribute.new(c.name, c.type)
|
|
53
|
+
end
|
|
54
54
|
rescue ActiveRecord::StatementInvalid => e
|
|
55
|
-
|
|
56
|
-
|
|
55
|
+
say e.message, :red
|
|
56
|
+
exit
|
|
57
57
|
end
|
|
58
58
|
rescue NoMethodError
|
|
59
|
-
model_fields.
|
|
59
|
+
model_fields.map do |c|
|
|
60
|
+
::Rails::Generators::GeneratedAttribute.new(c.name, c.type.to_s)
|
|
61
|
+
end
|
|
60
62
|
end
|
|
61
63
|
|
|
62
64
|
def model_columns
|
|
@@ -64,30 +66,30 @@ module Kube
|
|
|
64
66
|
end
|
|
65
67
|
|
|
66
68
|
def model_fields
|
|
67
|
-
exclude(@model_name.constantize.fields.
|
|
69
|
+
exclude(@model_name.constantize.fields.map { |c| c[1] })
|
|
68
70
|
end
|
|
69
71
|
|
|
70
72
|
def exclude(columns)
|
|
71
|
-
excluded_column_names = %w
|
|
72
|
-
columns.reject{ |c| excluded_column_names.include?(c.name) }
|
|
73
|
+
excluded_column_names = %w(id created_at updated_at)
|
|
74
|
+
columns.reject { |c| excluded_column_names.include?(c.name) }
|
|
73
75
|
end
|
|
74
76
|
|
|
75
77
|
def extract_modules(name)
|
|
76
78
|
modules = name.include?('/') ? name.split('/') : name.split('::')
|
|
77
|
-
name
|
|
78
|
-
path
|
|
79
|
+
name = modules.pop
|
|
80
|
+
path = modules.map(&:underscore)
|
|
79
81
|
file_path = (path + [name.underscore]).join('/')
|
|
80
|
-
nesting = modules.map
|
|
82
|
+
nesting = modules.map(&:camelize).join('::')
|
|
81
83
|
[name, path, file_path, nesting, modules.size]
|
|
82
84
|
end
|
|
83
85
|
|
|
84
86
|
def generate_views
|
|
85
87
|
views = {
|
|
86
|
-
"index.html.#{ext}" =>
|
|
87
|
-
"new.html.#{ext}"
|
|
88
|
-
"edit.html.#{ext}"
|
|
89
|
-
"_form.html.#{ext}" =>
|
|
90
|
-
"show.html.#{ext}"
|
|
88
|
+
"index.html.#{ext}" => view_path("index.html.#{ext}"),
|
|
89
|
+
"new.html.#{ext}" => view_path("new.html.#{ext}"),
|
|
90
|
+
"edit.html.#{ext}" => view_path("edit.html.#{ext}"),
|
|
91
|
+
"_form.html.#{ext}" => view_path("_form.html.#{ext}"),
|
|
92
|
+
"show.html.#{ext}" => view_path("show.html.#{ext}") }
|
|
91
93
|
selected_views = views
|
|
92
94
|
options.engine == generate_templates(selected_views)
|
|
93
95
|
end
|
|
@@ -101,6 +103,10 @@ module Kube
|
|
|
101
103
|
def ext
|
|
102
104
|
::Rails.application.config.generators.options[:rails][:template_engine] || :erb
|
|
103
105
|
end
|
|
106
|
+
|
|
107
|
+
def view_path(name)
|
|
108
|
+
File.join('app/views', @controller_file_path, name)
|
|
109
|
+
end
|
|
104
110
|
end
|
|
105
111
|
end
|
|
106
112
|
end
|
data/lib/kube-rails.rb
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
module Kube
|
|
2
|
-
module Rails
|
|
3
|
-
require 'kube/rails/engine' if defined?(Rails)
|
|
4
|
-
end
|
|
5
|
-
end
|
|
6
|
-
|
|
7
|
-
require 'less-rails'
|
|
8
|
-
require 'kube/rails/kube' if defined?(Rails)
|
|
1
|
+
module Kube
|
|
2
|
+
module Rails
|
|
3
|
+
require 'kube/rails/engine' if defined?(Rails)
|
|
4
|
+
end
|
|
5
|
+
end
|
|
6
|
+
|
|
7
|
+
require 'less-rails'
|
|
8
|
+
require 'kube/rails/kube' if defined?(Rails)
|
data/lib/kube/rails/engine.rb
CHANGED
|
@@ -4,10 +4,10 @@ module Kube
|
|
|
4
4
|
module Rails
|
|
5
5
|
class Engine < ::Rails::Engine
|
|
6
6
|
initializer 'kube-rails.setup',
|
|
7
|
-
|
|
8
|
-
|
|
7
|
+
after: 'less-rails.after.load_config_initializers',
|
|
8
|
+
group: :all do |app|
|
|
9
9
|
app.config.less.paths << File.join(config.root, 'vendor')
|
|
10
|
-
|
|
10
|
+
end
|
|
11
11
|
end
|
|
12
12
|
end
|
|
13
13
|
end
|
data/lib/kube/rails/kube.rb
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
require
|
|
2
|
-
require
|
|
1
|
+
require 'kube/rails/engine'
|
|
2
|
+
require 'kube/rails/version'
|
data/lib/kube/rails/version.rb
CHANGED
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
/* =Alerts
|
|
2
|
+
-----------------------------------------------------------------------------*/
|
|
3
|
+
.alert {
|
|
4
|
+
position: relative;
|
|
5
|
+
padding: @base-line / 2 @base-line;
|
|
6
|
+
padding-right: 32px;
|
|
7
|
+
line-height: @base-line;
|
|
8
|
+
font-size: 94%;
|
|
9
|
+
color: rgba(0, 0, 0, 1);
|
|
10
|
+
display: block;
|
|
11
|
+
font-weight: normal;
|
|
12
|
+
border-radius: @global-radius;
|
|
13
|
+
margin-bottom: @base-line;
|
|
14
|
+
&.alert-primary {
|
|
15
|
+
color: @color-primary;
|
|
16
|
+
& a,
|
|
17
|
+
& h5 {
|
|
18
|
+
color: @color-primary;
|
|
19
|
+
}
|
|
20
|
+
background-color: rgba(red(@color-primary), green(@color-primary), blue(@color-primary), .15);
|
|
21
|
+
}
|
|
22
|
+
&.alert-error {
|
|
23
|
+
color: @color-error;
|
|
24
|
+
& a,
|
|
25
|
+
& h5 {
|
|
26
|
+
color: @color-error;
|
|
27
|
+
}
|
|
28
|
+
background-color: rgba(red(@color-error), green(@color-error), blue(@color-error), .15);
|
|
29
|
+
}
|
|
30
|
+
&.alert-warning {
|
|
31
|
+
color: darken(@color-warning, 15);
|
|
32
|
+
& a,
|
|
33
|
+
& h5 {
|
|
34
|
+
color: darken(@color-warning, 15);
|
|
35
|
+
}
|
|
36
|
+
background-color: rgba(red(@color-warning), green(@color-warning), blue(@color-warning), .23);
|
|
37
|
+
}
|
|
38
|
+
&.alert-success {
|
|
39
|
+
color: @color-success;
|
|
40
|
+
& a,
|
|
41
|
+
& h5 {
|
|
42
|
+
color: @color-success;
|
|
43
|
+
}
|
|
44
|
+
background-color: rgba(red(@color-success), green(@color-success), blue(@color-success), .13);
|
|
45
|
+
}
|
|
46
|
+
& a {
|
|
47
|
+
font-weight: bold;
|
|
48
|
+
&:hover {
|
|
49
|
+
color: #000;
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
& span.close {
|
|
53
|
+
position: absolute;
|
|
54
|
+
top: 0;
|
|
55
|
+
right: 0;
|
|
56
|
+
padding: .5rem 1rem;
|
|
57
|
+
opacity: .6;
|
|
58
|
+
cursor: pointer;
|
|
59
|
+
&:hover {
|
|
60
|
+
opacity: 1;
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
}
|
data/vendor/kube/blocks.less
CHANGED
|
@@ -1,71 +1,43 @@
|
|
|
1
1
|
/* =Blocks
|
|
2
2
|
-----------------------------------------------------------------------------*/
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
margin-
|
|
16
|
-
margin-
|
|
3
|
+
blocks {
|
|
4
|
+
display: -webkit-box;
|
|
5
|
+
display: -moz-box;
|
|
6
|
+
display: -ms-flexbox;
|
|
7
|
+
display: -webkit-flex;
|
|
8
|
+
display: flex;
|
|
9
|
+
-webkit-flex-wrap: wrap;
|
|
10
|
+
-ms-flex-wrap: wrap;
|
|
11
|
+
flex-wrap: wrap;
|
|
12
|
+
margin-left: -@grid-gap;
|
|
13
|
+
|
|
14
|
+
& > div {
|
|
15
|
+
margin-left: @grid-gap;
|
|
16
|
+
margin-bottom: @base-line;
|
|
17
17
|
}
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
.blocks-2 > li { .block(2); }
|
|
21
|
-
.blocks-3 > li { .block(3); }
|
|
22
|
-
.blocks-4 > li { .block(4); }
|
|
23
|
-
.blocks-5 > li { .block(5); }
|
|
24
|
-
.blocks-6 > li { .block(6); }
|
|
25
18
|
|
|
26
|
-
|
|
27
|
-
|
|
19
|
+
&[cols="2"] > div { width: 50% - @grid-gap; }
|
|
20
|
+
&[cols="3"] > div { width: 33.3% - @grid-gap; }
|
|
21
|
+
&[cols="4"] > div { width: 25% - @grid-gap; }
|
|
22
|
+
&[cols="5"] > div { width: 20% - @grid-gap; }
|
|
23
|
+
&[cols="6"] > div { width: 16.6% - @grid-gap; }
|
|
28
24
|
}
|
|
29
25
|
|
|
30
|
-
|
|
31
|
-
-----------------------------------------------------------------------------*/
|
|
32
|
-
@media only screen and (max-width: 767px) {
|
|
26
|
+
@media (max-width: @breakpoint-small) {
|
|
33
27
|
|
|
34
|
-
|
|
35
|
-
.blocks-3,
|
|
36
|
-
.blocks-4,
|
|
37
|
-
.blocks-5,
|
|
38
|
-
.blocks-6 {
|
|
39
|
-
margin-left: 0;
|
|
40
|
-
margin-bottom: @baseLine/@em;
|
|
41
|
-
}
|
|
28
|
+
blocks {
|
|
42
29
|
|
|
43
|
-
|
|
44
|
-
.blocks-3 > li,
|
|
45
|
-
.blocks-4 > li,
|
|
46
|
-
.blocks-5 > li,
|
|
47
|
-
.blocks-6 > li {
|
|
48
|
-
float: none;
|
|
30
|
+
display: block;
|
|
49
31
|
margin-left: 0;
|
|
50
|
-
width: 100%;
|
|
51
|
-
}
|
|
52
32
|
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
33
|
+
&[cols="2"] > div,
|
|
34
|
+
&[cols="3"] > div,
|
|
35
|
+
&[cols="4"] > div,
|
|
36
|
+
&[cols="5"] > div,
|
|
37
|
+
&[cols="6"] > div {
|
|
38
|
+
width: 100%;
|
|
39
|
+
margin-left: 0;
|
|
40
|
+
}
|
|
57
41
|
}
|
|
58
|
-
.blocks-mobile-33,
|
|
59
|
-
.blocks-mobile-50 {
|
|
60
|
-
margin-left: -@gridGutterWidth/(@gridWidth/100)*1%;
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
.blocks-mobile-50 > li {
|
|
64
|
-
.block(2);
|
|
65
|
-
}
|
|
66
|
-
.blocks-mobile-33 > li {
|
|
67
|
-
.block(3);
|
|
68
|
-
}
|
|
69
|
-
|
|
70
42
|
|
|
71
|
-
}
|
|
43
|
+
}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
/* =Breadcrumbs
|
|
2
|
+
-----------------------------------------------------------------------------*/
|
|
3
|
+
.breadcrumb {
|
|
4
|
+
|
|
5
|
+
margin: 0;
|
|
6
|
+
list-style: none;
|
|
7
|
+
margin-bottom: @base-line;
|
|
8
|
+
font-size: @font-size-small;
|
|
9
|
+
color: rgba(0, 0, 0, .5);
|
|
10
|
+
.clearfix;
|
|
11
|
+
& li {
|
|
12
|
+
float: left;
|
|
13
|
+
}
|
|
14
|
+
& a {
|
|
15
|
+
position: relative;
|
|
16
|
+
margin-right: 8px;
|
|
17
|
+
padding-right: 13px;
|
|
18
|
+
color: #000;
|
|
19
|
+
text-decoration: none;
|
|
20
|
+
&:hover {
|
|
21
|
+
.transition();
|
|
22
|
+
color: rgba(0, 0, 0, .6);
|
|
23
|
+
text-decoration: underline;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
& a:before {
|
|
27
|
+
position: absolute;
|
|
28
|
+
top: -5px;
|
|
29
|
+
right: 0;
|
|
30
|
+
content: " > ";
|
|
31
|
+
color: rgba(0, 0, 0, .4);
|
|
32
|
+
font-size: 12px;
|
|
33
|
+
}
|
|
34
|
+
&.breadcrumb-path a:before {
|
|
35
|
+
content: " / ";
|
|
36
|
+
top: -4px;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
& span,
|
|
40
|
+
& a.active:hover {
|
|
41
|
+
text-decoration: none;
|
|
42
|
+
cursor: text;
|
|
43
|
+
color: rgba(0, 0, 0, .4);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
}
|
|
47
|
+
|
data/vendor/kube/buttons.less
CHANGED
|
@@ -1,170 +1,169 @@
|
|
|
1
1
|
/* =Buttons
|
|
2
2
|
-----------------------------------------------------------------------------*/
|
|
3
|
-
.btn
|
|
3
|
+
.btn,
|
|
4
|
+
button {
|
|
4
5
|
display: inline-block;
|
|
5
6
|
vertical-align: top;
|
|
6
7
|
|
|
7
|
-
font-family: @
|
|
8
|
-
font-size: @
|
|
9
|
-
font-weight:
|
|
8
|
+
font-family: @font-family-base;
|
|
9
|
+
font-size: @font-size-btn-normal;
|
|
10
|
+
font-weight: normal;
|
|
10
11
|
|
|
11
|
-
|
|
12
|
+
white-space: nowrap;
|
|
13
|
+
|
|
14
|
+
padding: @padding-btn;
|
|
15
|
+
height: @input-height;
|
|
16
|
+
line-height: @input-height;
|
|
12
17
|
|
|
13
18
|
text-align: center;
|
|
14
19
|
text-decoration: none;
|
|
15
|
-
color: @colorBody;
|
|
16
20
|
|
|
21
|
+
-webkit-appearance: none;
|
|
22
|
+
|
|
23
|
+
outline: none;
|
|
17
24
|
margin: 0;
|
|
18
25
|
border: none;
|
|
19
|
-
border-radius:
|
|
26
|
+
border-radius: @global-radius;
|
|
20
27
|
box-shadow: none;
|
|
21
|
-
|
|
22
28
|
cursor: pointer;
|
|
23
|
-
|
|
24
|
-
background:
|
|
25
|
-
padding: 9px 20px;
|
|
26
|
-
height: 2.3em;
|
|
29
|
+
color: rgba(0, 0, 0, 1);
|
|
30
|
+
background: @color-default;
|
|
27
31
|
|
|
28
32
|
&:hover {
|
|
29
|
-
color
|
|
30
|
-
|
|
33
|
+
.background-color-light(@color-default, 3);
|
|
34
|
+
color: rgba(0, 0, 0, .6);
|
|
35
|
+
text-decoration: none;
|
|
31
36
|
}
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
}
|
|
36
|
-
.btn-small {
|
|
37
|
-
font-size: @buttonsSmallFontSize;
|
|
38
|
-
padding: 7px 16px;
|
|
39
|
-
}
|
|
40
|
-
.btn-outline {
|
|
41
|
-
background: none;
|
|
42
|
-
border: 1px solid #ddd;
|
|
43
|
-
padding: 8px 19px;
|
|
44
|
-
&.btn-small {
|
|
45
|
-
padding: 6px 15px;
|
|
37
|
+
&::-moz-focus-inner {
|
|
38
|
+
border: 0;
|
|
39
|
+
padding: 0;
|
|
46
40
|
}
|
|
47
|
-
|
|
41
|
+
&[disabled] {
|
|
42
|
+
cursor: default;
|
|
43
|
+
box-shadow: none;
|
|
44
|
+
opacity: 0.4;
|
|
48
45
|
|
|
46
|
+
&:hover {
|
|
47
|
+
background: @color-default;
|
|
48
|
+
color: rgba(0, 0, 0, 1);
|
|
49
|
+
text-decoration: none;
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
&[outline] {
|
|
53
|
+
padding: @padding-btn-outline;
|
|
54
|
+
background: none;
|
|
55
|
+
border: 1px solid rgba(0, 0, 0, .25);
|
|
56
|
+
color: rgba(0, 0, 0, .6);
|
|
49
57
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
58
|
+
&:hover {
|
|
59
|
+
border-color: rgba(0, 0, 0, 1);
|
|
60
|
+
color: rgba(0, 0, 0, 1);
|
|
61
|
+
text-decoration: none;
|
|
62
|
+
}
|
|
63
|
+
&[disabled] {
|
|
64
|
+
cursor: default;
|
|
65
|
+
box-shadow: none;
|
|
66
|
+
opacity: 0.4;
|
|
67
|
+
|
|
68
|
+
&:hover {
|
|
69
|
+
border: 1px solid rgba(0, 0, 0, .25);
|
|
70
|
+
background: none;
|
|
71
|
+
color: rgba(0, 0, 0, .7);
|
|
72
|
+
text-decoration: none;
|
|
73
|
+
}
|
|
74
|
+
}
|
|
57
75
|
}
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
background: #fff;
|
|
61
|
-
&:hover { background: darken(#fff, 5%); }
|
|
62
|
-
}
|
|
63
|
-
.btn-white.btn-outline {
|
|
64
|
-
background: none;
|
|
65
|
-
border-color: rgba(255, 255, 255, .85);
|
|
66
|
-
color: rgba(255, 255, 255, .85);
|
|
67
|
-
&:hover {
|
|
68
|
-
color: rgba(0, 0, 0, .9);
|
|
69
|
-
background: #fff;
|
|
76
|
+
&[round] {
|
|
77
|
+
border-radius: 50px;
|
|
70
78
|
}
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
}
|
|
80
|
-
.btn-green {
|
|
81
|
-
background: @colorGreen;
|
|
82
|
-
&:hover { background: darken(@colorGreen, 10%); }
|
|
83
|
-
}
|
|
84
|
-
.btn-yellow {
|
|
85
|
-
background: @colorYellow;
|
|
86
|
-
color: #000;
|
|
87
|
-
&:hover {
|
|
88
|
-
background: darken(@colorYellow, 17%);
|
|
79
|
+
&[small] {
|
|
80
|
+
font-size: @font-size-btn-small;
|
|
81
|
+
padding: @padding-btn-small;
|
|
82
|
+
height: @input-height-small;
|
|
83
|
+
line-height: @input-height-small;
|
|
84
|
+
&[outline] {
|
|
85
|
+
padding: @padding-btn-small-outline;
|
|
86
|
+
}
|
|
89
87
|
}
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
88
|
+
&[big] {
|
|
89
|
+
font-size: @font-size-btn-big;
|
|
90
|
+
padding: @padding-btn-big;
|
|
91
|
+
height: @input-height-big;
|
|
92
|
+
line-height: @input-height-big;
|
|
93
|
+
&[outline] {
|
|
94
|
+
padding: @padding-btn-big-outline;
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
&[upper] {
|
|
98
|
+
text-transform: uppercase;
|
|
99
|
+
font-size: @font-size-btn-upper-normal;
|
|
100
|
+
padding: @padding-btn;
|
|
101
|
+
letter-spacing: .1em;
|
|
102
|
+
&[outline] {
|
|
103
|
+
padding: @padding-btn-outline;
|
|
104
|
+
}
|
|
105
|
+
&[small] {
|
|
106
|
+
font-size: @font-size-btn-upper-small;
|
|
107
|
+
padding: @padding-btn-small;
|
|
108
|
+
&[outline] {
|
|
109
|
+
padding: @padding-btn-small-outline;
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
&[big] {
|
|
113
|
+
font-size: @font-size-btn-upper-big;
|
|
114
|
+
padding: @padding-btn-big;
|
|
115
|
+
&[outline] {
|
|
116
|
+
padding: @padding-btn-big-outline;
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
&[type="black"] {
|
|
121
|
+
.make-btn(#000, 20);
|
|
122
|
+
}
|
|
123
|
+
&[type="primary"] {
|
|
124
|
+
.make-btn(@color-primary, 10);
|
|
125
|
+
}
|
|
126
|
+
&[type="white"] {
|
|
127
|
+
background: #fff;
|
|
95
128
|
|
|
96
|
-
|
|
97
|
-
.
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
129
|
+
&:hover {
|
|
130
|
+
opacity: 0.85;
|
|
131
|
+
}
|
|
132
|
+
&[outline] {
|
|
133
|
+
background: none;
|
|
134
|
+
color: #fff;
|
|
135
|
+
border-color: rgba(255, 255, 255, .9);
|
|
136
|
+
|
|
137
|
+
&:hover {
|
|
138
|
+
opacity: 1;
|
|
139
|
+
color: #000;
|
|
140
|
+
border-color: rgba(255, 255, 255, 1);
|
|
141
|
+
background: #fff;
|
|
142
|
+
}
|
|
143
|
+
}
|
|
105
144
|
}
|
|
106
145
|
}
|
|
107
|
-
.btn-active {
|
|
108
|
-
box-shadow: 0 1px 3px rgba(0, 0, 0, .4) inset;
|
|
109
|
-
}
|
|
110
|
-
.btn[disabled],
|
|
111
|
-
.btn-disabled {
|
|
112
|
-
cursor: default;
|
|
113
|
-
box-shadow: none;
|
|
114
|
-
}
|
|
115
146
|
|
|
116
|
-
.btn-
|
|
117
|
-
.btn-red.btn-active,
|
|
118
|
-
.btn-green.btn-active,
|
|
119
|
-
.btn-black.btn-active {
|
|
120
|
-
box-shadow: 0 1px 3px rgba(0, 0, 0, .7) inset;
|
|
121
|
-
}
|
|
147
|
+
.btn-group {
|
|
122
148
|
|
|
123
|
-
.
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
.btn
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
149
|
+
.clearfix;
|
|
150
|
+
|
|
151
|
+
display: inline-block;
|
|
152
|
+
vertical-align: bottom;
|
|
153
|
+
|
|
154
|
+
& .btn,
|
|
155
|
+
& button {
|
|
156
|
+
float: left;
|
|
157
|
+
margin-left: -1px;
|
|
158
|
+
&:first-child {
|
|
159
|
+
border-radius: @global-radius 0 0 @global-radius;
|
|
160
|
+
}
|
|
161
|
+
&:last-child {
|
|
162
|
+
border-radius: 0 @global-radius @global-radius 0;
|
|
163
|
+
}
|
|
138
164
|
}
|
|
139
|
-
}
|
|
140
165
|
|
|
141
|
-
.btn-white.btn-active,
|
|
142
|
-
.btn-white.btn-disabled,
|
|
143
|
-
.btn-white[disabled] {
|
|
144
|
-
background: darken(#fff, 5%);
|
|
145
|
-
}
|
|
146
|
-
.btn-blue.btn-active,
|
|
147
|
-
.btn-blue.btn-disabled,
|
|
148
|
-
.btn-blue[disabled] {
|
|
149
|
-
background: darken(@colorBlue, 10%);
|
|
150
166
|
}
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
background: darken(@colorRed, 10%);
|
|
155
|
-
}
|
|
156
|
-
.btn-green.btn-active,
|
|
157
|
-
.btn-green.btn-disabled,
|
|
158
|
-
.btn-green[disabled] {
|
|
159
|
-
background: darken(@colorGreen, 10%);
|
|
160
|
-
}
|
|
161
|
-
.btn-yellow.btn-active,
|
|
162
|
-
.btn-yellow.btn-disabled,
|
|
163
|
-
.btn-yellow[disabled] {
|
|
164
|
-
background: darken(@colorYellow, 17%);
|
|
165
|
-
}
|
|
166
|
-
.btn-black.btn-active,
|
|
167
|
-
.btn-black.btn-disabled,
|
|
168
|
-
.btn-black[disabled] {
|
|
169
|
-
background: lighten(#000, 30%);
|
|
170
|
-
}
|
|
167
|
+
|
|
168
|
+
|
|
169
|
+
|