meedan-bootstrap 0.0.3
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.
- data/README.mkdn +7 -0
- data/lib/meedan-bootstrap.rb +3 -0
- data/stylesheets/_autorefresh.scss +3 -0
- data/stylesheets/_base.scss +29 -0
- data/stylesheets/_bevels.scss +17 -0
- data/stylesheets/_bundles.scss +46 -0
- data/stylesheets/_buttons.scss +34 -0
- data/stylesheets/_cab.scss +91 -0
- data/stylesheets/_calendar.scss +69 -0
- data/stylesheets/_colors.scss +93 -0
- data/stylesheets/_desk.scss +333 -0
- data/stylesheets/_forms.scss +109 -0
- data/stylesheets/_icons.scss +304 -0
- data/stylesheets/_labels.scss +64 -0
- data/stylesheets/_media_object.scss +141 -0
- data/stylesheets/_messages.scss +19 -0
- data/stylesheets/_navigation.scss +30 -0
- data/stylesheets/_pagination.scss +20 -0
- data/stylesheets/_pointer.scss +14 -0
- data/stylesheets/_profile.scss +25 -0
- data/stylesheets/_reset.scss +12 -0
- data/stylesheets/_respond_to.scss +24 -0
- data/stylesheets/_syntax.scss +205 -0
- data/stylesheets/_tables.scss +18 -0
- data/stylesheets/_tabs.scss +29 -0
- data/stylesheets/_tooltips.scss +180 -0
- data/stylesheets/_typography.scss +163 -0
- data/stylesheets/meedan_bootstrap.scss +51 -0
- data/templates/project/foo_theme/starter-theme.scss +85 -0
- data/templates/project/foo_theme/style-ar.scss +2 -0
- data/templates/project/foo_theme/style-en.scss +2 -0
- data/templates/project/manifest.rb +15 -0
- metadata +109 -0
@@ -0,0 +1,18 @@
|
|
1
|
+
@mixin tables() {
|
2
|
+
thead {
|
3
|
+
padding: rhythm(0.5) 0;
|
4
|
+
height: rhythm(2);
|
5
|
+
@include adjust-font-size-to($xlarge-font-size);
|
6
|
+
}
|
7
|
+
|
8
|
+
th, th a {
|
9
|
+
font-weight: bold;
|
10
|
+
padding: rhythm(1);
|
11
|
+
text-decoration: none;
|
12
|
+
@include adjust-font-size-to($small-font-size);
|
13
|
+
}
|
14
|
+
|
15
|
+
td {
|
16
|
+
padding: rhythm(0.5);
|
17
|
+
}
|
18
|
+
}
|
@@ -0,0 +1,29 @@
|
|
1
|
+
@mixin tabs($color: $tupperware-blue, $size: $medium-font-size) {
|
2
|
+
|
3
|
+
ul {
|
4
|
+
font-size: $size;
|
5
|
+
border-bottom: 2px solid $light-gray;
|
6
|
+
padding: 0;
|
7
|
+
}
|
8
|
+
|
9
|
+
li {
|
10
|
+
padding: rhythm(1, $size);
|
11
|
+
float: $from-direction;
|
12
|
+
display: inline;
|
13
|
+
text-align: center;
|
14
|
+
a {
|
15
|
+
padding: rhythm(1/2);
|
16
|
+
@include en-sans-font-stack;
|
17
|
+
font-weight: normal;
|
18
|
+
position: relative;
|
19
|
+
color: $color;
|
20
|
+
background: transparent;
|
21
|
+
}
|
22
|
+
|
23
|
+
a.active {
|
24
|
+
background: $color;
|
25
|
+
font-weight: bold;
|
26
|
+
color: white;
|
27
|
+
}
|
28
|
+
}
|
29
|
+
}
|
@@ -0,0 +1,180 @@
|
|
1
|
+
@mixin tooltips {
|
2
|
+
/*
|
3
|
+
* qTip2 - Pretty powerful tooltips
|
4
|
+
* http://craigsworks.com/projects/qtip2/
|
5
|
+
*
|
6
|
+
* Version: nightly
|
7
|
+
* Copyright 2009-2010 Craig Michael Thompson - http://craigsworks.com
|
8
|
+
*
|
9
|
+
* Dual licensed under MIT or GPLv2 licenses
|
10
|
+
* http://en.wikipedia.org/wiki/MIT_License
|
11
|
+
* http://en.wikipedia.org/wiki/GNU_General_Public_License
|
12
|
+
*
|
13
|
+
* Date: Sat May 19 09:45:07.0000000000 2012
|
14
|
+
*/
|
15
|
+
|
16
|
+
/* Core qTip styles */
|
17
|
+
.ui-tooltip, .qtip{
|
18
|
+
position: absolute;
|
19
|
+
left: -28000px;
|
20
|
+
top: -28000px;
|
21
|
+
display: none;
|
22
|
+
|
23
|
+
max-width: 280px;
|
24
|
+
min-width: 50px;
|
25
|
+
|
26
|
+
border-width: 1px;
|
27
|
+
border-style: solid;
|
28
|
+
}
|
29
|
+
|
30
|
+
/* Fluid class for determining actual width in IE */
|
31
|
+
.ui-tooltip-fluid{
|
32
|
+
display: block;
|
33
|
+
visibility: hidden;
|
34
|
+
position: static !important;
|
35
|
+
float: left !important;
|
36
|
+
}
|
37
|
+
|
38
|
+
.ui-tooltip-content{
|
39
|
+
position: relative;
|
40
|
+
padding: 5px 9px;
|
41
|
+
overflow: hidden;
|
42
|
+
|
43
|
+
text-align: left;
|
44
|
+
word-wrap: break-word;
|
45
|
+
overflow: hidden;
|
46
|
+
}
|
47
|
+
|
48
|
+
.ui-tooltip-titlebar{
|
49
|
+
position: relative;
|
50
|
+
min-height: 14px;
|
51
|
+
padding: 5px 35px 5px 10px;
|
52
|
+
overflow: hidden;
|
53
|
+
|
54
|
+
border-width: 0 0 1px;
|
55
|
+
font-weight: bold;
|
56
|
+
}
|
57
|
+
|
58
|
+
.ui-tooltip-titlebar + .ui-tooltip-content{ border-top-width: 0px !important; }
|
59
|
+
|
60
|
+
/*! Default close button class */
|
61
|
+
.ui-tooltip-titlebar .ui-state-default{
|
62
|
+
position: absolute;
|
63
|
+
right: 4px;
|
64
|
+
top: 50%;
|
65
|
+
margin-top: -9px;
|
66
|
+
|
67
|
+
cursor: pointer;
|
68
|
+
outline: medium none;
|
69
|
+
|
70
|
+
border-width: 1px;
|
71
|
+
border-style: solid;
|
72
|
+
}
|
73
|
+
|
74
|
+
* html .ui-tooltip-titlebar .ui-state-default{ top: 16px; } /* IE fix */
|
75
|
+
|
76
|
+
.ui-tooltip-titlebar .ui-icon,
|
77
|
+
.ui-tooltip-icon .ui-icon{
|
78
|
+
display: block;
|
79
|
+
text-indent: -1000em;
|
80
|
+
}
|
81
|
+
|
82
|
+
.ui-tooltip-icon, .ui-tooltip-icon .ui-icon{
|
83
|
+
-moz-border-radius: 3px;
|
84
|
+
-webkit-border-radius: 3px;
|
85
|
+
border-radius: 3px;
|
86
|
+
}
|
87
|
+
|
88
|
+
.ui-tooltip-icon .ui-icon{
|
89
|
+
width: 18px;
|
90
|
+
height: 14px;
|
91
|
+
|
92
|
+
text-align: center;
|
93
|
+
text-indent: 0;
|
94
|
+
font: normal bold 10px/13px Tahoma,sans-serif;
|
95
|
+
|
96
|
+
color: inherit;
|
97
|
+
background: transparent none no-repeat -100em -100em;
|
98
|
+
}
|
99
|
+
|
100
|
+
|
101
|
+
/* Applied to 'focused' tooltips e.g. most recently displayed/interacted with */
|
102
|
+
.ui-tooltip-focus{
|
103
|
+
|
104
|
+
}
|
105
|
+
|
106
|
+
/* Applied on hover of tooltips i.e. added/removed on mouseenter/mouseleave respectively */
|
107
|
+
.ui-tooltip-hover{
|
108
|
+
|
109
|
+
}
|
110
|
+
|
111
|
+
|
112
|
+
/*! Default tooltip style */
|
113
|
+
.ui-tooltip-default{
|
114
|
+
border-color: black;
|
115
|
+
background-color: black;
|
116
|
+
color: #fff;
|
117
|
+
}
|
118
|
+
|
119
|
+
.ui-tooltip-default .ui-tooltip-titlebar{
|
120
|
+
background-color: black;
|
121
|
+
}
|
122
|
+
|
123
|
+
.ui-tooltip-default .ui-tooltip-icon{
|
124
|
+
border-color: #CCC;
|
125
|
+
background: #F1F1F1;
|
126
|
+
color: #777;
|
127
|
+
}
|
128
|
+
|
129
|
+
.ui-tooltip-default .ui-tooltip-titlebar .ui-state-hover{
|
130
|
+
border-color: #AAA;
|
131
|
+
color: #111;
|
132
|
+
}
|
133
|
+
|
134
|
+
/* Tips plugin */
|
135
|
+
.ui-tooltip .ui-tooltip-tip{
|
136
|
+
margin: 0 auto;
|
137
|
+
overflow: hidden;
|
138
|
+
z-index: 10;
|
139
|
+
}
|
140
|
+
|
141
|
+
.ui-tooltip .ui-tooltip-tip,
|
142
|
+
.ui-tooltip .ui-tooltip-tip *{
|
143
|
+
position: absolute;
|
144
|
+
|
145
|
+
line-height: 0.1px !important;
|
146
|
+
font-size: 0.1px !important;
|
147
|
+
color: #123456;
|
148
|
+
|
149
|
+
background: transparent;
|
150
|
+
border: 0px dashed transparent;
|
151
|
+
}
|
152
|
+
|
153
|
+
.ui-tooltip .ui-tooltip-tip canvas{ top: 0; left: 0; }
|
154
|
+
|
155
|
+
|
156
|
+
/* Modal plugin */
|
157
|
+
#qtip-overlay{
|
158
|
+
position: fixed;
|
159
|
+
left: -10000em;
|
160
|
+
top: -10000em;
|
161
|
+
}
|
162
|
+
|
163
|
+
/* Applied to modals with show.modal.blur set to true */
|
164
|
+
#qtip-overlay.blurs{ cursor: pointer; }
|
165
|
+
|
166
|
+
/* Change opacity of overlay here */
|
167
|
+
#qtip-overlay div{
|
168
|
+
position: absolute;
|
169
|
+
left: 0; top: 0;
|
170
|
+
width: 100%; height: 100%;
|
171
|
+
|
172
|
+
background-color: black;
|
173
|
+
|
174
|
+
opacity: 0.7;
|
175
|
+
filter:alpha(opacity=70);
|
176
|
+
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
|
177
|
+
}
|
178
|
+
|
179
|
+
|
180
|
+
}
|
@@ -0,0 +1,163 @@
|
|
1
|
+
// Standardize font sizes
|
2
|
+
$xxxlarge-font-size: 50px !default;
|
3
|
+
$xxlarge-font-size: 40px !default;
|
4
|
+
$xlarge-font-size: 32px !default;
|
5
|
+
$large-font-size: 26px !default;
|
6
|
+
$medium-large-font-size: 21px !default;
|
7
|
+
$medium-font-size: 16px !default;
|
8
|
+
$small-font-size: 14px !default;
|
9
|
+
$xsmall-font-size: 11px !default;
|
10
|
+
|
11
|
+
@mixin en-sans-font-stack { font-family: 'PT Sans', "Helvetica Neue", arial, sans-serif; }
|
12
|
+
@mixin en-sans-caption-font-stack { font-family: 'PT Sans Caption', 'Lucida Sans', "Helvetica Neue", arial, sans-serif; }
|
13
|
+
@mixin en-plain-font-stack { font-family: "helvetica neue", sans-serif; }
|
14
|
+
@mixin en-alt-font-stack { font-family: 'Pacifico', "helvetica neue"; }
|
15
|
+
@mixin en-serif-font-stack { font-family: palatino, Georgia, Times, Times New Roman, serif; }
|
16
|
+
|
17
|
+
@mixin leader-and-trailer($amount: 1, $context: $medium-font-size, $padding: 0) {
|
18
|
+
@include leader($amount, $context);
|
19
|
+
@include trailer($amount, $context);
|
20
|
+
@if $padding > 0 {
|
21
|
+
@include leader($amount, $context, padding);
|
22
|
+
@include trailer($amount, $context, padding);
|
23
|
+
}
|
24
|
+
}
|
25
|
+
|
26
|
+
@mixin quote-content {
|
27
|
+
&:before {
|
28
|
+
display: block;
|
29
|
+
@include adjust-font-size-to(70px);
|
30
|
+
font-weight: normal!important;
|
31
|
+
content: "\"";
|
32
|
+
height: 1px;
|
33
|
+
margin-#{$from-direction}: -0.45em;
|
34
|
+
position:relative;
|
35
|
+
top:-20px;
|
36
|
+
@include en-alt-font-stack;
|
37
|
+
}
|
38
|
+
}
|
39
|
+
|
40
|
+
@mixin typography() {
|
41
|
+
text-align: $from-direction;
|
42
|
+
@include en-serif-font-stack;
|
43
|
+
|
44
|
+
ol {
|
45
|
+
list-style-type: decimal;
|
46
|
+
}
|
47
|
+
|
48
|
+
h1, h2, h3, h4, h5, h6 {
|
49
|
+
font-weight: 500;
|
50
|
+
color: black;
|
51
|
+
@include full;
|
52
|
+
@include en-sans-font-stack;
|
53
|
+
}
|
54
|
+
|
55
|
+
ul {
|
56
|
+
list-style-type: disc;
|
57
|
+
list-style-position: inside;
|
58
|
+
}
|
59
|
+
|
60
|
+
strong {
|
61
|
+
font-weight: bold;
|
62
|
+
}
|
63
|
+
|
64
|
+
em {
|
65
|
+
font-style: italic;
|
66
|
+
}
|
67
|
+
|
68
|
+
pre {
|
69
|
+
// in syntax.scss
|
70
|
+
}
|
71
|
+
|
72
|
+
code {
|
73
|
+
background: $syntax-background;
|
74
|
+
color: $syntax-foreground;
|
75
|
+
@include border-radius(6%);
|
76
|
+
font-family: monospace;
|
77
|
+
@include adjust-font-size-to($small-font-size);
|
78
|
+
line-height: $large-font-size * 2;
|
79
|
+
@include border-radius(4px);
|
80
|
+
padding: 2px;
|
81
|
+
}
|
82
|
+
|
83
|
+
h1 {
|
84
|
+
color: black;
|
85
|
+
@include adjust-font-size-to($xxxlarge-font-size);
|
86
|
+
font-weight: 700;
|
87
|
+
}
|
88
|
+
|
89
|
+
h2 {
|
90
|
+
font-weight: 100;
|
91
|
+
@include adjust-font-size-to($large-font-size);
|
92
|
+
color: black;
|
93
|
+
}
|
94
|
+
|
95
|
+
h3 {
|
96
|
+
@include adjust-font-size-to($medium-font-size);
|
97
|
+
font-weight: bold;
|
98
|
+
}
|
99
|
+
|
100
|
+
h1, h2, h3 {
|
101
|
+
&.icon {
|
102
|
+
@include messages($paris-daisy-yellow);
|
103
|
+
font-weight: normal;
|
104
|
+
padding-top: 0;
|
105
|
+
padding-bottom: 0;
|
106
|
+
}
|
107
|
+
}
|
108
|
+
|
109
|
+
h4 {
|
110
|
+
@include adjust-font-size-to($medium-font-size);
|
111
|
+
@include en-sans-font-stack;
|
112
|
+
display: inline;
|
113
|
+
font-weight: bold;
|
114
|
+
}
|
115
|
+
|
116
|
+
/* default link styles*/
|
117
|
+
/* link, visited, hover, active */
|
118
|
+
a {
|
119
|
+
@include link-colors( $links-color, $links-color, $links-color, $links-color, $links-color );
|
120
|
+
text-decoration: none;
|
121
|
+
}
|
122
|
+
|
123
|
+
a:hover {
|
124
|
+
text-decoration: underline;
|
125
|
+
}
|
126
|
+
|
127
|
+
p {
|
128
|
+
@include en-serif-font-stack;
|
129
|
+
@include full;
|
130
|
+
}
|
131
|
+
|
132
|
+
p.leader {
|
133
|
+
@include adjust-font-size-to($xlarge-font-size);
|
134
|
+
}
|
135
|
+
|
136
|
+
blockquote {
|
137
|
+
@include adjust-font-size-to($large-font-size);
|
138
|
+
@include leader-and-trailer(1, $medium-font-size);
|
139
|
+
clear: both;
|
140
|
+
@include full;
|
141
|
+
@include pad(2,2);
|
142
|
+
@include quote-content;
|
143
|
+
footer {
|
144
|
+
cite a {
|
145
|
+
@include adjust-font-size-to($xsmall-font-size);
|
146
|
+
}
|
147
|
+
}
|
148
|
+
}
|
149
|
+
|
150
|
+
dt {
|
151
|
+
font-weight: bold;
|
152
|
+
}
|
153
|
+
|
154
|
+
abbr {
|
155
|
+
border-bottom: 1px dotted #666666;
|
156
|
+
cursor: help;
|
157
|
+
white-space: nowrap;
|
158
|
+
}
|
159
|
+
|
160
|
+
header {
|
161
|
+
@include en-sans-font-stack;
|
162
|
+
}
|
163
|
+
}
|
@@ -0,0 +1,51 @@
|
|
1
|
+
// ==================================================================
|
2
|
+
// = Meedan bootstrap default configuration and centralized imports =
|
3
|
+
// This file renders no css, only loads mixins for use in themes
|
4
|
+
// ==================================================================
|
5
|
+
|
6
|
+
// =============================================
|
7
|
+
// ============================================= centralized @imports
|
8
|
+
// =============================================
|
9
|
+
|
10
|
+
// Configuration
|
11
|
+
@import "base";
|
12
|
+
// Compass
|
13
|
+
@import "compass"; // See http://compass-style.org/
|
14
|
+
@import "compass/css3"; //http://compass-style.org/reference/compass/css3/
|
15
|
+
@import "compass/reset"; // http://compass-style.org/reference/compass/reset/
|
16
|
+
@import "compass/typography/vertical_rhythm"; // Compass Docs: http://bit.ly/g3CoPo
|
17
|
+
// Reset
|
18
|
+
@import "reset"; // Our reset on top of compass/reset
|
19
|
+
// Design setup
|
20
|
+
@import "colors"; // All project colors
|
21
|
+
@import "typography"; // All typography except resets
|
22
|
+
// Susy
|
23
|
+
@import "susy"; // Compass grid library: http://susy.oddbird.net/tutorial/
|
24
|
+
// Media queries
|
25
|
+
@import "respond_to";
|
26
|
+
// Page Structures
|
27
|
+
@import "pagination"; // Pagination layout
|
28
|
+
@import "tabs"; // Drupal tabs, in several flavors
|
29
|
+
@import "navigation"; // Drupal tabs, in several flavors
|
30
|
+
// Forms
|
31
|
+
@import "forms"; // Our own form markup
|
32
|
+
|
33
|
+
// Meedan-Bootstrap Features
|
34
|
+
@import "labels";
|
35
|
+
@import "buttons"; // Configurable colorful buttons
|
36
|
+
@import "tables"; // All tabular data
|
37
|
+
@import "calendar"; // A calendar widget
|
38
|
+
@import "messages"; // Notifications messages
|
39
|
+
@import "profile"; // User-profile related styles
|
40
|
+
@import "syntax"; // Code syntax highlighting
|
41
|
+
@import "cab"; // Contextual action boxes (lists of links)
|
42
|
+
@import "media_object"; // media object -- eg a youtube video or tweet
|
43
|
+
@import "bundles"; // blog update or Desk -- the thing that has many media objects
|
44
|
+
@import "tooltips"; // using qTip2
|
45
|
+
@import "desk";
|
46
|
+
@import "icons"; // using FontAwesome
|
47
|
+
@import "bevels"; // bevels helper
|
48
|
+
@import "pointer"; // css3 triangular pointer eg for talk bubbles
|
49
|
+
|
50
|
+
// Establish baseline
|
51
|
+
@include establish-baseline($base-font-size); // this uses html > body selector
|
@@ -0,0 +1,85 @@
|
|
1
|
+
// ==============================================================
|
2
|
+
// = Starter theme for meedan-bootstrap =
|
3
|
+
// ==============================================================
|
4
|
+
|
5
|
+
// This theme implements the meedan-bootstrap library
|
6
|
+
// ... which centralizes imports and provides most functionality
|
7
|
+
@import "meedan_bootstrap";
|
8
|
+
|
9
|
+
// set key layout variables for mixins we will use
|
10
|
+
// ... view all settings in meedan-bootstrap/base.scss
|
11
|
+
// you may wish to create your own base.scss
|
12
|
+
|
13
|
+
$total-cols: 20;
|
14
|
+
$primary-cols: 16;
|
15
|
+
$primary-padding: 0;
|
16
|
+
$secondary-cols: 4;
|
17
|
+
|
18
|
+
// Default theme layout mixin
|
19
|
+
@mixin theme-layout($primary-cols, $secondary-cols) {
|
20
|
+
#page {
|
21
|
+
@include container;
|
22
|
+
@include leader(1, $medium-font-size);
|
23
|
+
}
|
24
|
+
|
25
|
+
#content-primary {
|
26
|
+
@include columns($primary-cols, false);
|
27
|
+
.main {
|
28
|
+
h4 {
|
29
|
+
color: black;
|
30
|
+
}
|
31
|
+
@include columns($primary-cols, false);
|
32
|
+
}
|
33
|
+
}
|
34
|
+
|
35
|
+
#content-secondary {
|
36
|
+
@include columns($secondary-cols, false);
|
37
|
+
@include leader(4, $medium-font-size);
|
38
|
+
@include omega;
|
39
|
+
}
|
40
|
+
}
|
41
|
+
|
42
|
+
// main styles for theme
|
43
|
+
// .. because it begins with a selector, it is going to render CSS
|
44
|
+
body {
|
45
|
+
// .. first it include the basics from meedan-bootstrap
|
46
|
+
// ... these files only contain mixins, you still have to use them.
|
47
|
+
@include typography;
|
48
|
+
@include reset;
|
49
|
+
@include tooltips;
|
50
|
+
|
51
|
+
// ... the primary section of the layout
|
52
|
+
#content-primary {
|
53
|
+
// tabs from meedan-bootstrap
|
54
|
+
.tabs { @include tabs; }
|
55
|
+
|
56
|
+
// table from meedan-bootstrap
|
57
|
+
table { @include tables; }
|
58
|
+
|
59
|
+
// pagination from meedan-bootstrap
|
60
|
+
.pagination { @include pagination; }
|
61
|
+
}
|
62
|
+
|
63
|
+
// Main layout
|
64
|
+
@include theme-layout($primary-cols, $secondary-cols);
|
65
|
+
|
66
|
+
// ===========================================================================
|
67
|
+
// = Responsive layout overrides
|
68
|
+
// ===========================================================================
|
69
|
+
|
70
|
+
@include respond-to("small-screens") {
|
71
|
+
|
72
|
+
.optional, .really-optional {
|
73
|
+
display: none;
|
74
|
+
}
|
75
|
+
|
76
|
+
@include respond-to("medium-screens") {
|
77
|
+
.optional, .really-optional {
|
78
|
+
display: none;
|
79
|
+
}
|
80
|
+
}
|
81
|
+
|
82
|
+
@include respond-to("large-screens") {
|
83
|
+
}
|
84
|
+
}
|
85
|
+
}
|