yakstrap 0.0.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/LICENSE +20 -0
- data/README.md +59 -0
- data/app/assets/stylesheets/yakstrap/alert.css.scss +20 -0
- data/app/assets/stylesheets/yakstrap/button.css.scss +63 -0
- data/app/assets/stylesheets/yakstrap/container.css.scss +52 -0
- data/app/assets/stylesheets/yakstrap/form.css.scss +82 -0
- data/app/assets/stylesheets/yakstrap/main.css.scss +78 -0
- data/app/assets/stylesheets/yakstrap/modal.css.scss +61 -0
- data/app/assets/stylesheets/yakstrap/nav.css.scss +177 -0
- data/app/assets/stylesheets/yakstrap/tip.css.scss +171 -0
- data/app/assets/stylesheets/yakstrap/variables.css.scss +33 -0
- data/app/assets/stylesheets/yakstrap/yakstrap.css.scss +9 -0
- data/app/assets/stylesheets/yakstrap/yakstrap.css.scss~ +9 -0
- data/lib/yakstrap/version.rb +3 -0
- data/lib/yakstrap.rb +8 -0
- data/lib/yakstrap.rb~ +5 -0
- metadata +120 -0
checksums.yaml
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
---
|
2
|
+
SHA1:
|
3
|
+
metadata.gz: 7b8bf45530873fbcf14f7e20084d8f63ce337303
|
4
|
+
data.tar.gz: 1b93ba1a3e97fbeb0f70157981f3ac0ef6ab6c09
|
5
|
+
SHA512:
|
6
|
+
metadata.gz: 7c018f2dafc73e6d5c12d9b43d035fc34745d3b82093ed6930f3843acb2d74438f8fcffe069cee56305445be2750163fbc1728978dc2982214ab434f62c51f31
|
7
|
+
data.tar.gz: ab0355961382918fcda3222660e4fb5d8405cb144ddc55ae890c4df9390a277a2e4fd43299908a800806ae9fecc6a6e8671d9f3686d5aac1a5fa42058368b162
|
data/LICENSE
ADDED
@@ -0,0 +1,20 @@
|
|
1
|
+
The MIT License (MIT)
|
2
|
+
|
3
|
+
Copyright (c) 2013 Yakrware
|
4
|
+
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy of
|
6
|
+
this software and associated documentation files (the "Software"), to deal in
|
7
|
+
the Software without restriction, including without limitation the rights to
|
8
|
+
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
|
9
|
+
the Software, and to permit persons to whom the Software is furnished to do so,
|
10
|
+
subject to the following conditions:
|
11
|
+
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
13
|
+
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, FITNESS
|
17
|
+
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
|
18
|
+
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
|
19
|
+
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
|
20
|
+
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
data/README.md
ADDED
@@ -0,0 +1,59 @@
|
|
1
|
+
# Yakstrap
|
2
|
+
|
3
|
+
Yakstrap is a pure CSS framework that was written to be mostly compatible with bootstrap while not being bootstrap.
|
4
|
+
It is missing a lot of bootstrap's more interactive elements and that's intentional, not requiring JS. Yakstrap was
|
5
|
+
designed to be capable of being both responsive and flow by default, though some elements will not work on mobile systems.
|
6
|
+
|
7
|
+
## Installation
|
8
|
+
|
9
|
+
Add this line to your application's Gemfile:
|
10
|
+
|
11
|
+
gem 'yakstrap'
|
12
|
+
|
13
|
+
And then execute:
|
14
|
+
|
15
|
+
$ bundle
|
16
|
+
|
17
|
+
Or install it yourself as:
|
18
|
+
|
19
|
+
$ gem install yakstrap
|
20
|
+
|
21
|
+
## Usage
|
22
|
+
|
23
|
+
### Rails
|
24
|
+
|
25
|
+
In Rails application.css
|
26
|
+
|
27
|
+
/*= require yakstrap/yakstrap
|
28
|
+
|
29
|
+
### Override variables
|
30
|
+
|
31
|
+
To override variables or any file, in app/assets/stylesheets/yakstrap/yakstrap.css.scss
|
32
|
+
|
33
|
+
@import 'variables';
|
34
|
+
@import 'my_variables';
|
35
|
+
@import 'main';
|
36
|
+
@import 'tip';
|
37
|
+
@import "nav";
|
38
|
+
@import "container";
|
39
|
+
@import "button";
|
40
|
+
@import "form";
|
41
|
+
@import "modal";
|
42
|
+
@import "alert";
|
43
|
+
|
44
|
+
Then, in app/assets/stylesheets/yakstrap/my_variables.css.scss:
|
45
|
+
|
46
|
+
$primary: #C8B3A1;
|
47
|
+
$primary_font_color: $333;
|
48
|
+
|
49
|
+
$background: $285B21;
|
50
|
+
$background_font_color: #white;
|
51
|
+
|
52
|
+
|
53
|
+
## Contributing
|
54
|
+
|
55
|
+
1. Fork it
|
56
|
+
2. Create your feature branch (`git checkout -b my-new-feature`)
|
57
|
+
3. Commit your changes (`git commit -am 'Add some feature'`)
|
58
|
+
4. Push to the branch (`git push origin my-new-feature`)
|
59
|
+
5. Create new Pull Request
|
@@ -0,0 +1,20 @@
|
|
1
|
+
.alert{
|
2
|
+
margin: 10px 15px;
|
3
|
+
border: darken($yellow, 20%) 1px solid;
|
4
|
+
border-radius: 4px;
|
5
|
+
background: $yellow;
|
6
|
+
color: $yellow_font_color;
|
7
|
+
padding: 5px 10px;
|
8
|
+
|
9
|
+
&.notify{
|
10
|
+
background: $yellow;
|
11
|
+
border-color: darken($yellow, 50%);
|
12
|
+
color: $yellow_font_color;
|
13
|
+
}
|
14
|
+
|
15
|
+
&.error, &.errors{
|
16
|
+
background: $red;
|
17
|
+
border-color: darken($red, 20%);
|
18
|
+
color: $red_font_color;
|
19
|
+
}
|
20
|
+
}
|
@@ -0,0 +1,63 @@
|
|
1
|
+
.btn, input[type='submit']{
|
2
|
+
display: inline-block;
|
3
|
+
background: $secondary;
|
4
|
+
padding: 5px 10px;
|
5
|
+
margin: 3px;
|
6
|
+
color: $secondary_font_color;
|
7
|
+
border: 1px darken($secondary, 20%) solid;
|
8
|
+
border-radius: 3px;
|
9
|
+
text-decoration: none;
|
10
|
+
cursor: pointer;
|
11
|
+
font-size: 14px;
|
12
|
+
outline: 0;
|
13
|
+
@include shadow(1px);
|
14
|
+
|
15
|
+
&:hover{
|
16
|
+
color: lighten($secondary_font_color, 10%);
|
17
|
+
background: lighten($secondary, 10%);
|
18
|
+
}
|
19
|
+
|
20
|
+
&:active{
|
21
|
+
color: darken($secondary_font_color, 10%);
|
22
|
+
background: darken($secondary, 10%);
|
23
|
+
@include shadow(0px);
|
24
|
+
}
|
25
|
+
|
26
|
+
&.btn-success{
|
27
|
+
background: $green;
|
28
|
+
color: $green_font_color;
|
29
|
+
&:hover{
|
30
|
+
color: lighten($green_font_color, 10%);
|
31
|
+
background: lighten($green, 10%);
|
32
|
+
}
|
33
|
+
&:active{
|
34
|
+
color: darken($green_font_color, 10%);
|
35
|
+
background: darken($green, 10%);
|
36
|
+
}
|
37
|
+
}
|
38
|
+
|
39
|
+
&.btn-danger{
|
40
|
+
background: $red;
|
41
|
+
color: $red_font_color;
|
42
|
+
&:hover{
|
43
|
+
color: lighten($red_font_color, 10%);
|
44
|
+
background: lighten($red, 10%);
|
45
|
+
}
|
46
|
+
&:active{
|
47
|
+
color: darken($red_font_color, 10%);
|
48
|
+
background: darken($red, 10%);
|
49
|
+
}
|
50
|
+
}
|
51
|
+
}
|
52
|
+
|
53
|
+
input[type='submit']{
|
54
|
+
font-family: Roboto;
|
55
|
+
padding: 4px 9px;
|
56
|
+
}
|
57
|
+
|
58
|
+
.btn-group{
|
59
|
+
&>.btn{
|
60
|
+
float: left;
|
61
|
+
}
|
62
|
+
@include clearfix;
|
63
|
+
}
|
@@ -0,0 +1,52 @@
|
|
1
|
+
$gutter-width: 0.01;
|
2
|
+
|
3
|
+
@mixin columns($column-span: 1) {
|
4
|
+
$columns: 12 / $column-span;
|
5
|
+
$total-gutter: $gutter-width * (13);
|
6
|
+
$column-span-width: (1 - $total-gutter) / $columns + ($column-span - 1) * $gutter-width;
|
7
|
+
|
8
|
+
width: percentage( $column-span-width );
|
9
|
+
}
|
10
|
+
|
11
|
+
.container{
|
12
|
+
margin: 0px auto;
|
13
|
+
@include clearfix();
|
14
|
+
|
15
|
+
@media (min-width: 480px){
|
16
|
+
max-width: 480px;
|
17
|
+
}
|
18
|
+
@media (min-width: 640px){
|
19
|
+
max-width: 640px;
|
20
|
+
}
|
21
|
+
@media (min-width: 720px){
|
22
|
+
max-width: 720px;
|
23
|
+
}
|
24
|
+
@media (min-width: 960px){
|
25
|
+
max-width: 960px;
|
26
|
+
}
|
27
|
+
@media (min-width: 1080px){
|
28
|
+
max-width: 1080px;
|
29
|
+
}
|
30
|
+
@media (min-width: 1260px){
|
31
|
+
max-width: 1260px;
|
32
|
+
}
|
33
|
+
}
|
34
|
+
|
35
|
+
// row is not required, but it includes clearfix to hopefully clear up some issues
|
36
|
+
.row{
|
37
|
+
@include clearfix();
|
38
|
+
}
|
39
|
+
|
40
|
+
@for $i from 1 through 12{
|
41
|
+
.span#{$i}{
|
42
|
+
margin-left: percentage($gutter-width);
|
43
|
+
@media (max-width: 480px){
|
44
|
+
float: none;
|
45
|
+
display:block;
|
46
|
+
}
|
47
|
+
@media (min-width: 481px){
|
48
|
+
float: left;
|
49
|
+
@include columns($i);
|
50
|
+
}
|
51
|
+
}
|
52
|
+
}
|
@@ -0,0 +1,82 @@
|
|
1
|
+
@mixin inputBase(){
|
2
|
+
border: 1px solid lighten($secondary, 30%);
|
3
|
+
border-radius: 2px;
|
4
|
+
background: lighten($background, 10%);
|
5
|
+
color: $background_font_color;
|
6
|
+
padding: 3px 5px;
|
7
|
+
margin: 3px 2px;
|
8
|
+
}
|
9
|
+
|
10
|
+
@mixin inputWidth( $offset: 0px ){
|
11
|
+
@media (min-width: 480px){
|
12
|
+
width: 80px + $offset;
|
13
|
+
}
|
14
|
+
@media (min-width: 640px){
|
15
|
+
width: 120px + $offset;
|
16
|
+
}
|
17
|
+
@media (min-width: 720px){
|
18
|
+
width: 160px + $offset;
|
19
|
+
}
|
20
|
+
@media (min-width: 960px){
|
21
|
+
width: 200px + $offset;
|
22
|
+
}
|
23
|
+
|
24
|
+
&.tiny{
|
25
|
+
width: 80px + $offset;
|
26
|
+
}
|
27
|
+
&.small{
|
28
|
+
width: 160px + $offset;
|
29
|
+
}
|
30
|
+
&.normal{
|
31
|
+
width: 200px + $offset;
|
32
|
+
}
|
33
|
+
&.large{
|
34
|
+
width: 300px + $offset;
|
35
|
+
}
|
36
|
+
&.x-large{
|
37
|
+
width: 400px + $offset;
|
38
|
+
}
|
39
|
+
}
|
40
|
+
|
41
|
+
input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]), textarea{
|
42
|
+
@include inputBase();
|
43
|
+
@include inputWidth();
|
44
|
+
}
|
45
|
+
|
46
|
+
label{
|
47
|
+
display: inline-block;
|
48
|
+
margin: 10px 0px 0px;
|
49
|
+
@media (min-width: 480px){
|
50
|
+
min-width: 60px;
|
51
|
+
}
|
52
|
+
@media (min-width: 640px){
|
53
|
+
min-width: 80px;
|
54
|
+
}
|
55
|
+
@media (min-width: 720px){
|
56
|
+
min-width: 120px;
|
57
|
+
}
|
58
|
+
@media (min-width: 960px){
|
59
|
+
min-width: 160px;
|
60
|
+
}
|
61
|
+
}
|
62
|
+
|
63
|
+
select{
|
64
|
+
@include inputBase();
|
65
|
+
@include inputWidth(12px);
|
66
|
+
}
|
67
|
+
|
68
|
+
.error input:not([type="submit"]):not([type="button"]), .error select, input:not([type="submit"]):not([type="button"]).error, select.error{
|
69
|
+
border-color: $red;
|
70
|
+
}
|
71
|
+
|
72
|
+
.error label, label.error{
|
73
|
+
text-decoration-line: underline;
|
74
|
+
text-decoration-style: wavy;
|
75
|
+
text-decoration-color: $red;
|
76
|
+
-moz-text-decoration-line: underline;
|
77
|
+
-moz-text-decoration-style: wavy;
|
78
|
+
-moz-text-decoration-color: $red;
|
79
|
+
-webkit-text-decoration-line: underline;
|
80
|
+
-webkit-text-decoration-style: wavy;
|
81
|
+
-webkit-text-decoration-color: $red;
|
82
|
+
}
|
@@ -0,0 +1,78 @@
|
|
1
|
+
|
2
|
+
@import url($font_include);
|
3
|
+
|
4
|
+
@mixin clearfix{
|
5
|
+
&:before,
|
6
|
+
&:after {
|
7
|
+
content: "";
|
8
|
+
display: table;
|
9
|
+
}
|
10
|
+
|
11
|
+
&:after {
|
12
|
+
clear: both;
|
13
|
+
}
|
14
|
+
}
|
15
|
+
|
16
|
+
@mixin unstyled{
|
17
|
+
list-style: none;
|
18
|
+
margin: 0px;
|
19
|
+
padding: 0px;
|
20
|
+
}
|
21
|
+
|
22
|
+
@mixin shadow($offset: 1px){
|
23
|
+
box-shadow: $offset $offset 2px 0 #333333;
|
24
|
+
}
|
25
|
+
|
26
|
+
body{
|
27
|
+
margin: 0px;
|
28
|
+
color: $background_font_color;
|
29
|
+
background-color: #FFF;
|
30
|
+
font-size: 14px;
|
31
|
+
font-family: $body_font;
|
32
|
+
background: $background;
|
33
|
+
}
|
34
|
+
|
35
|
+
h1,h2,h3,h4,h5,h6{
|
36
|
+
font-family: $header_font;
|
37
|
+
}
|
38
|
+
|
39
|
+
.pull-right{
|
40
|
+
float: right;
|
41
|
+
}
|
42
|
+
|
43
|
+
.pull-left{
|
44
|
+
float: left;
|
45
|
+
}
|
46
|
+
|
47
|
+
.clearfix{
|
48
|
+
@include clearfix;
|
49
|
+
}
|
50
|
+
|
51
|
+
ul.unstyled{
|
52
|
+
@include unstyled
|
53
|
+
}
|
54
|
+
|
55
|
+
hr{
|
56
|
+
border: 0;
|
57
|
+
height: 1px;
|
58
|
+
background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
|
59
|
+
background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
|
60
|
+
background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
|
61
|
+
background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
|
62
|
+
background-image: linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
|
63
|
+
}
|
64
|
+
|
65
|
+
.table{
|
66
|
+
width: 100%;
|
67
|
+
border-spacing: 0px;
|
68
|
+
|
69
|
+
th{
|
70
|
+
text-align: left;
|
71
|
+
padding-bottom: 5px;
|
72
|
+
}
|
73
|
+
|
74
|
+
td{
|
75
|
+
border-top: 1px solid lighten($secondary, 20%);
|
76
|
+
padding: 5px 5px 5px 0px;
|
77
|
+
}
|
78
|
+
}
|
@@ -0,0 +1,61 @@
|
|
1
|
+
.modal{
|
2
|
+
visibility: hidden;
|
3
|
+
opacity: 0;
|
4
|
+
position: fixed;
|
5
|
+
top: 15%;
|
6
|
+
width: 500px;
|
7
|
+
z-index: 100;
|
8
|
+
left: 50%;
|
9
|
+
margin-left: -250px;
|
10
|
+
background: $background;
|
11
|
+
border: 1px solid darken($secondary, 20%);
|
12
|
+
border-radius: 2px;
|
13
|
+
padding: 8px 8px 12px;
|
14
|
+
transition: visibility 0s linear 0.3s, opacity 0.3s linear;
|
15
|
+
|
16
|
+
.title{
|
17
|
+
padding: 5px;
|
18
|
+
position: relative;
|
19
|
+
background: lighten($primary, 15%);
|
20
|
+
border: 1px solid darken($primary, 15%);
|
21
|
+
color: $primary_font_color;
|
22
|
+
border-radius: 3px;
|
23
|
+
line-height: 30px;
|
24
|
+
|
25
|
+
h1,h2,h3,h4,h5,h6{
|
26
|
+
margin: 0px;
|
27
|
+
font-size: 20px;
|
28
|
+
}
|
29
|
+
|
30
|
+
.close:before{
|
31
|
+
cursor: pointer;
|
32
|
+
content: 'X';
|
33
|
+
color: $white;
|
34
|
+
background: $red;
|
35
|
+
border: 1px solid darken($red, 20%);
|
36
|
+
border-radius: 2px;
|
37
|
+
position: absolute;
|
38
|
+
top: 5px;
|
39
|
+
right: 5px;
|
40
|
+
width: 16px;
|
41
|
+
line-height: 19px;
|
42
|
+
font-size: 15px;
|
43
|
+
font-weight: bold;
|
44
|
+
text-align: center;
|
45
|
+
}
|
46
|
+
}
|
47
|
+
|
48
|
+
@media( max-height: 500px ) {
|
49
|
+
top: 5%;
|
50
|
+
}
|
51
|
+
|
52
|
+
@media( max-height: 300px ){
|
53
|
+
top: 20px;
|
54
|
+
}
|
55
|
+
|
56
|
+
&.show{
|
57
|
+
visibility: visible;
|
58
|
+
opacity: 1;
|
59
|
+
transition-delay: 0s;
|
60
|
+
}
|
61
|
+
}
|
@@ -0,0 +1,177 @@
|
|
1
|
+
|
2
|
+
// navbar
|
3
|
+
.navbar{
|
4
|
+
background: $primary;
|
5
|
+
color: $primary_font_color;
|
6
|
+
line-height: 38px;
|
7
|
+
font-size: 14px;
|
8
|
+
@include shadow(1px);
|
9
|
+
|
10
|
+
&>a{
|
11
|
+
float: left;
|
12
|
+
}
|
13
|
+
|
14
|
+
&>container{
|
15
|
+
&>a, &>ul{
|
16
|
+
float: left;
|
17
|
+
}
|
18
|
+
}
|
19
|
+
|
20
|
+
a{
|
21
|
+
color: $primary_font_color;
|
22
|
+
text-decoration: none;
|
23
|
+
white-space: nowrap;
|
24
|
+
|
25
|
+
&.brand{
|
26
|
+
font-size: 20px;
|
27
|
+
margin-left: 20px;
|
28
|
+
}
|
29
|
+
|
30
|
+
&:focus{
|
31
|
+
outline: 0;
|
32
|
+
}
|
33
|
+
}
|
34
|
+
|
35
|
+
ul{
|
36
|
+
list-style: none;
|
37
|
+
margin: 0;
|
38
|
+
padding: 0;
|
39
|
+
|
40
|
+
li{
|
41
|
+
float: left;
|
42
|
+
&>a{
|
43
|
+
padding: 0px 15px;
|
44
|
+
}
|
45
|
+
&:hover{
|
46
|
+
background: lighten($primary, 5%);
|
47
|
+
}
|
48
|
+
}
|
49
|
+
}
|
50
|
+
|
51
|
+
&.fixed{
|
52
|
+
position: fixed;
|
53
|
+
left: 0px;
|
54
|
+
right: 0px;
|
55
|
+
top: 0px;
|
56
|
+
bottom: 0px;
|
57
|
+
z-index: 99;
|
58
|
+
|
59
|
+
&.top{
|
60
|
+
bottom: auto;
|
61
|
+
min-height: 40px;
|
62
|
+
}
|
63
|
+
&.bottom{
|
64
|
+
top: auto;
|
65
|
+
min-height: 40px;
|
66
|
+
}
|
67
|
+
&.left{
|
68
|
+
right: auto;
|
69
|
+
}
|
70
|
+
&.right{
|
71
|
+
left: auto;
|
72
|
+
}
|
73
|
+
|
74
|
+
&.left, &.right{
|
75
|
+
min-width: 160px;
|
76
|
+
line-height: 25px;
|
77
|
+
padding-top: 80px;
|
78
|
+
&>ul{
|
79
|
+
&>li{
|
80
|
+
float: none;
|
81
|
+
&>a{
|
82
|
+
display: block;
|
83
|
+
}
|
84
|
+
}
|
85
|
+
}
|
86
|
+
}
|
87
|
+
}
|
88
|
+
}
|
89
|
+
|
90
|
+
.dropdown{
|
91
|
+
position: relative;
|
92
|
+
ul{
|
93
|
+
position: absolute;
|
94
|
+
visibility: hidden;
|
95
|
+
min-width: 150px;
|
96
|
+
right: auto;
|
97
|
+
left: 0px;
|
98
|
+
z-index: 100;
|
99
|
+
margin-top: 6px;
|
100
|
+
border: 1px solid darken($primary, 20%);
|
101
|
+
background: $background;
|
102
|
+
background-clip: padding-box;
|
103
|
+
border-radius: 5px;
|
104
|
+
line-height: 25px;
|
105
|
+
opacity: 0;
|
106
|
+
transition: visibility 0s linear 0.3s, opacity 0.3s linear;
|
107
|
+
@include shadow(2px);
|
108
|
+
|
109
|
+
&:after {
|
110
|
+
border-bottom: 6px darken($primary, 20%);
|
111
|
+
border-left: 6px solid transparent;
|
112
|
+
border-right: 6px solid transparent;
|
113
|
+
content: "";
|
114
|
+
display: inline-block;
|
115
|
+
left: 15px;
|
116
|
+
position: absolute;
|
117
|
+
top: -6px;
|
118
|
+
}
|
119
|
+
|
120
|
+
li{
|
121
|
+
float: none;
|
122
|
+
}
|
123
|
+
|
124
|
+
a{
|
125
|
+
color: $background_font_color;
|
126
|
+
display: block;
|
127
|
+
|
128
|
+
&:hover{
|
129
|
+
color: $white;
|
130
|
+
background: lighten($primary, 20%);
|
131
|
+
}
|
132
|
+
}
|
133
|
+
}
|
134
|
+
|
135
|
+
&:hover, &.open{
|
136
|
+
&>a{
|
137
|
+
|
138
|
+
}
|
139
|
+
ul{
|
140
|
+
visibility: visible;
|
141
|
+
opacity: 1;
|
142
|
+
transition-delay: 0s;
|
143
|
+
}
|
144
|
+
}
|
145
|
+
}
|
146
|
+
|
147
|
+
.pull-right .dropdown{
|
148
|
+
&>ul{
|
149
|
+
left: auto;
|
150
|
+
right: 0px;
|
151
|
+
|
152
|
+
&:after {
|
153
|
+
right: 15px;
|
154
|
+
left: auto;
|
155
|
+
}
|
156
|
+
}
|
157
|
+
}
|
158
|
+
|
159
|
+
ul.breadcrumb{
|
160
|
+
@include unstyled;
|
161
|
+
margin: 15px 0px;
|
162
|
+
padding: 0px 15px;
|
163
|
+
|
164
|
+
li{
|
165
|
+
float: left;
|
166
|
+
margin-right: 10px;
|
167
|
+
|
168
|
+
&:not(:last-child):after{
|
169
|
+
content: '/';
|
170
|
+
margin-left: 10px;
|
171
|
+
}
|
172
|
+
}
|
173
|
+
|
174
|
+
@include clearfix;
|
175
|
+
}
|
176
|
+
|
177
|
+
|
@@ -0,0 +1,171 @@
|
|
1
|
+
@mixin positionTip($location: 'top'){
|
2
|
+
$alignment: 'bottom';
|
3
|
+
$offset: -3px;
|
4
|
+
$left: auto;
|
5
|
+
$top: auto;
|
6
|
+
@if $location == 'top' {
|
7
|
+
$alignment: 'bottom';
|
8
|
+
$left: $offset;
|
9
|
+
} @else if $location == 'bottom' {
|
10
|
+
$alignment: 'top';
|
11
|
+
$left: $offset;
|
12
|
+
} @else if $location == 'left' {
|
13
|
+
$alignment: 'right';
|
14
|
+
$top: $offset;
|
15
|
+
} @else if $location == 'right' {
|
16
|
+
$alignment: 'left';
|
17
|
+
$top: $offset;
|
18
|
+
}
|
19
|
+
|
20
|
+
top: auto;
|
21
|
+
bottom: auto;
|
22
|
+
left: auto;
|
23
|
+
right: auto;
|
24
|
+
margin: auto;
|
25
|
+
|
26
|
+
top: $top;
|
27
|
+
left: $left;
|
28
|
+
#{$alignment}: 10px;
|
29
|
+
margin-#{$alignment}: 100%;
|
30
|
+
}
|
31
|
+
|
32
|
+
@mixin positionArrow($location: 'top'){
|
33
|
+
$alignment: 'bottom';
|
34
|
+
$left: auto;
|
35
|
+
$top: auto;
|
36
|
+
@if $location == 'top' {
|
37
|
+
$alignment: 'bottom';
|
38
|
+
$left: 50%;
|
39
|
+
} @else if $location == 'bottom' {
|
40
|
+
$alignment: 'top';
|
41
|
+
$left: 50%;
|
42
|
+
} @else if $location == 'left' {
|
43
|
+
$alignment: 'right';
|
44
|
+
$top: 50%;
|
45
|
+
} @else if $location == 'right' {
|
46
|
+
$alignment: 'left';
|
47
|
+
$top: 50%;
|
48
|
+
}
|
49
|
+
|
50
|
+
visibility: hidden;
|
51
|
+
transition: visibility 0s linear 0.2s, opacity 0.2s linear;
|
52
|
+
position: absolute;
|
53
|
+
border: solid;
|
54
|
+
content: "";
|
55
|
+
z-index: 99;
|
56
|
+
border-color: transparent;
|
57
|
+
border-width: 6px;
|
58
|
+
opacity: 0;
|
59
|
+
|
60
|
+
top: auto;
|
61
|
+
bottom: auto;
|
62
|
+
left: auto;
|
63
|
+
right: auto;
|
64
|
+
margin: auto;
|
65
|
+
|
66
|
+
top: $top;
|
67
|
+
left: $left;
|
68
|
+
|
69
|
+
#{$alignment}: 4px;
|
70
|
+
margin-#{$alignment}: 100%;
|
71
|
+
border-#{$location}-color: rgba(darken($primary, 30%),.8);;
|
72
|
+
border-#{$alignment}: 0px;
|
73
|
+
}
|
74
|
+
|
75
|
+
[data-title]{
|
76
|
+
cursor: pointer;
|
77
|
+
position: relative;
|
78
|
+
|
79
|
+
&:after{
|
80
|
+
font-family: $body_font;
|
81
|
+
background: darken($primary, 30%);
|
82
|
+
opacity: 0;
|
83
|
+
color: $white;
|
84
|
+
border-radius: 3px;
|
85
|
+
|
86
|
+
position: absolute;
|
87
|
+
@include positionTip('top');
|
88
|
+
|
89
|
+
content: attr(data-title);
|
90
|
+
white-space: pre-wrap;
|
91
|
+
padding: 5px 15px;
|
92
|
+
z-index: 98;
|
93
|
+
|
94
|
+
min-width: 250px;
|
95
|
+
max-width: 400px;
|
96
|
+
visibility: hidden;
|
97
|
+
transition: visibility 0s linear 0.2s, opacity 0.2s linear;
|
98
|
+
|
99
|
+
@include shadow(2px);
|
100
|
+
}
|
101
|
+
|
102
|
+
&:not(i[class^=icon]):before{
|
103
|
+
@include positionArrow('top');
|
104
|
+
}
|
105
|
+
|
106
|
+
&:before(2){
|
107
|
+
@include positionArrow('top');
|
108
|
+
}
|
109
|
+
|
110
|
+
&[data-placement="bottom"]{
|
111
|
+
&:after{
|
112
|
+
@include positionTip('bottom');
|
113
|
+
}
|
114
|
+
|
115
|
+
&:not(i[class^=icon]):before{
|
116
|
+
@include positionArrow('bottom');
|
117
|
+
}
|
118
|
+
|
119
|
+
&:before(2){
|
120
|
+
@include positionArrow('bottom');
|
121
|
+
}
|
122
|
+
}
|
123
|
+
|
124
|
+
&[data-placement="left"]{
|
125
|
+
&:after{
|
126
|
+
@include positionTip('left');
|
127
|
+
}
|
128
|
+
|
129
|
+
&:not(i[class^=icon]):before{
|
130
|
+
@include positionArrow('left');
|
131
|
+
}
|
132
|
+
|
133
|
+
&:before(2){
|
134
|
+
@include positionArrow('left');
|
135
|
+
}
|
136
|
+
}
|
137
|
+
|
138
|
+
&[data-placement="right"]{
|
139
|
+
&:after{
|
140
|
+
@include positionTip('right');
|
141
|
+
}
|
142
|
+
|
143
|
+
&:not(i[class^=icon]):before{
|
144
|
+
@include positionArrow('right');
|
145
|
+
}
|
146
|
+
|
147
|
+
&:before(2){
|
148
|
+
@include positionArrow('right');
|
149
|
+
}
|
150
|
+
}
|
151
|
+
|
152
|
+
&:hover{
|
153
|
+
&:after{
|
154
|
+
opacity: 0.9;
|
155
|
+
visibility: visible;
|
156
|
+
transition-delay: 0s;
|
157
|
+
}
|
158
|
+
|
159
|
+
&:not(i[class^=icon]):before{
|
160
|
+
opacity: 0.9;
|
161
|
+
visibility: visible;
|
162
|
+
transition-delay: 0s;
|
163
|
+
}
|
164
|
+
|
165
|
+
&:before(2){
|
166
|
+
opacity: 0.9;
|
167
|
+
visibility: visible;
|
168
|
+
transition-delay: 0s;
|
169
|
+
}
|
170
|
+
}
|
171
|
+
}
|
@@ -0,0 +1,33 @@
|
|
1
|
+
|
2
|
+
// Fonts
|
3
|
+
$font_include: 'http://fonts.googleapis.com/css?family=Ubuntu|Roboto';
|
4
|
+
$body_font: 'Roboto';
|
5
|
+
$header_font: 'Ubuntu';
|
6
|
+
|
7
|
+
|
8
|
+
// Colors
|
9
|
+
$white: #FDFDFD;
|
10
|
+
|
11
|
+
// http://colorschemedesigner.com/
|
12
|
+
$primary: #2E3E46;
|
13
|
+
$primary_font_color: $white;
|
14
|
+
|
15
|
+
$secondary: #544D3D;
|
16
|
+
$secondary_font_color: $white;
|
17
|
+
|
18
|
+
$tertiary: #C5EDB2;
|
19
|
+
$tertiary_font_color: #333;
|
20
|
+
|
21
|
+
// Red tone, used for alerts
|
22
|
+
$red: #A82117;
|
23
|
+
$red_font_color: $white;
|
24
|
+
|
25
|
+
// Green tone for successes
|
26
|
+
$green: #395939; // mid
|
27
|
+
$green_font_color: $white;
|
28
|
+
|
29
|
+
$yellow: #FEFEDE;
|
30
|
+
$yellow_font_color: #333;
|
31
|
+
|
32
|
+
$background: $white;
|
33
|
+
$background_font_color: #333;
|
data/lib/yakstrap.rb
ADDED
data/lib/yakstrap.rb~
ADDED
metadata
ADDED
@@ -0,0 +1,120 @@
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
|
+
name: yakstrap
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
version: 0.0.1
|
5
|
+
platform: ruby
|
6
|
+
authors:
|
7
|
+
- Charles DuBose
|
8
|
+
autorequire:
|
9
|
+
bindir: bin
|
10
|
+
cert_chain: []
|
11
|
+
date: 2013-08-25 00:00:00.000000000 Z
|
12
|
+
dependencies:
|
13
|
+
- !ruby/object:Gem::Dependency
|
14
|
+
name: railties
|
15
|
+
requirement: !ruby/object:Gem::Requirement
|
16
|
+
requirements:
|
17
|
+
- - '>'
|
18
|
+
- !ruby/object:Gem::Version
|
19
|
+
version: '3.1'
|
20
|
+
type: :runtime
|
21
|
+
prerelease: false
|
22
|
+
version_requirements: !ruby/object:Gem::Requirement
|
23
|
+
requirements:
|
24
|
+
- - '>'
|
25
|
+
- !ruby/object:Gem::Version
|
26
|
+
version: '3.1'
|
27
|
+
- !ruby/object:Gem::Dependency
|
28
|
+
name: sass-rails
|
29
|
+
requirement: !ruby/object:Gem::Requirement
|
30
|
+
requirements:
|
31
|
+
- - '>'
|
32
|
+
- !ruby/object:Gem::Version
|
33
|
+
version: 3.2.3
|
34
|
+
type: :development
|
35
|
+
prerelease: false
|
36
|
+
version_requirements: !ruby/object:Gem::Requirement
|
37
|
+
requirements:
|
38
|
+
- - '>'
|
39
|
+
- !ruby/object:Gem::Version
|
40
|
+
version: 3.2.3
|
41
|
+
- !ruby/object:Gem::Dependency
|
42
|
+
name: bundler
|
43
|
+
requirement: !ruby/object:Gem::Requirement
|
44
|
+
requirements:
|
45
|
+
- - ~>
|
46
|
+
- !ruby/object:Gem::Version
|
47
|
+
version: '1.3'
|
48
|
+
type: :development
|
49
|
+
prerelease: false
|
50
|
+
version_requirements: !ruby/object:Gem::Requirement
|
51
|
+
requirements:
|
52
|
+
- - ~>
|
53
|
+
- !ruby/object:Gem::Version
|
54
|
+
version: '1.3'
|
55
|
+
- !ruby/object:Gem::Dependency
|
56
|
+
name: rake
|
57
|
+
requirement: !ruby/object:Gem::Requirement
|
58
|
+
requirements:
|
59
|
+
- - '>='
|
60
|
+
- !ruby/object:Gem::Version
|
61
|
+
version: '0'
|
62
|
+
type: :development
|
63
|
+
prerelease: false
|
64
|
+
version_requirements: !ruby/object:Gem::Requirement
|
65
|
+
requirements:
|
66
|
+
- - '>='
|
67
|
+
- !ruby/object:Gem::Version
|
68
|
+
version: '0'
|
69
|
+
description: Yakstrap is a pure CSS framework that was written to be mostly compatible
|
70
|
+
with bootstrap 2.0 while not being bootstrap. It is missing a lot of bootstrap's
|
71
|
+
more interactive elements and that's intentional, not requiring JS. Yakstrap was
|
72
|
+
designed to be capable of being both responsive and flow by default, though some
|
73
|
+
elements will not work on mobile systems.
|
74
|
+
email:
|
75
|
+
- kayakyakr@gmail.com
|
76
|
+
executables: []
|
77
|
+
extensions: []
|
78
|
+
extra_rdoc_files: []
|
79
|
+
files:
|
80
|
+
- lib/yakstrap.rb~
|
81
|
+
- lib/yakstrap.rb
|
82
|
+
- lib/yakstrap/version.rb
|
83
|
+
- app/assets/stylesheets/yakstrap/yakstrap.css.scss~
|
84
|
+
- app/assets/stylesheets/yakstrap/alert.css.scss
|
85
|
+
- app/assets/stylesheets/yakstrap/variables.css.scss
|
86
|
+
- app/assets/stylesheets/yakstrap/main.css.scss
|
87
|
+
- app/assets/stylesheets/yakstrap/yakstrap.css.scss
|
88
|
+
- app/assets/stylesheets/yakstrap/button.css.scss
|
89
|
+
- app/assets/stylesheets/yakstrap/container.css.scss
|
90
|
+
- app/assets/stylesheets/yakstrap/form.css.scss
|
91
|
+
- app/assets/stylesheets/yakstrap/tip.css.scss
|
92
|
+
- app/assets/stylesheets/yakstrap/nav.css.scss
|
93
|
+
- app/assets/stylesheets/yakstrap/modal.css.scss
|
94
|
+
- LICENSE
|
95
|
+
- README.md
|
96
|
+
homepage: http://github.com/Yakrware/yakstrap
|
97
|
+
licenses:
|
98
|
+
- MIT
|
99
|
+
metadata: {}
|
100
|
+
post_install_message:
|
101
|
+
rdoc_options: []
|
102
|
+
require_paths:
|
103
|
+
- lib
|
104
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
105
|
+
requirements:
|
106
|
+
- - '>='
|
107
|
+
- !ruby/object:Gem::Version
|
108
|
+
version: '0'
|
109
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
110
|
+
requirements:
|
111
|
+
- - '>='
|
112
|
+
- !ruby/object:Gem::Version
|
113
|
+
version: '0'
|
114
|
+
requirements: []
|
115
|
+
rubyforge_project:
|
116
|
+
rubygems_version: 2.0.3
|
117
|
+
signing_key:
|
118
|
+
specification_version: 4
|
119
|
+
summary: Yakstrap is a pure CSS framework mostly compatible with bootstrap 2.0
|
120
|
+
test_files: []
|