formikation 0.2.7

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.
@@ -0,0 +1,118 @@
1
+ .formikation {
2
+ label {
3
+ display: block;
4
+ font-size: 14px;
5
+ line-height: 17px;
6
+ }
7
+ *:before,
8
+ *:after {
9
+ -webkit-box-sizing: border-box;
10
+ -moz-box-sizing: border-box;
11
+ box-sizing: border-box;
12
+ }
13
+
14
+ //
15
+ // Checks and radios
16
+ //
17
+ input[type=checkbox],
18
+ input[type=radio] {
19
+ margin: 0;
20
+ padding: 0;
21
+ cursor: pointer;
22
+ position: absolute;
23
+ left: -9999px;
24
+ }
25
+ .fk-radio,
26
+ .fk-check {
27
+ display: block;
28
+ position: relative;
29
+ display: inline-block;
30
+ &:before {
31
+ content: ' ';
32
+ display: inline-block;
33
+ vertical-align: middle;
34
+ }
35
+ &:after {
36
+ content: '';
37
+ display: block;
38
+ position: absolute;
39
+ background: #fff;
40
+ }
41
+ &.checked {
42
+ &:after,
43
+ &:after {
44
+ // IE8 does not render the changes in a :pseudo-element with we don't change the 'content', thus we change it from ' ' to ''
45
+ content: ' ';
46
+ }
47
+ }
48
+ &.disabled {
49
+ opacity: 0.6;
50
+ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
51
+ }
52
+ }
53
+ .fk-radio {
54
+ &:before,
55
+ &:after {
56
+ border-radius: 50%;
57
+ }
58
+ }
59
+
60
+
61
+
62
+ //
63
+ // Select
64
+ //
65
+ .fk-select {
66
+ display: block;
67
+ width: 100%;
68
+ font-size: 14px;
69
+ .fk-select-label {
70
+ display: inline;
71
+ white-space: nowrap;
72
+ overflow: hidden;
73
+ text-overflow: ellipsis;
74
+ }
75
+ }
76
+
77
+
78
+
79
+ //
80
+ // File input
81
+ //
82
+ .fk-file-input {
83
+ display: block;
84
+ position: relative;
85
+ overflow: hidden;
86
+ width: 100%;
87
+ outline: 0;
88
+ font-size: 14px;
89
+ &:after {
90
+ content: attr(data-text);
91
+ display: block;
92
+ position: absolute;
93
+ right: 0;
94
+ border: 0;
95
+ outline: 0;
96
+ cursor: pointer;
97
+ }
98
+ > p {
99
+ margin: 0;
100
+ padding: 0;
101
+ font-size: 14px;
102
+ line-height: 1.15;
103
+ }
104
+ input[type=file] {
105
+ width: 100%;
106
+ height: 100%;
107
+ position: absolute;
108
+ left: 0;
109
+ top: 0;
110
+ opacity: 0;
111
+ // IE8
112
+ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
113
+ z-index: 3;
114
+ cursor: pointer;
115
+ font-size: 14px;
116
+ }
117
+ }
118
+ }
@@ -0,0 +1,118 @@
1
+ // vars
2
+
3
+ $border_radius: 3px !default;
4
+ $color: #2f97e9 !default;
5
+ $border_color: #d8d8d8 !default;
6
+
7
+
8
+
9
+ .fk-theme-default {
10
+
11
+ //
12
+ // Labels
13
+ //
14
+ label {
15
+ padding-right: 16px;
16
+ margin-bottom: 0.5em;
17
+ &.fk-radio,
18
+ &.fk-check {
19
+ &:before {
20
+ content: ' ';
21
+ width: 20px;
22
+ height: 20px;
23
+ border: 1px solid $border_color;
24
+ margin-top: -3px;
25
+ border-radius: $border_radius;
26
+ }
27
+ &:after {
28
+ content: ' ';
29
+ width: 12px;
30
+ height: 12px;
31
+ left: 4px;
32
+ top: 2px;
33
+ border-radius: $border_radius;
34
+ -webkit-transition: all 0.3s ease;
35
+ -o-transition: all 0.3s ease;
36
+ transition: all 0.3s ease;
37
+ }
38
+ }
39
+ &.fk-radio:before,
40
+ &.fk-radio:after {
41
+ border-radius: 50%;
42
+ }
43
+ &.checked {
44
+ &.fk-radio:after,
45
+ &.fk-check:after {
46
+ // IE8 does not render the changes in a :pseudo-element with we don't change the 'content', thus we change it from ' ' -> ''.
47
+ background: $color;
48
+ }
49
+ }
50
+ }
51
+
52
+
53
+
54
+ //
55
+ // Select
56
+ //
57
+ .fk-select {
58
+ padding: 10px;
59
+ border: 1px solid $border_color;
60
+ background: #fff;
61
+ border-radius: $border_radius;
62
+ line-height: 1.15;
63
+ &:after {
64
+ content: '\00bb';
65
+ display: block;
66
+ float: right;
67
+ padding: 10px 15px;
68
+ margin: -10px -15px;
69
+ -webkit-transform: rotate(90deg);
70
+ -ms-transform: rotate(90deg);
71
+ transform: rotate(90deg);
72
+ }
73
+ .fk-select-label {
74
+ color: #666;
75
+ &.fk-is-placeholder {
76
+ font-style: italic;
77
+ }
78
+ }
79
+ &.fk-select-focus {
80
+ border-color: #000;
81
+ .fl-select-label { color: #000; }
82
+ }
83
+ &.disabled {
84
+ opacity: 0.6;
85
+ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
86
+ }
87
+ }
88
+ .has-fk-select {
89
+ width: 100%;
90
+ border: 0;
91
+ }
92
+
93
+
94
+
95
+ //
96
+ // File input
97
+ //
98
+ .fk-file-input {
99
+ padding: 10px;
100
+ background: #fff;
101
+ border: 1px solid #ccc;
102
+ border-radius: $border_radius;
103
+ line-height: 1.15;
104
+ &:after {
105
+ right: 3px;
106
+ top: 3px;
107
+ padding: 8px 10px;
108
+ text-align: center;
109
+ color: #fff;
110
+ background-color: $color;
111
+ border-radius: $border_radius;
112
+ line-height: 1;
113
+ }
114
+ &.disabled {
115
+ opacity: 0.6;
116
+ }
117
+ }
118
+ }
@@ -0,0 +1,82 @@
1
+ $fk-color: #2f97e9;
2
+
3
+ .fk-theme-switches label {
4
+ //
5
+ // Labels
6
+ //
7
+ &.fk-radio,
8
+ &.fk-check {
9
+ &:before {
10
+ content: ' ';
11
+ width: 48px;
12
+ height: 20px;
13
+ background: #CDCDCD;
14
+ border: 1px solid darken(#CDCDCD, 10%);
15
+ }
16
+ &:after {
17
+ content: ' ';
18
+ width: 20px; height: 20px;
19
+ top: -2px;
20
+ background: #FFF;
21
+ border: 1px solid darken(#CDCDCD, 10%);
22
+ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
23
+ -webkit-transition: all 0.3s ease;
24
+ -o-transition: all 0.3s ease;
25
+ transition: all 0.3s ease;
26
+ }
27
+ }
28
+
29
+ &.fk-radio {
30
+ &:before {
31
+ width: 32px;
32
+ border-radius: 20px;
33
+ }
34
+ &:after {
35
+ border-radius: 20px;
36
+ left: 12px;
37
+ }
38
+ }
39
+
40
+ &.fk-check {
41
+ &:before {
42
+ content: 'OFF';
43
+ padding-right: 18px;
44
+ color: #FFF;
45
+ font-size: 11px;
46
+ text-align: center;
47
+ line-height: 20px;
48
+ }
49
+ &:after {
50
+ left:28px;
51
+ background: #FFF;
52
+ }
53
+ }
54
+
55
+ &.checked {
56
+ &.fk-radio {
57
+ &:before {
58
+ background: $fk-color;
59
+ border-color: $fk-color;
60
+ }
61
+ &:after {
62
+ left: 0;
63
+ border-color: $fk-color;
64
+ background: #FFF;
65
+ }
66
+ }
67
+ &.fk-check {
68
+ &:before {
69
+ content: 'ON';
70
+ background: $fk-color;
71
+ border-color: $fk-color;
72
+ padding-right: 0;
73
+ padding-left: 18px;
74
+ }
75
+ &:after {
76
+ left: 0;
77
+ border-color: $fk-color;
78
+ background: #FFF;
79
+ }
80
+ }
81
+ }
82
+ }
metadata ADDED
@@ -0,0 +1,99 @@
1
+ --- !ruby/object:Gem::Specification
2
+ name: formikation
3
+ version: !ruby/object:Gem::Version
4
+ version: 0.2.7
5
+ platform: ruby
6
+ authors:
7
+ - vortizhe
8
+ autorequire:
9
+ bindir: bin
10
+ cert_chain: []
11
+ date: 2016-07-12 00:00:00.000000000 Z
12
+ dependencies:
13
+ - !ruby/object:Gem::Dependency
14
+ name: bundler
15
+ requirement: !ruby/object:Gem::Requirement
16
+ requirements:
17
+ - - "~>"
18
+ - !ruby/object:Gem::Version
19
+ version: '1.7'
20
+ type: :development
21
+ prerelease: false
22
+ version_requirements: !ruby/object:Gem::Requirement
23
+ requirements:
24
+ - - "~>"
25
+ - !ruby/object:Gem::Version
26
+ version: '1.7'
27
+ - !ruby/object:Gem::Dependency
28
+ name: rake
29
+ requirement: !ruby/object:Gem::Requirement
30
+ requirements:
31
+ - - "~>"
32
+ - !ruby/object:Gem::Version
33
+ version: '10.0'
34
+ type: :development
35
+ prerelease: false
36
+ version_requirements: !ruby/object:Gem::Requirement
37
+ requirements:
38
+ - - "~>"
39
+ - !ruby/object:Gem::Version
40
+ version: '10.0'
41
+ description: Formikation is a simple jQuery plugin to beautify form inputs, select,
42
+ radios and checkboxes with some css. It supports custom theming and is IE8+ compatible.
43
+ email:
44
+ - kespers@gmail.com
45
+ executables: []
46
+ extensions: []
47
+ extra_rdoc_files: []
48
+ files:
49
+ - ".gitignore"
50
+ - CNAME
51
+ - Gemfile
52
+ - Gulpfile.js
53
+ - LICENSE.txt
54
+ - README.md
55
+ - Rakefile
56
+ - demo/index.html
57
+ - demo/ready.js
58
+ - dist/formikation.css
59
+ - dist/formikation.js
60
+ - dist/formikation.min.css
61
+ - dist/formikation.min.js
62
+ - dist/maps/formikation.js.min.map
63
+ - dist/themes/fk-theme-default.css
64
+ - dist/themes/fk-theme-switches.css
65
+ - formikation.gemspec
66
+ - index.html
67
+ - lib/formikation.rb
68
+ - lib/formikation/engine.rb
69
+ - lib/formikation/version.rb
70
+ - package.json
71
+ - src/formikation.js
72
+ - src/formikation.scss
73
+ - src/themes/fk-theme-default.scss
74
+ - src/themes/fk-theme-switches.scss
75
+ homepage: http://vortizhe.me/formikation/
76
+ licenses:
77
+ - MIT
78
+ metadata: {}
79
+ post_install_message:
80
+ rdoc_options: []
81
+ require_paths:
82
+ - lib
83
+ required_ruby_version: !ruby/object:Gem::Requirement
84
+ requirements:
85
+ - - ">="
86
+ - !ruby/object:Gem::Version
87
+ version: '0'
88
+ required_rubygems_version: !ruby/object:Gem::Requirement
89
+ requirements:
90
+ - - ">="
91
+ - !ruby/object:Gem::Version
92
+ version: '0'
93
+ requirements: []
94
+ rubyforge_project:
95
+ rubygems_version: 2.4.5
96
+ signing_key:
97
+ specification_version: 4
98
+ summary: Formikation is a simple jQuery plugin to beautify form inputs with some css.
99
+ test_files: []