euphoria 0.1.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 +7 -0
- data/.gitignore +9 -0
- data/.rspec +2 -0
- data/.travis.yml +3 -0
- data/Gemfile +4 -0
- data/LICENSE.txt +21 -0
- data/README.md +40 -0
- data/Rakefile +1 -0
- data/assets/javascripts/interface/UI-modules.coffee +26 -0
- data/assets/javascripts/interface/index.js +1 -0
- data/assets/stylesheets/euphoria css/components/_buttons.sass +63 -0
- data/assets/stylesheets/euphoria css/components/_forms.sass +36 -0
- data/assets/stylesheets/euphoria css/components/_menus.sass +106 -0
- data/assets/stylesheets/euphoria css/components/_tables.sass +89 -0
- data/assets/stylesheets/euphoria css/core/_containers.sass +53 -0
- data/assets/stylesheets/euphoria css/core/_grids.sass +54 -0
- data/assets/stylesheets/euphoria css/core/_responsive.sass +20 -0
- data/assets/stylesheets/euphoria css/core/_type.sass +31 -0
- data/assets/stylesheets/euphoria css/helpers/_mixins.sass +97 -0
- data/assets/stylesheets/euphoria css/helpers/_reset.sass +64 -0
- data/assets/stylesheets/euphoria css/index.css +3 -0
- data/assets/stylesheets/euphoria css/interface/parallax.sass +95 -0
- data/assets/stylesheets/euphoria css/load.sass +14 -0
- data/bin/console +14 -0
- data/bin/setup +7 -0
- data/euphoria.gemspec +27 -0
- data/lib/euphoria.rb +8 -0
- data/lib/euphoria/version.rb +3 -0
- metadata +141 -0
checksums.yaml
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
---
|
2
|
+
SHA1:
|
3
|
+
metadata.gz: 2d2378b520628a0e963c2edded23f7d6807f1fb4
|
4
|
+
data.tar.gz: 3745cb85baf85915356b13b0ee4fd06c9b5ff0b6
|
5
|
+
SHA512:
|
6
|
+
metadata.gz: c94219d759ff307d0001b42a53c0c589c5d63cf0ed066bd5d525f0ae66927b0c21dd67b2a312af264c425ec8553e87bf6a9fa046b9aece5a432113e8af171b34
|
7
|
+
data.tar.gz: a81c6e95b0b447cc0af59cb010c4029f2e6a8f603036192971a4a14b09e5f0b071ce08accbb754162bcdefd002a84e99d58ce4cb9f0d0353d042437eacf898c4
|
data/.gitignore
ADDED
data/.rspec
ADDED
data/.travis.yml
ADDED
data/Gemfile
ADDED
data/LICENSE.txt
ADDED
@@ -0,0 +1,21 @@
|
|
1
|
+
The MIT License (MIT)
|
2
|
+
|
3
|
+
Copyright (c) 2015 paul brunache
|
4
|
+
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
7
|
+
in the Software without restriction, including without limitation the rights
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
10
|
+
furnished to do so, subject to the following conditions:
|
11
|
+
|
12
|
+
The above copyright notice and this permission notice shall be included in
|
13
|
+
all copies or substantial portions of the Software.
|
14
|
+
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
21
|
+
THE SOFTWARE.
|
data/README.md
ADDED
@@ -0,0 +1,40 @@
|
|
1
|
+
# Euphoria
|
2
|
+
|
3
|
+
A lightweight css flex-grid framework to ease workflow. We hate IE
|
4
|
+
|
5
|
+
## Installation
|
6
|
+
|
7
|
+
Add this line to your application's Gemfile:
|
8
|
+
|
9
|
+
```ruby
|
10
|
+
gem 'euphoria'
|
11
|
+
```
|
12
|
+
|
13
|
+
And then execute:
|
14
|
+
|
15
|
+
$ bundle
|
16
|
+
|
17
|
+
Or install it yourself as:
|
18
|
+
|
19
|
+
$ gem install euphoria
|
20
|
+
|
21
|
+
## Usage
|
22
|
+
|
23
|
+
TODO:
|
24
|
+
|
25
|
+
In the application.js add //= require UI-modules
|
26
|
+
In the application.js add *= require load
|
27
|
+
|
28
|
+
## Development
|
29
|
+
|
30
|
+
After checking out the repo, run `bin/setup` to install dependencies. Then, run `bin/console` for an interactive prompt that will allow you to experiment.
|
31
|
+
|
32
|
+
To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release` to create a git tag for the version, push git commits and tags, and push the `.gem` file to [rubygems.org](https://rubygems.org).
|
33
|
+
|
34
|
+
## Contributing
|
35
|
+
|
36
|
+
1. Fork it ( https://github.com/[my-github-username]/euphoria/fork )
|
37
|
+
2. Create your feature branch (`git checkout -b my-new-feature`)
|
38
|
+
3. Commit your changes (`git commit -am 'Add some feature'`)
|
39
|
+
4. Push to the branch (`git push origin my-new-feature`)
|
40
|
+
5. Create a new Pull Request
|
data/Rakefile
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
require "bundler/gem_tasks"
|
@@ -0,0 +1,26 @@
|
|
1
|
+
$(document).on 'page:change', ->
|
2
|
+
#######################################################################################
|
3
|
+
#set marging for fixed nav so content is visible
|
4
|
+
#######################################################################################
|
5
|
+
$(".menu-toggle").on "click", ->
|
6
|
+
|
7
|
+
if $(".tablet-menu .menu-toggle").hasClass("fa-bars")
|
8
|
+
$(".tablet-menu .menu-toggle").removeClass("fa-bars").addClass("fa-times")
|
9
|
+
else
|
10
|
+
$(".tablet-menu .menu-toggle").addClass("fa-bars").fadeIn().removeClass("fa-times")
|
11
|
+
$(".menu").slideToggle()
|
12
|
+
|
13
|
+
#on resize
|
14
|
+
#account for margin with fixed nav class
|
15
|
+
$(window).resize ->
|
16
|
+
if $('div').hasClass('menu-container fixed')
|
17
|
+
$('.start-content').css 'margin-top', $('.menu-container').height() + 10
|
18
|
+
if $(window).width() > 1023
|
19
|
+
$('.menu').removeAttr('style');
|
20
|
+
|
21
|
+
$(window).trigger 'resize'
|
22
|
+
|
23
|
+
|
24
|
+
#set marging for fixed nav so content is visible
|
25
|
+
$('[data-img-src]').css 'background-image', ->
|
26
|
+
bg = 'url(' + $(this).data('img-src')+')'
|
@@ -0,0 +1 @@
|
|
1
|
+
//= require ./UI-modules
|
@@ -0,0 +1,63 @@
|
|
1
|
+
/*=============================================================================
|
2
|
+
** Variables
|
3
|
+
**==============================================================================
|
4
|
+
//Button Colors
|
5
|
+
$blue: #3498db
|
6
|
+
$green: #2ecc71
|
7
|
+
$red: #e74c3c
|
8
|
+
$grey: #bdc3c7
|
9
|
+
$white: #fff
|
10
|
+
|
11
|
+
|
12
|
+
/*=============================================================================
|
13
|
+
** Button
|
14
|
+
**==============================================================================
|
15
|
+
.btn
|
16
|
+
text-align: center
|
17
|
+
border: 1px solid #e5e6e7
|
18
|
+
font-size: 1rem
|
19
|
+
padding: .5em
|
20
|
+
line-height: 1.375rem
|
21
|
+
letter-spacing: .1rem
|
22
|
+
text-transform: uppercase
|
23
|
+
text-decoration: none
|
24
|
+
white-space: nowrap
|
25
|
+
+border-radius (.5)
|
26
|
+
&.sm //Button size
|
27
|
+
font-size: 0.625rem
|
28
|
+
line-height: 1.675rem
|
29
|
+
&.lg
|
30
|
+
font-size: 1.625rem
|
31
|
+
line-height: 1.675rem
|
32
|
+
&.xl
|
33
|
+
font-size: 1.875rem
|
34
|
+
line-height: 1.875rem
|
35
|
+
&.blue //button color
|
36
|
+
background-color: $blue
|
37
|
+
border: 1px solid #3085d6
|
38
|
+
&:hover
|
39
|
+
background: #5b9ede
|
40
|
+
&.green
|
41
|
+
background-color: $green
|
42
|
+
border: 1px solid #5bde9b
|
43
|
+
&:hover
|
44
|
+
background: #46da8e
|
45
|
+
&.red
|
46
|
+
background-color: $red
|
47
|
+
border: 1px solid #c6282a
|
48
|
+
&:hover
|
49
|
+
background: #da4648
|
50
|
+
&.grey
|
51
|
+
background-color: $grey
|
52
|
+
border: 1px solid #a5a5a5
|
53
|
+
&:hover
|
54
|
+
background: #5b9ede
|
55
|
+
&.white
|
56
|
+
background-color: $white
|
57
|
+
border: 1px solid #cbcbcb
|
58
|
+
&:hover
|
59
|
+
background: #5b9ede
|
60
|
+
|
61
|
+
/*=============================================================================
|
62
|
+
**
|
63
|
+
**==============================================================================
|
@@ -0,0 +1,36 @@
|
|
1
|
+
$login_background: white
|
2
|
+
$form_border_color: #ddd
|
3
|
+
$sticky_label_color: black
|
4
|
+
$sticky_label_background: #ccc
|
5
|
+
$sticky_label_border: #ccc
|
6
|
+
.form
|
7
|
+
border: 1px solid $form_border_color
|
8
|
+
.form-row
|
9
|
+
width: 100%
|
10
|
+
margin: 1% 0
|
11
|
+
margin:auto
|
12
|
+
input[type="radio"]
|
13
|
+
display: inline
|
14
|
+
input[type="email"], input[type="password"]
|
15
|
+
+border-radius(.3)
|
16
|
+
margin: 0 1%
|
17
|
+
width: 98%
|
18
|
+
border: 1px solid #ddd
|
19
|
+
|
20
|
+
.login-form
|
21
|
+
background: $login_background
|
22
|
+
border: 1px solid $form_border_color
|
23
|
+
margin: 1%
|
24
|
+
|
25
|
+
input[type="checkbox"]
|
26
|
+
display: none
|
27
|
+
+ label span
|
28
|
+
display: inline-block
|
29
|
+
width: 19px
|
30
|
+
height: 19px
|
31
|
+
margin: -1px 4px 0 0
|
32
|
+
vertical-align: middle
|
33
|
+
background: url(check_radio_sheet.png) left top no-repeat
|
34
|
+
cursor: pointer
|
35
|
+
&:checked + label span
|
36
|
+
background: url(check_radio_sheet.png) -19px top no-repeat
|
@@ -0,0 +1,106 @@
|
|
1
|
+
/*=============================================================================
|
2
|
+
** Variables
|
3
|
+
**==============================================================================
|
4
|
+
//menu li border color
|
5
|
+
$li_border_color: #dfdfdf
|
6
|
+
//links hover color
|
7
|
+
$link_hover_color: rgba(0, 0, 0, 0.5)
|
8
|
+
/*======================================
|
9
|
+
** Menu values
|
10
|
+
**=====================================
|
11
|
+
// menu's font
|
12
|
+
$menu_font: 'Lora', serif, Times
|
13
|
+
//link font size
|
14
|
+
$menu_font_size: 1rem
|
15
|
+
//link padding
|
16
|
+
$menu_link_padding: 1rem 1.5rem
|
17
|
+
|
18
|
+
/*=============================================================================
|
19
|
+
** DRY
|
20
|
+
**==============================================================================
|
21
|
+
|
22
|
+
%menu_default
|
23
|
+
background: none repeat scroll 0% 0% rgba(255, 255, 255, 0.95)
|
24
|
+
text-align: center
|
25
|
+
text-transform: uppercase
|
26
|
+
letter-spacing: 1px
|
27
|
+
list-style-type: none
|
28
|
+
+flex
|
29
|
+
+flex-horizontal
|
30
|
+
align-items: center
|
31
|
+
justify-content: center
|
32
|
+
li
|
33
|
+
+flex
|
34
|
+
align-items: center
|
35
|
+
justify-content: center
|
36
|
+
a
|
37
|
+
padding: $menu_link_padding
|
38
|
+
font-family: $menu_font
|
39
|
+
&:hover
|
40
|
+
color: $link_hover_color
|
41
|
+
&.bordered
|
42
|
+
li
|
43
|
+
border-right: 1px solid $li_border_color
|
44
|
+
|
45
|
+
&.active-bottom
|
46
|
+
border-bottom: 2px solid #98F5FF
|
47
|
+
&.vertical
|
48
|
+
+flex-horizontal(false)
|
49
|
+
&.left
|
50
|
+
justify-content: flex-start
|
51
|
+
&.right
|
52
|
+
justify-content: flex-end
|
53
|
+
/*=============================================================================
|
54
|
+
** Mobile Menu
|
55
|
+
**==============================================================================
|
56
|
+
|
57
|
+
.tablet-menu
|
58
|
+
@extend %menu_default
|
59
|
+
display: none
|
60
|
+
a
|
61
|
+
font-size: $menu_font_size
|
62
|
+
/*=============================================================================
|
63
|
+
** Regular Menu
|
64
|
+
**==============================================================================
|
65
|
+
|
66
|
+
.menu
|
67
|
+
@extend %menu_default
|
68
|
+
|
69
|
+
/*=============================================================================
|
70
|
+
** Responsive
|
71
|
+
**==============================================================================
|
72
|
+
|
73
|
+
+tablet
|
74
|
+
.tablet-menu
|
75
|
+
width: 95%
|
76
|
+
margin: auto
|
77
|
+
+flex
|
78
|
+
+flex-horizontal
|
79
|
+
align-items: center
|
80
|
+
justify-content: flex-start
|
81
|
+
li
|
82
|
+
&.menu-toggle
|
83
|
+
z-index
|
84
|
+
width: 100%
|
85
|
+
border-bottom: 1px solid $li_border_color
|
86
|
+
justify-content: flex-start
|
87
|
+
padding: .3rem 0
|
88
|
+
|
89
|
+
margin-right: 2%
|
90
|
+
a
|
91
|
+
padding: 1rem
|
92
|
+
.menu
|
93
|
+
display: none
|
94
|
+
li
|
95
|
+
+flex-horizontal(false)
|
96
|
+
width: 100%
|
97
|
+
&.bordered
|
98
|
+
li
|
99
|
+
border-bottom: 1px solid $li_border_color
|
100
|
+
|
101
|
+
+small-tablet
|
102
|
+
.menu-toggle
|
103
|
+
margin-bottom: 1%
|
104
|
+
li
|
105
|
+
width: 47%
|
106
|
+
|
@@ -0,0 +1,89 @@
|
|
1
|
+
/*=============================================================================
|
2
|
+
** Reusable colors
|
3
|
+
**============================================================================
|
4
|
+
$green: #33FF99
|
5
|
+
$yellow: #FFFF66
|
6
|
+
$red: #FF6666
|
7
|
+
$orange: #f39c12
|
8
|
+
$purple: #9966FF
|
9
|
+
$gray: #ecf0f1
|
10
|
+
|
11
|
+
/*=============================================================================
|
12
|
+
** Variables
|
13
|
+
**============================================================================
|
14
|
+
|
15
|
+
$th_font_color: #222222 //table font color
|
16
|
+
$th_backg_color: $gray
|
17
|
+
$tbl_font: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif
|
18
|
+
|
19
|
+
|
20
|
+
table
|
21
|
+
font: $tbl_font
|
22
|
+
border: 1px solid #ccc
|
23
|
+
width: 100%
|
24
|
+
margin: 0
|
25
|
+
padding: 0
|
26
|
+
border-collapse: collapse
|
27
|
+
border-spacing: 0
|
28
|
+
tr
|
29
|
+
border: 1px solid #ddd
|
30
|
+
padding: 5px
|
31
|
+
th, td
|
32
|
+
padding: 10px
|
33
|
+
text-align: center
|
34
|
+
th
|
35
|
+
text-transform: uppercase
|
36
|
+
letter-spacing: 1px
|
37
|
+
color: $th_font_color
|
38
|
+
background: $th_backg_color
|
39
|
+
font-size: 0.77778rem
|
40
|
+
font-weight: bold
|
41
|
+
padding: 0.44444rem 0.55556rem 0.55556rem
|
42
|
+
&.bordered
|
43
|
+
border-collapse: separate
|
44
|
+
border-spacing: 2px
|
45
|
+
&.alternate
|
46
|
+
tr:nth-child(even)
|
47
|
+
background: $gray
|
48
|
+
&.green
|
49
|
+
tr:nth-child(even)
|
50
|
+
background-color: $green
|
51
|
+
&.purple
|
52
|
+
tr:nth-child(even)
|
53
|
+
background: $purple
|
54
|
+
&.red
|
55
|
+
tr:nth-child(even)
|
56
|
+
background: $red
|
57
|
+
&.yellow
|
58
|
+
tr:nth-child(even)
|
59
|
+
background: $yellow
|
60
|
+
&.orange
|
61
|
+
tr:nth-child(even)
|
62
|
+
background: $orange
|
63
|
+
|
64
|
+
|
65
|
+
/*=============================================================================
|
66
|
+
** Responsive Grids
|
67
|
+
**============================================================================
|
68
|
+
|
69
|
+
+small-tablet
|
70
|
+
table
|
71
|
+
border: 0
|
72
|
+
thead
|
73
|
+
display: none
|
74
|
+
tr
|
75
|
+
margin-bottom: 10px
|
76
|
+
display: block
|
77
|
+
border-bottom: 2px solid #ddd
|
78
|
+
td
|
79
|
+
display: block
|
80
|
+
text-align: right
|
81
|
+
font-size: 13px
|
82
|
+
border-bottom: 1px dotted #ccc
|
83
|
+
&:last-child
|
84
|
+
border-bottom: 0
|
85
|
+
&:before
|
86
|
+
content: attr(data-name)
|
87
|
+
float: left
|
88
|
+
text-transform: uppercase
|
89
|
+
font-weight: bold
|
@@ -0,0 +1,53 @@
|
|
1
|
+
//Menu container variable
|
2
|
+
$menu_bg: #fff
|
3
|
+
|
4
|
+
/*=============================================================================
|
5
|
+
** Main container
|
6
|
+
**============================================================================
|
7
|
+
.site-container
|
8
|
+
max-width: 75rem
|
9
|
+
@extend %default_prop
|
10
|
+
|
11
|
+
//mostly used if you have a fixed navbar
|
12
|
+
.start-content
|
13
|
+
@extend %default_prop
|
14
|
+
z-index: -1
|
15
|
+
overflow: hidden
|
16
|
+
|
17
|
+
/*=============================================================================
|
18
|
+
** Rows
|
19
|
+
**============================================================================
|
20
|
+
.row
|
21
|
+
@extend %default_prop
|
22
|
+
margin-bottom: 1%
|
23
|
+
+flex
|
24
|
+
+flex-horizontal
|
25
|
+
|
26
|
+
/*=============================================================================
|
27
|
+
** Menu
|
28
|
+
**============================================================================
|
29
|
+
.menu-container
|
30
|
+
@extend %default_prop
|
31
|
+
background-color: $menu_bg
|
32
|
+
min-height: 50px
|
33
|
+
box-shadow: 0 2px 10px 0 rgba(0,0,0,0.16)
|
34
|
+
margin-bottom: 5%
|
35
|
+
&.fixed
|
36
|
+
position: fixed
|
37
|
+
top: 0
|
38
|
+
left: 0
|
39
|
+
|
40
|
+
/*=============================================================================
|
41
|
+
** text box holder
|
42
|
+
**============================================================================
|
43
|
+
.content-box
|
44
|
+
padding: 1.5%
|
45
|
+
|
46
|
+
/*=============================================================================
|
47
|
+
** DRY
|
48
|
+
**============================================================================
|
49
|
+
|
50
|
+
%default_prop
|
51
|
+
width: 100%
|
52
|
+
margin: auto
|
53
|
+
|
@@ -0,0 +1,54 @@
|
|
1
|
+
/*=============================================================================
|
2
|
+
** Grids
|
3
|
+
**============================================================================
|
4
|
+
|
5
|
+
@for $i from 1 through 18
|
6
|
+
.c-#{$i}
|
7
|
+
width: $i / 18 * 100%
|
8
|
+
|
9
|
+
/*=============================================================================
|
10
|
+
** spaces or gaps
|
11
|
+
**============================================================================
|
12
|
+
@for $i from 1 through 18
|
13
|
+
.space-l-#{$i}
|
14
|
+
width: $i / 18 * 100%
|
15
|
+
.space-r-#{$i}
|
16
|
+
width: $i / 18 * 100%
|
17
|
+
|
18
|
+
|
19
|
+
/*=============================================================================
|
20
|
+
** Responsive Grids
|
21
|
+
**============================================================================
|
22
|
+
+tablet
|
23
|
+
@for $i from 1 through 11
|
24
|
+
.c-#{$i}
|
25
|
+
width: 50%
|
26
|
+
@for $i from 12 through 18
|
27
|
+
.c-#{$i}
|
28
|
+
width: 100%
|
29
|
+
|
30
|
+
@for $i from 1 through 18
|
31
|
+
.tablet-#{$i}
|
32
|
+
width: $i / 18 * 100%
|
33
|
+
|
34
|
+
+small-tablet
|
35
|
+
@for $i from 1 through 4
|
36
|
+
.c-#{$i}
|
37
|
+
width: $i / 4 * 100%
|
38
|
+
@for $i from 5 through 9
|
39
|
+
.c-#{$i}
|
40
|
+
width: 100%
|
41
|
+
|
42
|
+
@for $i from 1 through 18
|
43
|
+
.sm-tablet-#{$i}
|
44
|
+
width: $i / 18 * 100%
|
45
|
+
|
46
|
+
+mobile
|
47
|
+
@for $i from 1 through 18
|
48
|
+
.c-#{$i}
|
49
|
+
width: 100%
|
50
|
+
|
51
|
+
@for $i from 1 through 18
|
52
|
+
.mobile-#{$i}
|
53
|
+
width: $i / 18 * 100%
|
54
|
+
|
@@ -0,0 +1,20 @@
|
|
1
|
+
$mobile-width: 30rem //480px
|
2
|
+
$tablet-width: 50rem //800px
|
3
|
+
$desktop-width: 64rem //1024px
|
4
|
+
$lg-desktop-width: 75rem //1200px
|
5
|
+
|
6
|
+
=lg-desktop
|
7
|
+
@media all and (min-width: #{$lg-desktop-width})
|
8
|
+
@content
|
9
|
+
|
10
|
+
=tablet
|
11
|
+
@media all and (max-width: #{$desktop-width - .063rem})
|
12
|
+
@content
|
13
|
+
|
14
|
+
=small-tablet
|
15
|
+
@media all and (max-width: #{$tablet-width - .063rem})
|
16
|
+
@content
|
17
|
+
|
18
|
+
=mobile
|
19
|
+
@media all and (max-width: #{$mobile-width - .063rem})
|
20
|
+
@content
|
@@ -0,0 +1,31 @@
|
|
1
|
+
html
|
2
|
+
font-size: 17px
|
3
|
+
|
4
|
+
h1
|
5
|
+
font-size: 3rem
|
6
|
+
|
7
|
+
h2
|
8
|
+
font-size: 2.5rem
|
9
|
+
|
10
|
+
h3
|
11
|
+
font-size: 2rem
|
12
|
+
|
13
|
+
h4
|
14
|
+
font-size: 1.5rem
|
15
|
+
|
16
|
+
p
|
17
|
+
font-size: 1rem
|
18
|
+
|
19
|
+
+lg-desktop
|
20
|
+
html
|
21
|
+
font-size: 18px
|
22
|
+
|
23
|
+
|
24
|
+
+tablet
|
25
|
+
html
|
26
|
+
font-size: 16px
|
27
|
+
|
28
|
+
|
29
|
+
+mobile
|
30
|
+
html
|
31
|
+
font-size: 15px
|
@@ -0,0 +1,97 @@
|
|
1
|
+
$i_color: #ecf0f1 // icon color
|
2
|
+
$s_color: #12664b // shadow color
|
3
|
+
$b_color: #27ae60 // background color
|
4
|
+
$b_radius: .5 // bg border radius
|
5
|
+
|
6
|
+
/*=============================================================================
|
7
|
+
** Transform/transform
|
8
|
+
**============================================================================
|
9
|
+
|
10
|
+
=transform-style-fix($value)
|
11
|
+
-webkit-transform-style: $value
|
12
|
+
-moz-transform-style: $value
|
13
|
+
-ms-transform-style: $value
|
14
|
+
-o-transform-style: $value
|
15
|
+
transform-style: $value
|
16
|
+
|
17
|
+
=transform-fix($value)
|
18
|
+
-moz-transform: $value
|
19
|
+
-o-transform: $value
|
20
|
+
-webkit-transform: $value
|
21
|
+
-ms-transform: $value
|
22
|
+
transform: $value
|
23
|
+
|
24
|
+
=transition-fix($value)
|
25
|
+
-moz-transition: $value
|
26
|
+
-o-transition: $value
|
27
|
+
-webkit-transition: $value
|
28
|
+
-ms-transition: $value
|
29
|
+
transition: $value
|
30
|
+
|
31
|
+
/*=============================================================================
|
32
|
+
** Flex box
|
33
|
+
**============================================================================
|
34
|
+
|
35
|
+
=flex
|
36
|
+
display: -webkit-box
|
37
|
+
display: -moz-box
|
38
|
+
display: -ms-flexbox
|
39
|
+
display: -webkit-flex
|
40
|
+
display: flex
|
41
|
+
flex-flow: row wrap
|
42
|
+
|
43
|
+
=flex-horizontal ($row: true)
|
44
|
+
@if $row
|
45
|
+
-webkit-flex-direction: row
|
46
|
+
flex-direction: row
|
47
|
+
@else
|
48
|
+
-webkit-flex-direction: column
|
49
|
+
flex-direction: column
|
50
|
+
/*=============================================================================
|
51
|
+
** Rounded corners
|
52
|
+
**============================================================================
|
53
|
+
|
54
|
+
=border-radius ($bradius)
|
55
|
+
-webkit-border-radius: $bradius+rem
|
56
|
+
-moz-border-radius: $bradius+rem
|
57
|
+
-ms-border-radius: $bradius+rem
|
58
|
+
border-radius: $bradius+rem
|
59
|
+
|
60
|
+
/*=============================================================================
|
61
|
+
** Box Shawdow
|
62
|
+
**============================================================================
|
63
|
+
=box-shadow($top, $left, $blur, $size, $color, $inset: false)
|
64
|
+
@if $inset
|
65
|
+
-webkit-box-shadow: inset $top $left $blur $size $color
|
66
|
+
-moz-box-shadow: inset $top $left $blur $size $color
|
67
|
+
box-shadow: inset $top $left $blur $size $color
|
68
|
+
-o-box-shadow: inset $top $left $blur $size $color
|
69
|
+
@else
|
70
|
+
-webkit-box-shadow: $top $left $blur $size $color
|
71
|
+
-moz-box-shadow: $top $left $blur $size $color
|
72
|
+
box-shadow: $top $left $blur $size $color
|
73
|
+
-o-box-shadow: inset $top $left $blur $size $color
|
74
|
+
|
75
|
+
/*=============================================================================
|
76
|
+
** Long Shadow Flat Design + Icon size
|
77
|
+
**============================================================================
|
78
|
+
=long-shadow($scolor, $length)
|
79
|
+
$list: ()
|
80
|
+
@for $i from 1 through $length
|
81
|
+
$list: append($list, $scolor $i + px $i + px, comma)
|
82
|
+
text-shadow: $list
|
83
|
+
|
84
|
+
=icon-size($length)
|
85
|
+
text-align: center
|
86
|
+
overflow: hidden
|
87
|
+
width: $length + px
|
88
|
+
height: $length + px
|
89
|
+
font-size: $length / 2 + px
|
90
|
+
line-height: $length + px
|
91
|
+
background-color: $b_color
|
92
|
+
display: inline-block
|
93
|
+
color: $i_color
|
94
|
+
+long-shadow($s_color, $length)
|
95
|
+
+border-radius($b_radius)
|
96
|
+
@if $length <= 30
|
97
|
+
+border-radius(.4)
|
@@ -0,0 +1,64 @@
|
|
1
|
+
body, html
|
2
|
+
overflow: hidden
|
3
|
+
|
4
|
+
html
|
5
|
+
-webkit-font-smoothing: antialiased
|
6
|
+
-moz-osx-font-smoothing: grayscale
|
7
|
+
height: 100%
|
8
|
+
body
|
9
|
+
margin: 0
|
10
|
+
padding: 0
|
11
|
+
|
12
|
+
|
13
|
+
h1,
|
14
|
+
h2,
|
15
|
+
h3,
|
16
|
+
h4,
|
17
|
+
p,
|
18
|
+
blockquote,
|
19
|
+
figure,
|
20
|
+
ol,
|
21
|
+
ul
|
22
|
+
margin: 0
|
23
|
+
padding: 0
|
24
|
+
|
25
|
+
li
|
26
|
+
display: block
|
27
|
+
|
28
|
+
h1,
|
29
|
+
h2,
|
30
|
+
h3,
|
31
|
+
h4
|
32
|
+
font-size: inherit
|
33
|
+
|
34
|
+
a
|
35
|
+
text-decoration: none
|
36
|
+
color: inherit
|
37
|
+
-webkit-transition: .3s
|
38
|
+
-moz-transition: .3s
|
39
|
+
transition: .3s
|
40
|
+
|
41
|
+
img
|
42
|
+
max-width: 100%
|
43
|
+
height: auto
|
44
|
+
border: 0
|
45
|
+
|
46
|
+
input[type="text"],
|
47
|
+
input[type="url"],
|
48
|
+
input[type="tel"],
|
49
|
+
input[type="email"],
|
50
|
+
input[type="password"]
|
51
|
+
-webkit-box-sizing: border-box
|
52
|
+
-moz-box-sizing: border-box
|
53
|
+
box-sizing: border-box
|
54
|
+
margin: 0
|
55
|
+
max-width: 100%
|
56
|
+
line-height: 1
|
57
|
+
padding: 1%
|
58
|
+
|
59
|
+
|
60
|
+
button,input,optgroup,select,textarea
|
61
|
+
color: inherit
|
62
|
+
font: inherit
|
63
|
+
margin: 0
|
64
|
+
|
@@ -0,0 +1,95 @@
|
|
1
|
+
.parallax
|
2
|
+
-webkit-perspective: 300px
|
3
|
+
perspective: 300px
|
4
|
+
height: 100vh
|
5
|
+
overflow-x: hidden
|
6
|
+
overflow-y: auto
|
7
|
+
font-size: 200%
|
8
|
+
.parallax-group--header
|
9
|
+
height: 100vh
|
10
|
+
-webkit-transform: translateZ(-300px) scale(2)
|
11
|
+
transform: translateZ(-300px) scale(2)
|
12
|
+
background-size: 100% 100% / cover
|
13
|
+
|
14
|
+
.parallax-group
|
15
|
+
min-height: 90vh
|
16
|
+
position: relative
|
17
|
+
-webkit-transform-style: preserve-3d
|
18
|
+
transform-style: preserve-3d
|
19
|
+
-webkit-transition: -webkit-transform 0.5s ease 0s
|
20
|
+
transition: transform 0.5s ease 0s
|
21
|
+
&:nth-child(odd)
|
22
|
+
z-index: 2
|
23
|
+
&:nth-child(even)
|
24
|
+
z-index: 0
|
25
|
+
|
26
|
+
|
27
|
+
.parallax-layer
|
28
|
+
position: absolute
|
29
|
+
top: 0
|
30
|
+
left: 0
|
31
|
+
right: 0
|
32
|
+
bottom: 0
|
33
|
+
text-align: center
|
34
|
+
|
35
|
+
&.parallax-back
|
36
|
+
-webkit-transform: translateZ(-300px) scale(2)
|
37
|
+
transform: translateZ(-300px) scale(2)
|
38
|
+
background-size: 100% 100% / cover
|
39
|
+
height: 100vh
|
40
|
+
|
41
|
+
&.fix
|
42
|
+
background-image: url("http://3.bp.blogspot.com/-ck7oCUJbjL8/U3gfVP5GHiI/AAAAAAAAGvc/aB1Gu04uTVs/s1600/watchmen+01.jpg")
|
43
|
+
z-index: 2
|
44
|
+
-webkit-transform: translateZ(0)
|
45
|
+
transform: translateZ(0)
|
46
|
+
|
47
|
+
&.parallax-face
|
48
|
+
-webkit-transform: translateZ(0)
|
49
|
+
transform: translateZ(0)
|
50
|
+
|
51
|
+
h1
|
52
|
+
position: absolute
|
53
|
+
top: 50%
|
54
|
+
left: 50%
|
55
|
+
-webkit-transform: translateX(-50%) translateY(-50%)
|
56
|
+
-ms-transform: translateX(-50%) translateY(-50%)
|
57
|
+
transform: translateX(-50%) translateY(-50%)
|
58
|
+
&.light
|
59
|
+
line-height: 100vh
|
60
|
+
background-color: rgba(255, 255, 255, 0.5)
|
61
|
+
width: 100%
|
62
|
+
&.dark
|
63
|
+
opacity: 0.5
|
64
|
+
|
65
|
+
/*=============================================================================
|
66
|
+
** Template must proceed as face and back
|
67
|
+
**============================================================================
|
68
|
+
.parallax
|
69
|
+
.parallax-group
|
70
|
+
.parallax-layer.parallax-face data-img-src="http://data.techtimes.com/data/images/full/14563/batman-arkham-knight-gamescom-5-jpg.jpg"
|
71
|
+
h1.light First layer front
|
72
|
+
.parallax-group
|
73
|
+
.parallax-layer.parallax-back data-img-src="http://data.techtimes.com/data/images/full/14563/batman-arkham-knight-gamescom-5-jpg.jpg"
|
74
|
+
h1.dark Second layer back
|
75
|
+
.parallax-layer.parallax-face
|
76
|
+
.parallax-group
|
77
|
+
.parallax-layer.parallax-back.fix data-img-src="http://data.techtimes.com/data/images/full/14563/batman-arkham-knight-gamescom-5-jpg.jpg"
|
78
|
+
h1.dark Thrird layer back
|
79
|
+
.parallax-layer.parallax-face.fix
|
80
|
+
.parallax-group
|
81
|
+
.parallax-layer.parallax-back data-img-src="http://data.techtimes.com/data/images/full/14563/batman-arkham-knight-gamescom-5-jpg.jpg"
|
82
|
+
h1.dark Second layer back
|
83
|
+
.parallax-layer.parallax-face
|
84
|
+
.parallax-group
|
85
|
+
.parallax-layer.parallax-back.fix data-img-src="http://data.techtimes.com/data/images/full/14563/batman-arkham-knight-gamescom-5-jpg.jpg"
|
86
|
+
h1.dark Thrird layer back
|
87
|
+
.parallax-layer.parallax-face.fix
|
88
|
+
.parallax-group
|
89
|
+
.parallax-layer.parallax-back data-img-src="http://data.techtimes.com/data/images/full/14563/batman-arkham-knight-gamescom-5-jpg.jpg"
|
90
|
+
h1.dark Second layer back
|
91
|
+
.parallax-layer.parallax-face
|
92
|
+
.parallax-group
|
93
|
+
.parallax-layer.parallax-back.fix data-img-src="http://data.techtimes.com/data/images/full/14563/batman-arkham-knight-gamescom-5-jpg.jpg"
|
94
|
+
h1.dark Thrird layer back
|
95
|
+
.parallax-layer.parallax-face.fix
|
@@ -0,0 +1,14 @@
|
|
1
|
+
@import "helpers/reset.sass"
|
2
|
+
@import "helpers/mixins.sass"
|
3
|
+
|
4
|
+
@import "core/responsive.sass"
|
5
|
+
@import "core/containers.sass"
|
6
|
+
@import "core/grids.sass"
|
7
|
+
@import "core/type.sass"
|
8
|
+
|
9
|
+
@import "components/buttons.sass"
|
10
|
+
@import "components/forms.sass"
|
11
|
+
@import "components/menus.sass"
|
12
|
+
@import "components/tables.sass"
|
13
|
+
|
14
|
+
@import "interface/parallax.sass"
|
data/bin/console
ADDED
@@ -0,0 +1,14 @@
|
|
1
|
+
#!/usr/bin/env ruby
|
2
|
+
|
3
|
+
require "bundler/setup"
|
4
|
+
require "euphoria"
|
5
|
+
|
6
|
+
# You can add fixtures and/or initialization code here to make experimenting
|
7
|
+
# with your gem easier. You can also use a different console, if you like.
|
8
|
+
|
9
|
+
# (If you use this, don't forget to add pry to your Gemfile!)
|
10
|
+
# require "pry"
|
11
|
+
# Pry.start
|
12
|
+
|
13
|
+
require "irb"
|
14
|
+
IRB.start
|
data/bin/setup
ADDED
data/euphoria.gemspec
ADDED
@@ -0,0 +1,27 @@
|
|
1
|
+
# coding: utf-8
|
2
|
+
lib = File.expand_path('../lib', __FILE__)
|
3
|
+
$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
|
4
|
+
require 'euphoria/version'
|
5
|
+
|
6
|
+
Gem::Specification.new do |spec|
|
7
|
+
spec.name = "euphoria"
|
8
|
+
spec.version = Euphoria::VERSION
|
9
|
+
spec.authors = ["paul brunache"]
|
10
|
+
spec.email = ["paulbrunache@gmail.com"]
|
11
|
+
|
12
|
+
spec.summary = %q{Yet another grid framework for the web built with components from flexbox}
|
13
|
+
|
14
|
+
spec.homepage = "https://github.com/PaulBrunache/Euphoria"
|
15
|
+
spec.license = "MIT"
|
16
|
+
|
17
|
+
spec.files = `git ls-files -z`.split("\x0").reject { |f| f.match(%r{^(test|spec|features)/}) }
|
18
|
+
spec.bindir = "exe"
|
19
|
+
spec.executables = spec.files.grep(%r{^exe/}) { |f| File.basename(f) }
|
20
|
+
spec.require_paths = ["lib"]
|
21
|
+
|
22
|
+
spec.add_development_dependency "bundler", "~> 1.9"
|
23
|
+
spec.add_development_dependency "rake", "~> 10.0"
|
24
|
+
spec.add_development_dependency "sass-rails", "~> 5.0.1"
|
25
|
+
spec.add_development_dependency "coffee-rails", "~> 4.1.0"
|
26
|
+
spec.add_development_dependency "font-awesome-rails", "~> 4.3.0.0"
|
27
|
+
end
|
data/lib/euphoria.rb
ADDED
metadata
ADDED
@@ -0,0 +1,141 @@
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
|
+
name: euphoria
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
version: 0.1.0
|
5
|
+
platform: ruby
|
6
|
+
authors:
|
7
|
+
- paul brunache
|
8
|
+
autorequire:
|
9
|
+
bindir: exe
|
10
|
+
cert_chain: []
|
11
|
+
date: 2015-05-17 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.9'
|
20
|
+
type: :development
|
21
|
+
prerelease: false
|
22
|
+
version_requirements: !ruby/object:Gem::Requirement
|
23
|
+
requirements:
|
24
|
+
- - "~>"
|
25
|
+
- !ruby/object:Gem::Version
|
26
|
+
version: '1.9'
|
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
|
+
- !ruby/object:Gem::Dependency
|
42
|
+
name: sass-rails
|
43
|
+
requirement: !ruby/object:Gem::Requirement
|
44
|
+
requirements:
|
45
|
+
- - "~>"
|
46
|
+
- !ruby/object:Gem::Version
|
47
|
+
version: 5.0.1
|
48
|
+
type: :development
|
49
|
+
prerelease: false
|
50
|
+
version_requirements: !ruby/object:Gem::Requirement
|
51
|
+
requirements:
|
52
|
+
- - "~>"
|
53
|
+
- !ruby/object:Gem::Version
|
54
|
+
version: 5.0.1
|
55
|
+
- !ruby/object:Gem::Dependency
|
56
|
+
name: coffee-rails
|
57
|
+
requirement: !ruby/object:Gem::Requirement
|
58
|
+
requirements:
|
59
|
+
- - "~>"
|
60
|
+
- !ruby/object:Gem::Version
|
61
|
+
version: 4.1.0
|
62
|
+
type: :development
|
63
|
+
prerelease: false
|
64
|
+
version_requirements: !ruby/object:Gem::Requirement
|
65
|
+
requirements:
|
66
|
+
- - "~>"
|
67
|
+
- !ruby/object:Gem::Version
|
68
|
+
version: 4.1.0
|
69
|
+
- !ruby/object:Gem::Dependency
|
70
|
+
name: font-awesome-rails
|
71
|
+
requirement: !ruby/object:Gem::Requirement
|
72
|
+
requirements:
|
73
|
+
- - "~>"
|
74
|
+
- !ruby/object:Gem::Version
|
75
|
+
version: 4.3.0.0
|
76
|
+
type: :development
|
77
|
+
prerelease: false
|
78
|
+
version_requirements: !ruby/object:Gem::Requirement
|
79
|
+
requirements:
|
80
|
+
- - "~>"
|
81
|
+
- !ruby/object:Gem::Version
|
82
|
+
version: 4.3.0.0
|
83
|
+
description:
|
84
|
+
email:
|
85
|
+
- paulbrunache@gmail.com
|
86
|
+
executables: []
|
87
|
+
extensions: []
|
88
|
+
extra_rdoc_files: []
|
89
|
+
files:
|
90
|
+
- ".gitignore"
|
91
|
+
- ".rspec"
|
92
|
+
- ".travis.yml"
|
93
|
+
- Gemfile
|
94
|
+
- LICENSE.txt
|
95
|
+
- README.md
|
96
|
+
- Rakefile
|
97
|
+
- assets/javascripts/interface/UI-modules.coffee
|
98
|
+
- assets/javascripts/interface/index.js
|
99
|
+
- assets/stylesheets/euphoria css/components/_buttons.sass
|
100
|
+
- assets/stylesheets/euphoria css/components/_forms.sass
|
101
|
+
- assets/stylesheets/euphoria css/components/_menus.sass
|
102
|
+
- assets/stylesheets/euphoria css/components/_tables.sass
|
103
|
+
- assets/stylesheets/euphoria css/core/_containers.sass
|
104
|
+
- assets/stylesheets/euphoria css/core/_grids.sass
|
105
|
+
- assets/stylesheets/euphoria css/core/_responsive.sass
|
106
|
+
- assets/stylesheets/euphoria css/core/_type.sass
|
107
|
+
- assets/stylesheets/euphoria css/helpers/_mixins.sass
|
108
|
+
- assets/stylesheets/euphoria css/helpers/_reset.sass
|
109
|
+
- assets/stylesheets/euphoria css/index.css
|
110
|
+
- assets/stylesheets/euphoria css/interface/parallax.sass
|
111
|
+
- assets/stylesheets/euphoria css/load.sass
|
112
|
+
- bin/console
|
113
|
+
- bin/setup
|
114
|
+
- euphoria.gemspec
|
115
|
+
- lib/euphoria.rb
|
116
|
+
- lib/euphoria/version.rb
|
117
|
+
homepage: https://github.com/PaulBrunache/Euphoria
|
118
|
+
licenses:
|
119
|
+
- MIT
|
120
|
+
metadata: {}
|
121
|
+
post_install_message:
|
122
|
+
rdoc_options: []
|
123
|
+
require_paths:
|
124
|
+
- lib
|
125
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
126
|
+
requirements:
|
127
|
+
- - ">="
|
128
|
+
- !ruby/object:Gem::Version
|
129
|
+
version: '0'
|
130
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
131
|
+
requirements:
|
132
|
+
- - ">="
|
133
|
+
- !ruby/object:Gem::Version
|
134
|
+
version: '0'
|
135
|
+
requirements: []
|
136
|
+
rubyforge_project:
|
137
|
+
rubygems_version: 2.4.5
|
138
|
+
signing_key:
|
139
|
+
specification_version: 4
|
140
|
+
summary: Yet another grid framework for the web built with components from flexbox
|
141
|
+
test_files: []
|