superstyles 0.0.1 → 0.0.2

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,143 @@
1
+ .clear
2
+ border: none
3
+ clear: both
4
+ float: none !important
5
+ height: 0
6
+ line-height: 0
7
+ margin: 0
8
+ padding: 0
9
+
10
+ .hidden, .hide
11
+ display: none
12
+
13
+ .show
14
+ display: block
15
+
16
+ .label
17
+ text-transform: lowercase
18
+ color= $dark-grey
19
+ font-size: 12px
20
+ line-height: 12px
21
+
22
+ .spinner
23
+ background: url(/images/spinner.gif) no-repeat
24
+ display: block
25
+ height: 11px
26
+ left: 50%
27
+ margin-bottom: -11px
28
+ margin-left: -8px
29
+ position: relative
30
+ width: 16px
31
+
32
+ &.button
33
+ left: 50%
34
+ margin-left: -8px
35
+ position: relative
36
+
37
+ .flags
38
+ margin: 0 auto
39
+
40
+ .flag
41
+ float: left
42
+ +rounded
43
+
44
+ .divider
45
+ +sprite("icons", "flag_divider")
46
+ float: left
47
+ margin: 15px 6px 0 8px
48
+
49
+ .comment
50
+ margin-top: 5px
51
+
52
+ &.small
53
+ width: 105px
54
+
55
+ .flag
56
+ height: 42px
57
+ width: 42px
58
+
59
+ &.tiny
60
+ width: 85px
61
+
62
+ .flag
63
+ height: 32px
64
+ width: 32px
65
+
66
+ .divider
67
+ margin-top: 10px
68
+
69
+ .flag
70
+ display: block
71
+ +rounded
72
+
73
+ &.small
74
+ height: 42px
75
+ width: 42px
76
+
77
+ &.tiny
78
+ height: 32px
79
+ width: 32px
80
+
81
+ .pagination
82
+ display: inline-block
83
+
84
+ span, a
85
+ background: $light-grey
86
+ +border($light-grey, 1px)
87
+ color: $text
88
+ float: left
89
+ padding: 3px 6px
90
+ margin: 0 2px
91
+
92
+ &:hover
93
+ background: $dark-grey
94
+ border-color: $dark-grey
95
+ text-decoration: none
96
+
97
+ &.current
98
+ background: white
99
+ +border($primary-dark, 1px)
100
+
101
+ &:hover
102
+ cursor: default
103
+
104
+ &.disabled
105
+ +opacity(0.5)
106
+
107
+ &:hover
108
+ background: $light-grey
109
+ border-color: $light-grey
110
+ cursor: default
111
+
112
+ .infobox
113
+ background: $lighter-grey
114
+ +border($border-dark, 2px)
115
+ display: block
116
+ font-size: 12px
117
+ line-height: 14px
118
+ padding: 5px 10px
119
+ +rounded
120
+ text-align: left
121
+
122
+ #pageless-loader
123
+ display: none
124
+ text-align: center
125
+ width: 100%
126
+
127
+ .msg
128
+ color: $dark-grey
129
+ font-size: 14px
130
+
131
+ img
132
+ margin: 5px auto
133
+
134
+ #hotkeys
135
+ background: $darkest-grey
136
+ display: none
137
+ height: 100%
138
+ left: 0
139
+ +opacity(0.7)
140
+ position: fixed
141
+ top: 0
142
+ width: 100%
143
+ z-index: 1
@@ -0,0 +1,114 @@
1
+ // This is the file where all Mixin-Definitions go
2
+
3
+ =hidden
4
+ display: none
5
+
6
+ =visible
7
+ display: block
8
+
9
+ =border($color: $border, $width: $border-width)
10
+ border: $width solid $color
11
+
12
+ =border-top($color: $border, $width: $border-width)
13
+ border-top: $width solid $color
14
+
15
+ =border-bottom($color: $border, $width: $border-width)
16
+ border-bottom: $width solid $color
17
+
18
+ =border-left($color: $border, $width: $border-width)
19
+ border-left: $width solid $color
20
+
21
+ =border-right($color: $border, $width: $border-width)
22
+ border-right: $width solid $color
23
+
24
+ =rounded($rad: $radius)
25
+ -moz-border-radius: $rad
26
+ -webkit-border-radius: $rad
27
+ border-radius: $rad
28
+
29
+ =custom-rounded($topleft: 6px, $topright: 6px, $bottomright: 6px, $bottomleft: 6px)
30
+ -moz-border-radius-topleft: $topleft
31
+ -moz-border-radius-topright: $topright
32
+ -moz-border-radius-bottomright: $bottomright
33
+ -moz-border-radius-bottomleft: $bottomleft
34
+ -webkit-border-top-left-radius: $topleft
35
+ -webkit-border-top-right-radius: $topright
36
+ -webkit-border-bottom-right-radius: $bottomright
37
+ -webkit-border-bottom-left-radius: $bottomleft
38
+ border-top-left-radius: $topleft
39
+ border-top-right-radius: $topright
40
+ border-bottom-right-radius: $bottomright
41
+ border-bottom-left-radius: $bottomleft
42
+
43
+ =opacity($opacity: 0.7)
44
+ opacity: $opacity
45
+ -khtml-opacity: $opacity
46
+ -moz-opacity: $opacity
47
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity:#{$opacity * 100})"
48
+ filter: "alpha(opacity:#{$opacity * 100})"
49
+
50
+ =transition($property: all, $time: $transition-time)
51
+ -webkit-transition: $property $time ease-in-out
52
+ -moz-transition: $property $time ease-in-out //Firefox 4's Implementation of transition is still buggy
53
+ -o-transition: $property $time ease-in-out
54
+ transition: $property $time ease-in-out
55
+
56
+ =multi-transition($first-transition, $second-transition)
57
+ -webkit-transition: $first-transition, $second-transition
58
+ -moz-transition: $first-transition, $second-transition //Firefox 4's Implementation of transition is still buggy
59
+ -o-transition: $first-transition, $second-transition
60
+ transition: $first-transition, $second-transition
61
+
62
+ =glow($offset-x: 0, $offset-y: 0, $blur-radius: 3px, $spread-radius: 1px, $color: $tolingo)
63
+ -moz-box-shadow: $offset-x $offset-y $blur-radius $spread-radius $color
64
+ -webkit-box-shadow: $offset-x $offset-y $blur-radius $color
65
+ -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color:#{$color}, direction:0, strength:#{$blur-radius - $offset-y})"
66
+ -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color:#{$color}, direction:90, strength:#{$blur-radius + $offset-x})"
67
+ -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color:#{$color}, direction:180, strength:#{$blur-radius + $offset-y})"
68
+ -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color:#{$color}, direction:270, strength:#{$blur-radius - $offset-x})"
69
+ filter: "progid:DXImageTransform.Microsoft.Shadow(color:#{$color}, direction:0, strength:#{$blur-radius - $offset-y})"
70
+ filter: "progid:DXImageTransform.Microsoft.Shadow(color:#{$color}, direction:90, strength:#{$blur-radius + $offset-x})"
71
+ filter: "progid:DXImageTransform.Microsoft.Shadow(color:#{$color}, direction:180, strength:#{$blur-radius + $offset-y})"
72
+ filter: "progid:DXImageTransform.Microsoft.Shadow(color:#{$color}, direction:270, strength:#{$blur-radius - $offset-x})"
73
+ box-shadow: $offset-x $offset-y $blur-radius $spread-radius $color
74
+
75
+ =do-not-glow
76
+ -moz-box-shadow: 0 0 0 0
77
+ -webkit-box-shadow: 0 0 0
78
+ box-shadow: 0 0 0 0
79
+
80
+ =gradient($from: $primary-middle, $to: $primary-dark)
81
+ background: -moz-linear-gradient(top, $from, $to)
82
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, $from), color-stop(1.0, $to))
83
+ filter: "progid:DXImageTransform.Microsoft.gradient(GradientType:0, startColorstr:#{$from}, endColorstr:#{$to})"
84
+ -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType:0, startColorstr:#{$from}, endColorstr:#{$to})"
85
+
86
+ =rotate($degrees: 30deg)
87
+ -webkit-transform: rotate($degrees)
88
+ -moz-transform: rotate($degrees)
89
+ rotation: $degrees
90
+ filter: progid:DXImageTransform.Microsoft.BasicImage($degrees)
91
+
92
+ =clearfix
93
+ &:after
94
+ clear: both
95
+ content: " "
96
+ display: block
97
+ font-size: 0
98
+ height: 0
99
+ visibility: hidden
100
+
101
+ =list-element
102
+ height: $row-height
103
+
104
+ a
105
+ display: block
106
+ +transition
107
+
108
+ &.active a, &:hover a, a:focus
109
+ background-color: $hover
110
+ color: white
111
+ text-decoration: none
112
+
113
+ &.active a
114
+ background-color: $tolingo
@@ -0,0 +1,109 @@
1
+ #side-nav
2
+ +border-right
3
+ left: 0
4
+ margin-bottom: -9999px // equal-height-columns hack => http://www.positioniseverything.net/articles/onetruelayout/example/equalheightopera8fix
5
+ padding-bottom: 9999px // equal-height-columns hack => http://www.positioniseverything.net/articles/onetruelayout/example/equalheightopera8fix
6
+ position: absolute
7
+ top: $header-height + $border-width
8
+ width: $sidenav-width
9
+
10
+ li
11
+ +border-bottom
12
+ +list-element
13
+
14
+ a
15
+ font-size: 20px
16
+ padding: 6px $horizontal-padding
17
+ text-align: right
18
+ width: $sidenav-width - 2 * $horizontal-padding
19
+
20
+ #subnav
21
+ +border-right
22
+ left: $sidenav-width
23
+ margin-bottom: -9999px // equal-height-columns hack => http://www.positioniseverything.net/articles/onetruelayout/example/equalheightopera8fix
24
+ padding-bottom: 9999px // equal-height-columns hack => http://www.positioniseverything.net/articles/onetruelayout/example/equalheightopera8fix
25
+ position: absolute
26
+ top: $header-height + $border-width
27
+ width: $subnav-width
28
+
29
+ li
30
+ +border-bottom
31
+ +list-element
32
+
33
+ a
34
+ font-size: 16px
35
+ padding: 9px $horizontal-padding 8px
36
+ text-align: left
37
+ width: $subnav-width - 2 * $horizontal-padding
38
+
39
+ #breadcrumb
40
+ font-size: 10px
41
+ left: $content-offset + $horizontal-padding
42
+ padding: 2px 0
43
+ position: absolute
44
+ text-align: left
45
+ top: $header-height + $border-width
46
+ width: 100%
47
+
48
+ #content-nav
49
+ +border
50
+ left: $content-offset + $horizontal-padding
51
+ position: absolute
52
+ +rounded
53
+ top: $header-height + $border-width + $breadcrumb-height
54
+ width: 1326px
55
+
56
+ li
57
+ +border-right
58
+ float: left
59
+ +list-element
60
+ width: 120px
61
+
62
+ a
63
+ font-size: 18px
64
+ padding: 7px $horizontal-padding
65
+ text-align: center
66
+
67
+ #content-subnav
68
+ left: $content-offset + $horizontal-padding + 5
69
+ position: absolute
70
+ top: $header-height + 3 * $border-width + $breadcrumb-height + $content-nav-height
71
+
72
+ li
73
+ +border-bottom
74
+ +border-left
75
+ float: left
76
+ font-size: 12px
77
+ +list-element
78
+ height: $content-subnav-height
79
+
80
+ &:first-of-type, &:first-of-type a
81
+ +custom_rounded(0px, 0px, 0px, $radius)
82
+
83
+ &:nth-last-child(2)
84
+ +border-right
85
+ +custom_rounded(0px, 0px, $radius, 0px)
86
+
87
+ a
88
+ +custom_rounded(0px, 0px, $radius, 0px)
89
+
90
+ a
91
+ background: white
92
+ padding: 3px $horizontal-padding 2px
93
+ text-align: center
94
+
95
+ &.new-user
96
+ border: none
97
+
98
+ a
99
+ float: left
100
+ margin: 2px 0 0 5px
101
+ padding: 0
102
+ +sprite("icons", "plus_15x15")
103
+ +transition(all, 0.0s)
104
+
105
+ &:hover
106
+ +sprite("icons", "plus_15x15_hover")
107
+
108
+ &:focus
109
+ +sprite("icons", "plus_15x15_hover")
@@ -0,0 +1,162 @@
1
+ // Browser-Reset for the purpose of reducing browser inconsistencies
2
+ // in things like default line heights, margins and font sizes of headings and
3
+ // setting standards for basic layout aspects (--> see Style-Guide).
4
+ //
5
+ // for Details on Browser-Reset-Techniques, see:
6
+ //´[ENGLISH] http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
7
+ // [ENGLISH] http://meyerweb.com/eric/tools/css/reset/
8
+ // [GERMAN] http://www.drweb.de/magazin/css-neustart/
9
+
10
+ html, body, div, span, applet, object, iframe,
11
+ h1, h2, h3, h4, h5, h6, p, blockquote, pre,
12
+ a, abbr, acronym, address, big, cite, code,
13
+ del, dfn, em, font, img, ins, kbd, q, s, samp, hr,
14
+ small, strike, strong, sub, sup, tt, var,
15
+ b, u, i, center,
16
+ dl, dt, dd, ol, ul, li,
17
+ fieldset, form, label, legend,
18
+ table, caption, tbody, tfoot, thead, tr, th, td
19
+ margin: 0
20
+ padding: 0
21
+ border: 0
22
+ outline: 0
23
+ font:
24
+ weight: inherit
25
+ style: inherit
26
+ size: 100%
27
+ family: $font-family
28
+ vertical-align: baseline
29
+ background: transparent
30
+
31
+ html
32
+ height: 100%
33
+
34
+ body
35
+ color: $text
36
+ font-size: $font-size
37
+ height: 100%
38
+ line-height: 1
39
+ text-align: center
40
+
41
+ header, section, nav, footer
42
+ display: block
43
+ position: relative
44
+
45
+ ol, ul, li
46
+ list-style: none
47
+ position: relative
48
+
49
+ strong
50
+ font-weight: 700
51
+
52
+ em
53
+ font-style: italic
54
+
55
+ p
56
+ line-height: 1.2
57
+
58
+ pre
59
+ text-align: left
60
+
61
+ audio
62
+ display: none
63
+
64
+
65
+ //---------------------------------//
66
+ //----- HEADLINE STYLES START -----//
67
+ //---------------------------------//
68
+ h1, h2, h3, h4, h5, h6
69
+ color: $text
70
+ font-weight: 700
71
+
72
+ h1
73
+ font-family: $special-font
74
+ font-size: 18px
75
+ h2
76
+ font-size: 16px
77
+ h3
78
+ font-size: 14px
79
+ h4
80
+ font-size: 12px
81
+ h5
82
+ font-size: 10px
83
+ h6
84
+ font-size: 8px
85
+ //---------------------------------//
86
+ //------ HEADLINE STYLES END ------//
87
+ //---------------------------------//
88
+
89
+
90
+
91
+ //---------------------------------//
92
+ //------- LINK STYLES START -------//
93
+ //---------------------------------//
94
+ a
95
+ color: $link
96
+ text-decoration: none
97
+
98
+ &:visited
99
+ color: $link
100
+ text-decoration: none
101
+
102
+ &:active
103
+ color: $link-active
104
+ position: relative
105
+ top: 1px
106
+ left: 1px
107
+
108
+ &:hover, &:focus
109
+ +transition(all)
110
+ text-decoration: underline
111
+ //---------------------------------//
112
+ //-------- LINK STYLES END --------//
113
+ //---------------------------------//
114
+
115
+
116
+
117
+ *::selection
118
+ background: $orange
119
+ color: $text
120
+
121
+ *::-moz-selection
122
+ background : $orange
123
+ color: $text
124
+
125
+
126
+
127
+ //---------------------------------//
128
+ //------ TABLE STYLES START -------//
129
+ //---------------------------------//
130
+ // tables still need 'cellspacing:"0"' in the markup
131
+ table
132
+ border:
133
+ collapse: collapse
134
+ spacing: 0
135
+ width: 0
136
+ margin: 0
137
+ padding: 0
138
+ width: 100%
139
+
140
+ // Sometimes body styles don’t cascade into tables like they should so we need to repeat body styles on all tables
141
+ tr, td, th
142
+ border: none
143
+ font-size: $font-size
144
+ font-weight: 400
145
+ margin: 0
146
+ padding: 0
147
+ text-align: left
148
+ vertical-align: top
149
+
150
+ tr
151
+ border-spacing: 0 5px
152
+
153
+ th
154
+ font-weight: 700
155
+ padding: 5px 0
156
+ text-align: left
157
+
158
+ td
159
+ padding: 5px 0
160
+ //---------------------------------//
161
+ //------- TABLE STYLES END --------//
162
+ //---------------------------------//