meedan-bootstrap 0.0.3
Sign up to get free protection for your applications and to get access to all the features.
- 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
data/README.mkdn
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
An internal style guide compass plugin for Meedan
|
2
|
+
|
3
|
+
Inspired by twitter-bootstrap but with more bidirectional support using the Susy grid framework. Also Meedan-bootstrap does not contain a javascript requirements, just SCSS.
|
4
|
+
|
5
|
+
This is used as a quick-start for generating projects, but also for maintaining up-to-date projects in production, and for maintaining a readily available set of frontend patterns expressed in Sass.
|
6
|
+
|
7
|
+
It comes with a [handy styleguide]:"http://".
|
@@ -0,0 +1,29 @@
|
|
1
|
+
// Susy grid settings for compass-susy-plugin
|
2
|
+
// Surgeworks blog post on this grid concept: http://bit.ly/nkOyO8
|
3
|
+
// Required by Susy:
|
4
|
+
$show-grid-backgrounds: true !default; // toggle grid visualization
|
5
|
+
$total-width: 1180px !default; // total target width in pixels
|
6
|
+
$total-cols: 20 !default; // total number of cols across
|
7
|
+
$col-width-abs: 40px !default; // one col width
|
8
|
+
$col-width: ($col-width-abs / $total-width) * 100% !default; // to %
|
9
|
+
$gutter-width-abs: 20px !default; // target space between cols
|
10
|
+
$gutter-width: ($gutter-width-abs / $total-width) * 100% !default; // to %
|
11
|
+
$side-gutter-width: 0 !default; // padding on outermost sides?
|
12
|
+
$gutter: $gutter-width !default; // Convenience alias
|
13
|
+
$primary-cols: 14 !default; // 14 not 16: b/c default setup expects pad(1,1) on the primary
|
14
|
+
$secondary-cols: 4 !default; // 14 primary + 2 pad + 4 secondary = 20 total columns
|
15
|
+
|
16
|
+
// Fonts and vertical rhythm
|
17
|
+
// Scott Davis blog post on vertical rhythm: http://bit.ly/vpvrit
|
18
|
+
// Required by compass typography:
|
19
|
+
$base-font-size: 16px !default; // for rhythm()
|
20
|
+
$base-line-height: 24px !default; // for rhythm()
|
21
|
+
$default-rhythm-border-style: solid !default; // for debugging rhythm()
|
22
|
+
$ie-font-ratio: 16px / 100% !default; // WARNING deprecated:
|
23
|
+
$base-rhythm-unit: $base-line-height / $base-font-size * 1em !default;
|
24
|
+
$base-leader: ($base-line-height - $base-font-size) * 1em / $base-font-size !default;
|
25
|
+
$base-half-leader: $base-leader / 2 !default;
|
26
|
+
$relative-font-size: false !default; // switching to ems, in the future.
|
27
|
+
$legacy-support-for-ie: true !default; // Drop IE Support: Optional Compass override for validation
|
28
|
+
$round-to-nearest-half-line: true;
|
29
|
+
|
@@ -0,0 +1,17 @@
|
|
1
|
+
// bevels helper, works with lists of .row elements and li elements
|
2
|
+
// used in forms.scss and navigation
|
3
|
+
@mixin bevels($color: $light-gray, $background: lighten($gray, 5%)) {
|
4
|
+
.row, li {
|
5
|
+
background: $background;
|
6
|
+
border-top: 1px solid $color;
|
7
|
+
border-bottom: 1px solid darken($color, 20%);
|
8
|
+
}
|
9
|
+
|
10
|
+
.row:first-child, li:first-child {
|
11
|
+
border-top-width:0;
|
12
|
+
}
|
13
|
+
|
14
|
+
.row:last-child, li:first-child {
|
15
|
+
border-bottom-width: 0;
|
16
|
+
}
|
17
|
+
}
|
@@ -0,0 +1,46 @@
|
|
1
|
+
// A bundle of media objects
|
2
|
+
@mixin bundle($cols: $primary-cols, $context: $primary-cols) {
|
3
|
+
padding-top: rhythm(2);
|
4
|
+
@include full();
|
5
|
+
background: #ffffff;
|
6
|
+
@include pad(1/2, 1/2);
|
7
|
+
|
8
|
+
blockquote {
|
9
|
+
float: $from-direction;
|
10
|
+
clear: both;
|
11
|
+
padding: rhythm(1);
|
12
|
+
margin: rhythm(1);
|
13
|
+
font-weight: normal;
|
14
|
+
color: lighten(black, 20%);
|
15
|
+
}
|
16
|
+
|
17
|
+
div.bundle-byline {
|
18
|
+
font-weight: bold;
|
19
|
+
text-decoration: none;
|
20
|
+
font-size: $xsmall-font-size;
|
21
|
+
padding: 0 rhythm(1);
|
22
|
+
|
23
|
+
/* The timestamp */
|
24
|
+
span a {
|
25
|
+
color: black;
|
26
|
+
text-decoration: none;
|
27
|
+
&:visited {color: black;}
|
28
|
+
&:hover { color: $identity;}
|
29
|
+
}
|
30
|
+
}
|
31
|
+
|
32
|
+
div.bundle-body {
|
33
|
+
float: $from-direction;
|
34
|
+
clear: both;
|
35
|
+
padding: rhythm(1);
|
36
|
+
}
|
37
|
+
|
38
|
+
/* This is the whole section that wraps the actual media objects.*/
|
39
|
+
.bundle-reports {
|
40
|
+
@include full;
|
41
|
+
.media-object {
|
42
|
+
@include media-object();
|
43
|
+
padding: rhythm(1);
|
44
|
+
}
|
45
|
+
}
|
46
|
+
}
|
@@ -0,0 +1,34 @@
|
|
1
|
+
|
2
|
+
// use it on a button element.
|
3
|
+
@mixin button($width: 30%, $font-size: $large-font-size, $color: $gray) {
|
4
|
+
// defaults to nothing
|
5
|
+
&.default {
|
6
|
+
|
7
|
+
}
|
8
|
+
|
9
|
+
&.large {
|
10
|
+
@include adjust-font-size-to($large-font-size);
|
11
|
+
}
|
12
|
+
|
13
|
+
&.xlarge {
|
14
|
+
@include adjust-font-size-to($xlarge-font-size);
|
15
|
+
}
|
16
|
+
|
17
|
+
&.fancy {
|
18
|
+
@include background-image(linear-gradient($color, darken($color, 10%)));
|
19
|
+
@include border-radius($font-size/6);
|
20
|
+
@include adjust-font-size-to($font-size);
|
21
|
+
@include text-shadow(darken($color, 30%) 0px -1px 0);
|
22
|
+
color: white;
|
23
|
+
text-decoration: none;
|
24
|
+
text-align: center;
|
25
|
+
&:hover {
|
26
|
+
cursor: pointer;
|
27
|
+
}
|
28
|
+
|
29
|
+
&:active {
|
30
|
+
@include background-image(linear-gradient(darken($color, 40%), $color, $color 4%));
|
31
|
+
}
|
32
|
+
}
|
33
|
+
}
|
34
|
+
|
@@ -0,0 +1,91 @@
|
|
1
|
+
// ====================
|
2
|
+
// = button style cab =
|
3
|
+
// ====================
|
4
|
+
|
5
|
+
// just a list of buttons, the default "CAB"
|
6
|
+
@mixin contextual-action-buttons {
|
7
|
+
@include clearfix;
|
8
|
+
}
|
9
|
+
|
10
|
+
$cab-dropdown-height: rhythm(1);
|
11
|
+
|
12
|
+
/* =================================================== */
|
13
|
+
/* = Dropdown style CAB */
|
14
|
+
/* A flexible popup/dropdown thing for Media Objects */
|
15
|
+
/* Applied to the ul.links in Media Object */
|
16
|
+
/* =================================================== */
|
17
|
+
@mixin cab-dropdown() {
|
18
|
+
// // rare case where we use absolute positioning, probably can remove CGB apr 23 2012
|
19
|
+
// position: absolute;
|
20
|
+
// top: $cab-dropdown-height;
|
21
|
+
// #{opposite-position($from-direction)}: 0;
|
22
|
+
// /* we toggle this on with js */
|
23
|
+
// display: none;
|
24
|
+
// width: 100px;
|
25
|
+
// background: white;
|
26
|
+
// z-index: 10000;
|
27
|
+
// @include box-shadow($dark-gray 0px 1px 1px);
|
28
|
+
//
|
29
|
+
// li.publish {
|
30
|
+
// a {
|
31
|
+
// &:hover {
|
32
|
+
// background: lighten($midnight-blue, 50%);
|
33
|
+
// }
|
34
|
+
// .icon {
|
35
|
+
// @include bidi-sprite("check_alt_12x12");
|
36
|
+
// }
|
37
|
+
// }
|
38
|
+
// }
|
39
|
+
// /*3. Moderate */
|
40
|
+
// li.moderate {
|
41
|
+
// a {
|
42
|
+
// &:hover {
|
43
|
+
// background: lighten($cinnamon-brown, 50%);
|
44
|
+
// }
|
45
|
+
// .icon {
|
46
|
+
// @include bidi-sprite("chat_12x12");
|
47
|
+
// }
|
48
|
+
// }
|
49
|
+
// }
|
50
|
+
// /*4. Edit */
|
51
|
+
// li.edit {
|
52
|
+
// a {
|
53
|
+
// &:hover {
|
54
|
+
// background: lighten($postit-yellow, 50%);
|
55
|
+
// }
|
56
|
+
// .icon {
|
57
|
+
// @include bidi-sprite("pen_12x12");
|
58
|
+
// }
|
59
|
+
// }
|
60
|
+
// }
|
61
|
+
}
|
62
|
+
|
63
|
+
/* ========================================================== */
|
64
|
+
/* = Mixin: the CAB button, used in media object = */
|
65
|
+
/* This is the main button that opens the cab */
|
66
|
+
/* TODO should be used in the cab mixin, not media object CGB */
|
67
|
+
/* ========================================================== */
|
68
|
+
@mixin cab-dropdown-button() {
|
69
|
+
// float: none;
|
70
|
+
// position: absolute;
|
71
|
+
// padding: rhythm(1/2);
|
72
|
+
// #{opposite-position($from-direction)}: 0px;
|
73
|
+
// top: 0px;
|
74
|
+
//
|
75
|
+
// /* the button is an anchor with "+" in it */
|
76
|
+
// a {
|
77
|
+
// width: 100%;
|
78
|
+
// text-align: center;
|
79
|
+
// text-decoration: none;
|
80
|
+
// color: $dark-gray;
|
81
|
+
// @include bidi_sprite("cab_active_gear");
|
82
|
+
// padding: 0;
|
83
|
+
// font-family: courier, sans-serif;
|
84
|
+
// width: rhythm(1);
|
85
|
+
// height: $cab-height;
|
86
|
+
// display: block;
|
87
|
+
// &:hover {
|
88
|
+
// color: black;
|
89
|
+
// }
|
90
|
+
// }
|
91
|
+
}
|
@@ -0,0 +1,69 @@
|
|
1
|
+
@mixin calendar-today() {
|
2
|
+
color: black;
|
3
|
+
border-#{$opposite}: 1px solid $gray;
|
4
|
+
div.month {
|
5
|
+
font-size: $medium-font-size;
|
6
|
+
margin-top: 10px;
|
7
|
+
}
|
8
|
+
div.day {
|
9
|
+
font-size: 60px;
|
10
|
+
font-weight: 700;
|
11
|
+
line-height: 1;
|
12
|
+
.timezone {
|
13
|
+
font-size: $small-font-size;
|
14
|
+
color: $gray;
|
15
|
+
float: $from-direction;
|
16
|
+
clear: both;
|
17
|
+
width: 100%;
|
18
|
+
text-align: center;
|
19
|
+
padding-bottom: $gutter;
|
20
|
+
}
|
21
|
+
}
|
22
|
+
}
|
23
|
+
|
24
|
+
@mixin calendar-month() {
|
25
|
+
.today {
|
26
|
+
background: transparent!important;
|
27
|
+
color: black;
|
28
|
+
font-weight: bold;
|
29
|
+
a {
|
30
|
+
color: black;
|
31
|
+
font-weight: bold;
|
32
|
+
}
|
33
|
+
}
|
34
|
+
.date-nav {
|
35
|
+
background: white!important;
|
36
|
+
border-width: 0;
|
37
|
+
border-top: 1px solid $gray;
|
38
|
+
}
|
39
|
+
|
40
|
+
thead th.days {
|
41
|
+
background: white;
|
42
|
+
border-width: 0;
|
43
|
+
}
|
44
|
+
|
45
|
+
td {
|
46
|
+
text-align: center;
|
47
|
+
}
|
48
|
+
|
49
|
+
.mini-day-on {
|
50
|
+
a {
|
51
|
+
color: $rdio-blue;
|
52
|
+
&:hover {
|
53
|
+
background: lighten($rdio-blue, 20%);
|
54
|
+
color: white;
|
55
|
+
font-weight: bold;
|
56
|
+
}
|
57
|
+
&:active {
|
58
|
+
background: lighten($rdio-blue, 10%);
|
59
|
+
}
|
60
|
+
font-weight: bold;
|
61
|
+
@include border-radius(30px);
|
62
|
+
display: block;
|
63
|
+
text-align: center;
|
64
|
+
}
|
65
|
+
}
|
66
|
+
a {
|
67
|
+
text-decoration: none;
|
68
|
+
}
|
69
|
+
}
|
@@ -0,0 +1,93 @@
|
|
1
|
+
/* don't use 3-digit colors, use the full hex */
|
2
|
+
|
3
|
+
/* Colors */
|
4
|
+
$bright-blue: #0089e4;
|
5
|
+
$midnight-blue: #003366;
|
6
|
+
$cinnamon-brown: #884400;
|
7
|
+
|
8
|
+
$frenchpass-blue: #bbddff;
|
9
|
+
$cornflower-blue: #aaccee;
|
10
|
+
$sulu-green: #bbee77;
|
11
|
+
$terminal-green: #5BB304;
|
12
|
+
|
13
|
+
/* Greys */
|
14
|
+
$light-gray: #eeeeee;
|
15
|
+
$gray: #cccccc;
|
16
|
+
$dark-gray: #d0d0d0;
|
17
|
+
$darker-gray: darken($dark-gray, 30%);
|
18
|
+
$darkest-gray: #000000;
|
19
|
+
|
20
|
+
/* ... Some other colors available */
|
21
|
+
$dark-blue: #0064a6;
|
22
|
+
|
23
|
+
$yellow-orange: #ffcd93;
|
24
|
+
$postit-yellow: #fff9e6;
|
25
|
+
$paris-daisy-yellow: #ffee66;
|
26
|
+
$confetti-yellow: #eedd55;
|
27
|
+
$flamingo-orange: #ee6633;
|
28
|
+
$cinnamon-orange: #C25000;
|
29
|
+
$hot-cinnamon-orange: #dd5522;
|
30
|
+
|
31
|
+
$verdun-green: #336600;
|
32
|
+
$reef-green: #ccff88;
|
33
|
+
$dark-brown: #998d86;
|
34
|
+
$firetruck-red: #B60800;
|
35
|
+
$donjuan: #5f4c4c;
|
36
|
+
|
37
|
+
// Identity and theme colors
|
38
|
+
$identity: $firetruck-red;
|
39
|
+
|
40
|
+
// needed by compass
|
41
|
+
$default-box-shadow-color: #c3c3c3;
|
42
|
+
$accent: $identity;
|
43
|
+
|
44
|
+
// ===============
|
45
|
+
// = syntax.scss =
|
46
|
+
// ===============
|
47
|
+
$syntax-background: lighten(#09223F, 30%);
|
48
|
+
$syntax-foreground: #FFEFFF;
|
49
|
+
$syntax-border: #888;
|
50
|
+
$line-no-background: #EFEFEF;
|
51
|
+
$line-no-foreground: #888;
|
52
|
+
$entity-clr: #FFDD00;
|
53
|
+
$keyword-clr: #FF9D00;
|
54
|
+
$constant-clr: #FF628C;
|
55
|
+
$string-clr: #3AD900;
|
56
|
+
$comment-clr: #0088FF;
|
57
|
+
$regex-clr: #80FFC2;
|
58
|
+
$variable-clr: #CCCCCC;
|
59
|
+
$key: #ddf080;
|
60
|
+
|
61
|
+
$twitter-blue: #1D88C9;
|
62
|
+
$facebook-blue: #264887;
|
63
|
+
$youtube-red: #F32824;
|
64
|
+
|
65
|
+
|
66
|
+
$body-bkg-color: $light-gray;
|
67
|
+
$sidebar-bkg-color: #ffffff;
|
68
|
+
|
69
|
+
// ====================
|
70
|
+
// = susy grid colors =
|
71
|
+
// ====================
|
72
|
+
$grid-background-gutter-color : $postit-yellow;
|
73
|
+
$grid-background-column-color : white;
|
74
|
+
|
75
|
+
// ====================================
|
76
|
+
// = recently used in checkdesk theme =
|
77
|
+
// TODO not sure how to structure the palette
|
78
|
+
// but clearly we can improve, create a few other pallets — CGB
|
79
|
+
// ====================================
|
80
|
+
$thrush-brown: #a55c26;
|
81
|
+
$buttermilk-yellow: #ffe789;
|
82
|
+
$tupperware-blue: #1777a4;
|
83
|
+
|
84
|
+
// links colors for compass links helper
|
85
|
+
$links-color: $tupperware-blue;
|
86
|
+
$links-active-color: $darkest-gray;
|
87
|
+
$links-visited-color: $tupperware-blue;
|
88
|
+
|
89
|
+
// form colors for forms.scss
|
90
|
+
$form-primary-accent: $bright-blue;
|
91
|
+
$form-validation-error: $firetruck-red;
|
92
|
+
$form-validation-success: $verdun-green;
|
93
|
+
$form-valifation-warning: $yellow-orange;
|
@@ -0,0 +1,333 @@
|
|
1
|
+
@mixin thread($thread-width: $primary-cols, $context: $primary-cols ) {
|
2
|
+
@include border-radius(4px);
|
3
|
+
@include columns($thread-width, $context);
|
4
|
+
background: $light-gray;
|
5
|
+
@include leader-and-trailer(1, $medium-font-size);
|
6
|
+
|
7
|
+
// footer of a thread
|
8
|
+
footer {
|
9
|
+
background-color: darken($light-gray, 5%);
|
10
|
+
@include columns($thread-width, $thread-width);
|
11
|
+
@include trailer(1, $medium-font-size);
|
12
|
+
|
13
|
+
// sometimes footers go in the top (in html5), so they need special treatment like so:
|
14
|
+
&:first-of-type {
|
15
|
+
margin-bottom: 0;
|
16
|
+
}
|
17
|
+
|
18
|
+
.contextual-action-buttons {
|
19
|
+
padding: 0 2%;
|
20
|
+
@include opacity(1);
|
21
|
+
clear: both;
|
22
|
+
height: rhythm(1);
|
23
|
+
@include leader-and-trailer(0.5, $medium-font-size);
|
24
|
+
}
|
25
|
+
}
|
26
|
+
|
27
|
+
// thread prompt
|
28
|
+
.prompt {
|
29
|
+
background: lighten($dark-blue, 10%);
|
30
|
+
@include columns($thread-width, $thread-width);
|
31
|
+
@include leader(0.5);
|
32
|
+
|
33
|
+
h2 {
|
34
|
+
@include adjust-font-size-to($xxlarge-font-size);
|
35
|
+
font-weight: 700;
|
36
|
+
@include en-sans-font-stack;
|
37
|
+
color: white;
|
38
|
+
}
|
39
|
+
|
40
|
+
// inner padding to each element inside the prompt
|
41
|
+
h2,
|
42
|
+
.contextual-action-buttons,
|
43
|
+
.byline {
|
44
|
+
padding-#{$from-direction}: 2%;
|
45
|
+
}
|
46
|
+
|
47
|
+
.byline > * {
|
48
|
+
float: $from-direction;
|
49
|
+
@include adjust-font-size-to($small-font-size);
|
50
|
+
margin-#{opposite-position($from-direction)}: rhythm(0.2, $small-font-size);
|
51
|
+
}
|
52
|
+
|
53
|
+
.contextual-action-buttons button {
|
54
|
+
@include opacity(1);
|
55
|
+
}
|
56
|
+
|
57
|
+
|
58
|
+
.byline {
|
59
|
+
@include adjust-font-size-to($medium-large-font-size);
|
60
|
+
@include en-sans-font-stack;
|
61
|
+
color: lighten($bright-blue, 20%);
|
62
|
+
font-style: italic;
|
63
|
+
a {
|
64
|
+
color: lighten($bright-blue, 20%);
|
65
|
+
}
|
66
|
+
img {
|
67
|
+
width: rhythm(1);
|
68
|
+
float: $from-direction;
|
69
|
+
padding-#{opposite-position($from-direction)}: 2%;
|
70
|
+
}
|
71
|
+
}
|
72
|
+
}
|
73
|
+
|
74
|
+
// individual comment
|
75
|
+
div.comment {
|
76
|
+
float: $from-direction;
|
77
|
+
clear: both;
|
78
|
+
@include adjust-font-size-to($medium-large-font-size);
|
79
|
+
padding-left: 2%;
|
80
|
+
padding-right: 2%;
|
81
|
+
h4 {
|
82
|
+
@include en-sans-caption-font-stack;
|
83
|
+
}
|
84
|
+
// nested comment
|
85
|
+
&.nested {
|
86
|
+
@include adjust-font-size-to($small-font-size);
|
87
|
+
@include leader-and-trailer(0.5, $small-font-size);
|
88
|
+
padding-#{$from-direction}: 10%;
|
89
|
+
}
|
90
|
+
|
91
|
+
// author avatar
|
92
|
+
img {
|
93
|
+
@include columns(1, $thread-width);
|
94
|
+
}
|
95
|
+
}
|
96
|
+
}
|
97
|
+
|
98
|
+
|
99
|
+
@mixin desk-header($header-width: $primary-cols, $desk-width: $primary-cols) {
|
100
|
+
@include columns($header-width, $desk-width);
|
101
|
+
|
102
|
+
h2 {
|
103
|
+
@include adjust-font-size-to($xxlarge-font-size);
|
104
|
+
@include leader(1, $xxlarge-font-size);
|
105
|
+
font-weight: 400;
|
106
|
+
color: black;
|
107
|
+
display: block;
|
108
|
+
clear: none;
|
109
|
+
}
|
110
|
+
}
|
111
|
+
|
112
|
+
// featured metadata, a row of boxes featured on a desk
|
113
|
+
@mixin feature($feature-width: 6, $context: $desk-width) {
|
114
|
+
@include columns($feature-width, $context);
|
115
|
+
|
116
|
+
h3, p, .avatars {
|
117
|
+
@include full;
|
118
|
+
}
|
119
|
+
|
120
|
+
h3 {
|
121
|
+
text-transform: uppercase;
|
122
|
+
color: black;
|
123
|
+
}
|
124
|
+
|
125
|
+
.avatars {
|
126
|
+
@include clearfix;
|
127
|
+
height: rhythm(1, $medium-font-size);
|
128
|
+
img {
|
129
|
+
width: rhythm(1, $medium-font-size);
|
130
|
+
height: rhythm(1, $medium-font-size);
|
131
|
+
}
|
132
|
+
}
|
133
|
+
|
134
|
+
&.secondary {
|
135
|
+
@include columns($feature-width, $context);
|
136
|
+
}
|
137
|
+
|
138
|
+
&.tertiary {
|
139
|
+
@include columns($feature-width - 2, $context);
|
140
|
+
clear: none;
|
141
|
+
|
142
|
+
time {
|
143
|
+
@include adjust-font-size-to($large-font-size);
|
144
|
+
font-weight: normal;
|
145
|
+
}
|
146
|
+
|
147
|
+
h3 {
|
148
|
+
clear: none;
|
149
|
+
text-transform: uppercase;
|
150
|
+
}
|
151
|
+
}
|
152
|
+
}
|
153
|
+
|
154
|
+
// CABs! Appear in many contexts: A list of buttons.
|
155
|
+
.contextual-action-buttons {
|
156
|
+
@include full;
|
157
|
+
|
158
|
+
button {
|
159
|
+
float: $from-direction;
|
160
|
+
}
|
161
|
+
}
|
162
|
+
|
163
|
+
// a main thread in a conversation (inside a section)
|
164
|
+
section.thread {
|
165
|
+
@include thread;
|
166
|
+
}
|
167
|
+
|
168
|
+
// the links column
|
169
|
+
@mixin links-section($links-width, $context) {
|
170
|
+
@include columns($links-width - 2, $context);
|
171
|
+
@include pad(1, 1, $context);
|
172
|
+
.media-object {
|
173
|
+
@include media-object($links-width - 2, $links-width - 2);
|
174
|
+
@include pad(1, 1, $links-width - 2);
|
175
|
+
}
|
176
|
+
}
|
177
|
+
|
178
|
+
// discussion and links combined one column
|
179
|
+
@mixin discussion-and-links-section($discussion-width, $context) {
|
180
|
+
@include columns($discussion-width - 2, $context);
|
181
|
+
@include pad(1, 1, $context);
|
182
|
+
|
183
|
+
// override comment width
|
184
|
+
div.comment {
|
185
|
+
@include leader(1, $medium-font-size);
|
186
|
+
@include columns($discussion-width - 4, $discussion-width - 2);
|
187
|
+
@include pad(1, 1, $context);
|
188
|
+
|
189
|
+
@include trailing-border;
|
190
|
+
border-color: $dark-gray;
|
191
|
+
|
192
|
+
&.nested {
|
193
|
+
// need to turn off nesting for a second
|
194
|
+
// font-size: $medium-font-size;
|
195
|
+
// @include columns($discussion-width - 4, $discussion-width - 2);
|
196
|
+
// @include pad(1, 0, $context);
|
197
|
+
}
|
198
|
+
}
|
199
|
+
|
200
|
+
// override media object
|
201
|
+
.media-object {
|
202
|
+
@include leader(0.5, $medium-font-size);
|
203
|
+
@include columns($discussion-width - 4, $discussion-width - 2);
|
204
|
+
@include pad(1, 1, $discussion-width - 2);
|
205
|
+
embed iframe {
|
206
|
+
height: 400px;
|
207
|
+
}
|
208
|
+
}
|
209
|
+
}
|
210
|
+
|
211
|
+
// the discussion column
|
212
|
+
@mixin discussion-section($discussion-width, $context) {
|
213
|
+
@include columns($discussion-width - 1, $context);
|
214
|
+
@include omega;
|
215
|
+
}
|
216
|
+
|
217
|
+
// =============
|
218
|
+
// = Main desk =
|
219
|
+
// =============
|
220
|
+
@mixin desk($desk-width: $primary-cols, $context: $primary-cols) {
|
221
|
+
|
222
|
+
// the CAB
|
223
|
+
.contextual-action-buttons {
|
224
|
+
@include full;
|
225
|
+
height: rhythm(1);
|
226
|
+
@include leader-and-trailer(0.5, $medium-font-size);
|
227
|
+
button {
|
228
|
+
float: $from-direction;
|
229
|
+
margin-top: 2px;
|
230
|
+
@include opacity(0.2);
|
231
|
+
}
|
232
|
+
}
|
233
|
+
|
234
|
+
// CAB partial opacity until hover
|
235
|
+
* { &:hover { &>.contextual-action-buttons { button { @include opacity(1); } } } }
|
236
|
+
|
237
|
+
|
238
|
+
// Main desk layout div
|
239
|
+
.main {
|
240
|
+
@include columns($desk-width - 1, $context);
|
241
|
+
|
242
|
+
// Main desk header
|
243
|
+
&>header {
|
244
|
+
h1 {
|
245
|
+
// background: url("/images/cover_photo.png");
|
246
|
+
@include columns($desk-width - 1, $desk-width - 1);
|
247
|
+
@include leader(1, $xxlarge-font-size);
|
248
|
+
}
|
249
|
+
.byline {
|
250
|
+
color: $gray;
|
251
|
+
a {
|
252
|
+
color: $gray;
|
253
|
+
}
|
254
|
+
img {
|
255
|
+
width: rhythm(0.8);
|
256
|
+
}
|
257
|
+
}
|
258
|
+
}
|
259
|
+
|
260
|
+
// desk statement in the desk header
|
261
|
+
$statement-width: $desk-width;
|
262
|
+
div.statement {
|
263
|
+
@include columns($statement-width, $desk-width);
|
264
|
+
p.inner {
|
265
|
+
@include adjust-font-size-to($large-font-size);
|
266
|
+
@include trailer(0.5, $large-font-size);
|
267
|
+
}
|
268
|
+
}
|
269
|
+
|
270
|
+
// desk feature boxes in the desk header
|
271
|
+
$features-width: $desk-width;
|
272
|
+
$feature-width: 5;
|
273
|
+
|
274
|
+
.features {
|
275
|
+
@include columns($desk-width, $desk-width);
|
276
|
+
.feature {
|
277
|
+
@include feature($feature-width, $features-width);
|
278
|
+
}
|
279
|
+
|
280
|
+
// the row of labels in the desk header
|
281
|
+
&.alt {
|
282
|
+
@include columns($desk-width, $desk-width);
|
283
|
+
@include leader-and-trailer(0.5);
|
284
|
+
.label-wrapper {
|
285
|
+
float: $from-direction;
|
286
|
+
width: auto;
|
287
|
+
clear: none;
|
288
|
+
min-width: 180px;
|
289
|
+
width: 13%;
|
290
|
+
padding-#{opposite-position($from-direction)}: 2%;
|
291
|
+
margin-#{opposite-position($from-direction)}: 2%;
|
292
|
+
height: rhythm(1);
|
293
|
+
}
|
294
|
+
}
|
295
|
+
}
|
296
|
+
}
|
297
|
+
|
298
|
+
.helper {
|
299
|
+
background-color: $buttermilk-yellow;
|
300
|
+
@include messages;
|
301
|
+
.get-started {
|
302
|
+
@include icon { @extend .icon-hand-#{opposite-position($from-direction)};};
|
303
|
+
padding-#{$from-direction}: 20px;
|
304
|
+
}
|
305
|
+
}
|
306
|
+
// Discussion and link section headers
|
307
|
+
section.discussion>header,
|
308
|
+
section.links>header,
|
309
|
+
section.discussion-and-links>header {
|
310
|
+
@include desk-header;
|
311
|
+
}
|
312
|
+
|
313
|
+
// empty discussion or links section
|
314
|
+
.empty {
|
315
|
+
@include leader-and-trailer(0.5, $medium-font-size);
|
316
|
+
@include leader-and-trailer(1, $medium-font-size, 1);
|
317
|
+
background: $buttermilk-yellow;
|
318
|
+
h3 {
|
319
|
+
padding-#{$from-direction}: 2%;
|
320
|
+
}
|
321
|
+
}
|
322
|
+
|
323
|
+
// Main sections
|
324
|
+
section.links { @include links-section(7, $desk-width); }
|
325
|
+
section.discussion { @include discussion-section(9, $desk-width); }
|
326
|
+
section.discussion-and-links { @include discussion-and-links-section($desk-width, $desk-width); }
|
327
|
+
|
328
|
+
// editing a desk
|
329
|
+
&.desk-edit {
|
330
|
+
padding: rhythm(1);
|
331
|
+
@include clearfix;
|
332
|
+
}
|
333
|
+
}
|