diff options
Diffstat (limited to 'app/assets/stylesheets')
37 files changed, 3569 insertions, 0 deletions
diff --git a/app/assets/stylesheets/api/rows.css.scss b/app/assets/stylesheets/api/rows.css.scss new file mode 100644 index 0000000..4fad3d5 --- /dev/null +++ b/app/assets/stylesheets/api/rows.css.scss @@ -0,0 +1,3 @@ +// Place all the styles related to the api/rows controller here. +// They will automatically be included in application.css. +// You can use Sass (SCSS) here: http://sass-lang.com/ diff --git a/app/assets/stylesheets/app/layouts/_app.scss b/app/assets/stylesheets/app/layouts/_app.scss new file mode 100644 index 0000000..abbe8b1 --- /dev/null +++ b/app/assets/stylesheets/app/layouts/_app.scss @@ -0,0 +1,24 @@ +// Application Layout +// ---------------------------------------- +// TODO: This generates huge selectors.. +.app { + + #main { + @include center-container(1000px, 0, 0 8px); + @include clearfix; + @include debug(gray); + } + + $sidebar: 215px; + $content: 758px; + + .container { + & > aside { + @include float(left, $sidebar, green); + } + + & > .content { + @include float(right, $content, blue); + } + } +}
\ No newline at end of file diff --git a/app/assets/stylesheets/app/layouts/_conference.scss b/app/assets/stylesheets/app/layouts/_conference.scss new file mode 100644 index 0000000..18fb232 --- /dev/null +++ b/app/assets/stylesheets/app/layouts/_conference.scss @@ -0,0 +1,136 @@ +// Conference +// ---------------------------------------- + +// The Usual Box with Mute, Cross +.actor { + @include clearfix; + @include gradient(#FDFDFD, #EFEFEF); + @include size(auto, 50px,6px, 1px 0 1px 0); + border-bottom:1px solid #E3E3E8; + border-top:1px solid #FFF; + img { + @extend .ext-bradius-inner; + float:left; + margin-right:6px; + } + .info { + .name { + display:block; + font-size:size(15px); + width:188px; + } + .status { + color:#818181; + } + float:left; + } + .voice-actions { + float:right; + } +} + +// Audio Controls. +.voice-actions { + padding:10px 0; + text-align:right; + width:100px; + .make.speaker { + @include image-replace('icons/microphone-16x.png'); + display:inline-block; + } + .make.listener { + @include image-replace('icons/headphones-16x.png'); + display:inline-block; + } + + .voice { + &.muted { + @include image-replace('icons/mute-16x.png'); + display:inline-block; + } + &.unmuted { + @include image-replace('icons/unmute-16x.png'); + display:inline-block; + } + } + .remove { + @include image-replace('icons/cross-16x.png'); + display:inline-block; + } + a { + margin:0 5px; + opacity:0.6; + &:hover { opacity:1.0;} + } +} + + +.conference { + @include pie-clearfix(); + .panel { + @include box-shadow(1px 1px 0px #FFF inset, 1px 1px 1px #EDEDED); + background:#F7F7F7; + border:1px solid #E3E3E8; + float:left; + margin: 0 10px; + width: 303px; + &.speakers { + header { @include gradient(#FFF, #F3F3DE); } + h3 { background:transparent image-url('icons/microphone-32x.png') left top no-repeat; } + } + &.listeners { + header { @include gradient(#FFF, #DCEAF2); } + h3 { background:transparent image-url('icons/headphones-32x.png') left top no-repeat; } + } + &.log { + header { @include gradient(#FFF, #E7E7E7); } + h3 { background:transparent image-url('icons/clock-32x.png') left top no-repeat; } + } + } + .first { margin-left:0;} + .last { margin-right:0;} + header { + @include box-shadow(1px 1px 0px #FFF inset, 0px 1px 0px #FFF); + border-bottom:1px solid #E3E3E8; + padding:10px; + } + h3 { + font-size:size(24px); + font-weight:normal; + margin:0; + opacity:0.8; + padding:2px 2px 2px 43px; + } + .message { + @include gradient( #EEEEEE, #fff); + border-bottom:1px solid #E3E3E8; + padding:10px; + input { + @include input-effects; + @include size(283px, auto, 5px, 1px solid #E3E3E8 ); + color:#696969; + } + } + .actors, .messages { + height:290px; // This should be X times the amount of items + overflow:auto; + } +} + +.log { + .messages { + color:#484848; + div { + background:#FFF; + border-bottom:1px solid #E3E3E8; + border-top:1px solid #FFF; + padding:5px 10px; + } + .status { + background:#F5F5F5; + } + .name { + font-weight:bold; + } + } +}
\ No newline at end of file diff --git a/app/assets/stylesheets/app/layouts/_phone-book-entry.scss b/app/assets/stylesheets/app/layouts/_phone-book-entry.scss new file mode 100644 index 0000000..f9e2345 --- /dev/null +++ b/app/assets/stylesheets/app/layouts/_phone-book-entry.scss @@ -0,0 +1,176 @@ +// Phone Book Entry Show +// ---------------------------------------- +// Icons: http://www.iconfinder.com/search/?q=iconset%3Acc_mono_icon_set +//http://www.iconfinder.com/search/?q=iconset%3AHelveticons_Social +section.phone-book-entry { + @include clearfix; + a { + @include link-colors(#49494D, $link-color); + } + .sidebar { + @include size(220px, auto, none, 0 1px 0 0); + border-right:1px solid #E3E3E8; + float:left; + } + .content { + float:right; + width:716px; + + } + + .username { + font-size: 46px; + font-weight:normal; + margin: 0 0 10px 0; + } + .personal { + margin-top:5px; + span { + margin-right:10px; + padding-left:22px; + } + .nickname { + background:transparent image-url('icons/user-16x.png') left 1px no-repeat; + } + .birthday { + background:transparent image-url('icons/star-16x.png') left -1px no-repeat;; + } + } + + .work { + font-size: 18px; + } + + .tags { + background:transparent image-url('icons/tag-16x.png') left 0px no-repeat; + margin-top:10px; + padding-left:22px; + } + + + .activity { + & > h2 { + font-size: 27px; + font-weight: normal; + } + textarea { + border-color: #E3E3E8; + height: 15px; + padding: 12px; + width: 689px; + } + .entry { + @include clearfix; + background-position: 12px 9px; + border-bottom: 1px solid #E3E3E8; + font-size: 16px; + + padding: 12px 0px 15px 55px; + .motive { + + display: block; + float: left; + line-height: 25px; + width: 529px; + + } + .timestamp { + color: #929298; + float: right; + font-size: 12px; + line-height: 26px; + } + } + } + + + // Icons + .home { + background:transparent image-url('icons/house-32x.png') left 2px no-repeat; + } + .office { + background:transparent image-url('icons/suitcase-32x.png') left 2px no-repeat; + } + .cellphone { + background:transparent image-url('icons/phone-mobile-32x.png') left 2px no-repeat; + } + .phone { + background:transparent image-url('icons/phone-up-32x.png') left 2px no-repeat; + } + .phone-down { + background:transparent image-url('icons/phone-down-32x.png') left 2px no-repeat; + } + .fax { + background:transparent image-url('icons/fax-32x.png') left 2px no-repeat; + } + .skype { + background:transparent image-url('icons/skype-32x.png') left 2px no-repeat; + } + .twitter { + background:transparent image-url('icons/twitter-32x.png') left 2px no-repeat; + } + .voice-message { + background:transparent image-url('icons/mic-32x.png') left 2px no-repeat; + } + + + + .comment { + @include clearfix; + border-bottom:1px solid #E3E3E8; + padding: 11px; + .display { + float:left; + overflow:hidden; + } + .info { + margin-bottom:4px; + } + .info,.body { + padding-left:47px; + } + .commenter { + font-size: 17px; + font-weight: bold; + } + .time { + color:#929298; + } + .info { + display:block; + } + } + + + .display { + @include border-radius(10px 0 10px 0); + } + .description { + margin:10px 0; + } + .widget { + border-top:1px solid #E3E3E8; + padding:23px 0; + width:200px; // Width of the image + div { + margin:10px 0; + padding-left:51px; + a { + color:#4B4B4B; + display:block; + font-size:size(17px); + font-weight:bold; + } + span { + color:#E3E3E8; + font-size:size(12px); + } + } + + &.adresses { + strong { + display:block; + } + } + } +}
\ No newline at end of file diff --git a/app/assets/stylesheets/app/pages/_phone_book.scss b/app/assets/stylesheets/app/pages/_phone_book.scss new file mode 100644 index 0000000..3670e8e --- /dev/null +++ b/app/assets/stylesheets/app/pages/_phone_book.scss @@ -0,0 +1,25 @@ +header.tabular-nav { @extend .ext-bradius-t; } +footer.tabular-nav { @extend .ext-bradius-b; } + +.tabular-nav { + @include clearfix; + line-height: 41px; + padding: 0 14px; + @include gradient(#69ABFB, #75AAEC); + .pagination { + float:right; + } + nav { + float:left; + margin-top: 1px; + @include size(395px, auto); + ol { + @include inline-list; + a { + font-weight:bold; + color:#fff; + font-size: 14px; + } + } + } +}
\ No newline at end of file diff --git a/app/assets/stylesheets/app/shared/_contents.scss b/app/assets/stylesheets/app/shared/_contents.scss new file mode 100644 index 0000000..8f88802 --- /dev/null +++ b/app/assets/stylesheets/app/shared/_contents.scss @@ -0,0 +1,374 @@ +// Contents +// ----------------------------------------´ + +// Wrap Everything +#container { + margin:0 auto; + width:$site-total-width; +} + +// Global Layout. +#content { + @extend .ext-bradius; + @include gradient(#fff, #FAF9FA); + border:1px solid #C0C0CA; + .light { + @extend .ext-bradius; + border:1px solid #ECECEF; + padding:20px; + } +} + + +// Content Header Object +// ---------------------------------------- + +.breadcrumbs { + color:$border-dark-color; + font-size:size(12px); + margin-bottom: 5px; + a { + @include link-colors(#8A8A91, $link-hover-color, #8A8A91, #8A8A91); + } +} + +header.main { + border-bottom:1px solid $border-dark-color; + margin-bottom:20px; + h1,h2 { + color:#49494D; + margin-top:0px; + } +} + + +// Flash Notice Object +// ---------------------------------------- +.flash { + @extend .ext-bradius; + @include box-shadow(0px 1px 2px darken(#F0F0F3, 20%)); + font-weight:bold; + margin-bottom:$vertical-margin; + position:relative; + .sign { + $sign-height: 26px; + @include pos-y-center($sign-height); + font-family:Georgia; + font-size:23px; + height:$sign-height; + } + .light { + @extend .ext-texture; + background-position:left bottom; + padding:15px 21px; + } + .message { + line-height:18px; + padding-left:26px; + } + + &.notice, &.flash { + @include text-shadow(1px 1px 1px #EDF3FA); + background:#CCE4FF; + color:#37547B; + } + + &.warning, &.alert { + $border-bottom: #EE9C00; + $border-light:#EDCC37; + @include text-shadow(1px 1px 1px #FEF6D7); + background:#FFE070; + border:{ + bottom:1px solid $border-bottom; + top:1px solid lighten(saturate($border-light, 5%), 9%); + }; + color:#7A2300; + } +} + + +// Scaffolding Tables +// ---------------------------------------- +table { + th { + color: #6A747B; + font-size: 14px; + font-weight: bold; + padding: 10px 8px; + } + .odd { + background:#F4F6FB; + border-bottom:1px solid #EDEFF8; + } + td { + padding:8px; + } +} + + +// Pagination Object +// ---------------------------------------- +.pagination { @include pagination(); } + + +// Entries Object. +// ---------------------------------------- +header.entries-nav { @extend .ext-bradius-inner-t; } +footer.entries-nav { @extend .ext-bradius-inner-b; } + +.entries-nav { + @include box-shadow( + inset 0px 1px 0px #aad2ff, // Light Top + 0 -1px 0px #A3C9E7, // Shadow Top + inset 0 -1px 2px #518CBC // Shadow Bottom + ); + @include clearfix; + @include gradient(#69ABFB, #75AAEC); + line-height: 41px; + padding: 0 14px; + nav { + color:#5490C3; + float:left; + margin-top: 1px; + width:540px; + } + // ABC + ol { + @include inline-list; + a { + @include link-colors(#fff, #FFFFC2); + @include text-shadow(0 2px 0px #5D96CC); + font-size: 14px; + font-weight:bold; + padding:0 3px; + } + } + .pagination { + float:right; + } +} + + +// Phone Book Entry +// ---------------------------------------- + +// Title Extension +.ext-pbe-big { display:block; font-size:size(18px); font-weight:bold; } + +.phone-book-entries { + table { margin:0;} +} +// Listing Version +tr.phone-book-entry { + @include clearfix; + color:#7F7F7F; + td { + vertical-align:middle; + } + &.odd { + background:#F4F6FB; + border-bottom:1px solid #EDEFF8; + } + img { + opacity:0.8; + } + // All Link colors + a { + @include link-colors(#577DA2, $link-color); + } + .name { + @extend .ext-pbe-big; + } + .company { + font-size:size(16px); + } + .user { + @include size(34%); + } + .phone { + @extend .ext-pbe-big; + } + .contact { + @include size(28%); + } + .extra { + @include size(38%); + } +} + +// Call History Entry +// ---------------------------------------- + +.call-history-entries { + table { margin:0;} +} + +// Listing Version +tr.call-history-entry { + @include clearfix; + color:#7F7F7F; + td { + vertical-align:middle; + } + &.odd { + background:#F4F6FB; + border-bottom:1px solid #EDEFF8; + } + img { + opacity:0.8; + } + // All Link colors + a { + @include link-colors(#577DA2, $link-color); + } + .select_box { + @include size(2%); + } + .thumbnail { + @include size(5%); + } + .time { + @include size(15%); + } + .user { + @include size(45%); + } + .status { + @include size(15%); + } + .actions { + @include size(5%); + } + .name { + @extend .ext-pbe-big; + } + .phone { + @extend .ext-pbe-big; + } + .call-forwarded { + background:transparent image-url('icons/gs_forward_16x.png') no-repeat; + padding-left: 20px; + } + .call-placed { + background:transparent image-url('icons/gs_placed_16x.png') no-repeat; + padding-left: 20px; + } + .call-received { + background:transparent image-url('icons/gs_received_16x.png') no-repeat; + padding-left: 20px; + } + .call-missed { + background:transparent image-url('icons/gs_missed_16x.png') no-repeat; + padding-left: 20px; + } + .voicemail { + background:transparent image-url('icons/gs_envelope_16x.png') no-repeat; + padding-left: 20px; + } + .duration { + @extend .ext-pbe-big; + } +} + +// Voicemail Messages Entry +// ---------------------------------------- + +.voicemail-messages-entries { + table { margin:0;} +} + +// Listing Version +tr.voicemail-messages-entry { + @include clearfix; + color:#7F7F7F; + td { + vertical-align:middle; + } + &.odd { + background:#F4F6FB; + border-bottom:1px solid #EDEFF8; + } + img { + opacity:0.8; + } + // All Link colors + a { + @include link-colors(#577DA2, $link-color); + } + .select_box { + @include size(2%); + } + .time { + @include size(15%); + } + .folder { + @include size(10%); + } + .user { + @include size(40%); + } + .status { + @include size(5%); + } + .actions { + @include size(5%); + } + .name { + @extend .ext-pbe-big; + } + .phone { + @extend .ext-pbe-big; + } + .voicemail-received { + background:transparent image-url('icons/gs_received_16x.png') no-repeat; + padding-left: 20px; + } + .voicemail-read { + background:transparent image-url('icons/gs_envelope_16x.png') no-repeat; + padding-left: 20px; + } + .duration { + @extend .ext-pbe-big; + } +} + + +// users#show +// ---------------------------------------- +#user-show { + @include clearfix; + .display { + float:left; + } + aside { + float:left; + padding-top:5px; + width: 250px; + p { + margin-left:70+26px; + } + } + section { + float:right; + width:650px; + h2:first-child { + margin-top:0; + } + } +} + + +// Simple Form Error Messgaes +// ----------------------------------------´ +p.error_notification { + @include gradient(mix(#EB6565, #994F5D, 60%), #994F5D); + border: 1px solid #7B404A; + border-radius: 4px; + box-shadow: inset 1px 1px 0px darken(#f3a0a0, 10%),inset -1px -1px 0px darken(#eb6565, 3%); + color:#FFF; + font-weight: bold; + margin: 0 0 0 158px; + padding: 10px 15px; + text-shadow: 2px 2px 1px #82434E; + width: 282px; +}
\ No newline at end of file diff --git a/app/assets/stylesheets/app/shared/_footers.scss b/app/assets/stylesheets/app/shared/_footers.scss new file mode 100644 index 0000000..be0f54f --- /dev/null +++ b/app/assets/stylesheets/app/shared/_footers.scss @@ -0,0 +1,90 @@ +// Footers +// ---------------------------------------- + +//@include sticky-footer(54px, "#container", "#footer-spacing", "footer"); + +footer#main { + @include clearfix; + position:relative; + margin:$vertical-margin 0; + @include gradient(#fff, #FAF9FA); + border:1px solid #C0C0CA; + @extend .ext-bradius; + .light { + padding:10px 20px; + border:1px solid #ECECEF; + @extend .ext-bradius; + } + + ul { + @include clearfix; + list-style:none; + float:left; + margin:0; + li { + float:left; + margin-bottom: 0px; + } + a { + @include debug; + line-height:43px; + padding: 10px 20px; + border:{ + left:1px solid $border-dark-color; + }; + } + li:first-child a{ + border-left:none; + } +// @include horizontal-navigation( +// /*$height : */ 32px, +// /*$color : */ red, +// /*$hover-color : */ red, +// /*$active-color : */ red, +// /*$text-shadow : */ #530008, +// /*$bg : */ none, +// /*$bg-hover : */ none, +// /*$bg-active : */ none, +// /*$box-shadow : */ none, +// /*$box-shadow-hover : */ none, +// /*$box-shadow-active : */ none, +// /*$border-light : */ #E3E3E8, +// /*$border-shadow : */ lighten(#E3E3E8,5%), +// /*$padding : */ 0 10px, +// /*$margin : */ none, +// /*\border-radius : */ none, +// /*$font-weight : */ none, +// /*$font-size : */ 14px, +// /*$tab-space : */ none +// ); + } + +} + +.amooma-logo { + background:#FAF9FA; + @include debug; + float:right; + padding:7px 7px 7px 16px; + @include border-radius(0 $global-border-radius $global-border-radius 0); + border-left:1px solid $border-dark-color; + @include box-shadow(-1px -1px 1px #FFFFFF); + a { + @include image-replace('amooma-logo.png'); + float:right; + opacity:0.6; + margin: 5px 5px 0 0; + &:hover { + opacity:1; + } + } + span { + @include debug; + font-size:11px; + color:#74748B; + float:left; + line-height:30px; + margin-right:10px; + } + +}
\ No newline at end of file diff --git a/app/assets/stylesheets/app/shared/_handheld.scss b/app/assets/stylesheets/app/shared/_handheld.scss new file mode 100644 index 0000000..1efc5e9 --- /dev/null +++ b/app/assets/stylesheets/app/shared/_handheld.scss @@ -0,0 +1,25 @@ +// +// Media queries for responsive design. +// +// These follow after primary styles so they will successfully override. +// + +@media all and (orientation:portrait) { + // Style adjustments for portrait mode goes here + +} + +@media all and (orientation:landscape) { + // Style adjustments for landscape mode goes here + +} + +// Grade-A Mobile Browsers (Opera Mobile, Mobile Safari, Android Chrome) +// consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ +@media screen and (max-device-width: 480px) { + + + // Uncomment if you don't want iOS and WinMobile to mobile-optimize the text for you: j.mp/textsizeadjust + // html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } +} + diff --git a/app/assets/stylesheets/app/shared/_headers.scss b/app/assets/stylesheets/app/shared/_headers.scss new file mode 100644 index 0000000..6f8f0fe --- /dev/null +++ b/app/assets/stylesheets/app/shared/_headers.scss @@ -0,0 +1,145 @@ +// Headers +// ---------------------------------------- + +// -- File Variables ---------------------- + +$border-light:#74B8EA; +$background: #F0F0F3; +$user-context-width:227px; + + +// ---------------------------------------- + +.ext-texture { + background:transparent image-url('gradients/white-texture-x63.png') left top repeat-x; +} + +.ext-header { + max-width:$site-total-width - 2px; // Minus the borders + height:63px; + @extend .ext-bradius; +} + + +// Header Object +// ---------------------------------------- + +header#main { + @extend .ext-header; + background:$background image-url('gradients/light-to-dark-blue-x63.png') left top repeat-x; + margin:$vertical-margin 0; + border:1px solid $border-light; + border-bottom:1px solid #518CBC; + border-top:1px solid lighten(saturate($border-light, 5%), 9%); + @include box-shadow(0px 1px 2px darken(#F0F0F3, 20%)); + position:relative; + overflow:hidden; + .light { + @extend .ext-header; + @extend .ext-texture; + height:62px; + border-bottom:1px solid $border-light; + + // Used as a spacer for the width + padding:0 $user-context-width 0 0; + } + + // Resizable Navigation Items. + span { + @include debug; + float:left; + margin-left:15px; + font-size:size(17px); + line-height:62px; + display:inline; + float:left; + margin-right:7px; + } + + .message { + margin-left:206px; + } + + a { + @include text-shadow(1px 1px 0px darken(#518CBC, 12%)); + color:#fff; + &:active, &:hover { + color:#FFFF70; + text-decoration:none; + } + } +} + +// User Context Object +// ---------------------------------------- + +.user-context { + @include pos(0 10px); + @include size(200px); + padding-left:12px; + text-align:center; + font-size:size(17px); + line-height:62px; + color:#DDDDDD; + border-left:1px solid $border-light; + @include box-shadow(-1px -1px 0px #3A91DE); + // Logged out version of this little guy. + .display { + @extend .ext-bradius-inner; + @include box-shadow(0 -1px 0px #518CBC, 0 1px 0 #74B8EA); + vertical-align: middle; + margin: -2px 7px 0 0; + } + .logged-out { + @include box-shadow(none); + } + .user { + width: 170px; + display: block; + text-align:left; + } + .logout { + display: block; + position: absolute; + top: 0; + right: 0; + } +} + + +// Logo Object +// ---------------------------------------- + +.gemeinschaft-logo { + @include logo('logo.png'); + @include pos(2px 0 0 10px); + @include debug; +} + + +// Search Box Object +// ---------------------------------------- + +.search-box { + @extend .ext-bradius-inner; + float: left; + margin-left: 200px; + margin-top: 18px; + border-bottom: 1px solid #74B7EB; + position: relative; + input.text { + z-index: 0; + @extend .ext-bradius-inner; + background: #fff image-url('gradients/white-gray-x29-reverse.png') left top repeat-x; + line-height: 25px; + height: 25px; + border: 1px solid #3472B2; + @include size(160px, 25px, 0 23px 0 12px); + } + input[type="submit"] { + @include pos(5px 6px 0 0); + @include image-replace('icons/search-13x16.png'); + border:0; + } +} + diff --git a/app/assets/stylesheets/app/shared/_ie.scss b/app/assets/stylesheets/app/shared/_ie.scss new file mode 100644 index 0000000..afbe7e4 --- /dev/null +++ b/app/assets/stylesheets/app/shared/_ie.scss @@ -0,0 +1,7 @@ +// Internet Explorer Hate File. +// ---------------------------------------- +// Here you'll find all css which it's focused at a specific browser. +@if in-compatibility-mode() { + .ie7 {} + .ie8 {} +}
\ No newline at end of file diff --git a/app/assets/stylesheets/app/shared/_media.scss b/app/assets/stylesheets/app/shared/_media.scss new file mode 100644 index 0000000..c528a1f --- /dev/null +++ b/app/assets/stylesheets/app/shared/_media.scss @@ -0,0 +1,16 @@ +// Survival ✚ Kit +// Normalize.css + +//PLACEHOLDER Media Queries for Responsive Design. +//These override the primary ('mobile first') styles +//Modify as content requires. + +@media only screen and (min-width: 480px) { + /* Style adjustments for viewports 480px and over go here */ + +} + +@media only screen and (min-width: 768px) { + /* Style adjustments for viewports 768px and over go here */ + +}
\ No newline at end of file diff --git a/app/assets/stylesheets/app/shared/_print.scss b/app/assets/stylesheets/app/shared/_print.scss new file mode 100644 index 0000000..c8594e4 --- /dev/null +++ b/app/assets/stylesheets/app/shared/_print.scss @@ -0,0 +1,17 @@ +// Survival ✚ Kit +// Normalize.css + +@media print { + * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */ + a, a:visited { text-decoration: underline; } + a[href]:after { content: " (" attr(href) ")"; } + abbr[title]:after { content: " (" attr(title) ")"; } + .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */ + pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } + thead { display: table-header-group; } /* h5bp.com/t */ + tr, img { page-break-inside: avoid; } + img { max-width: 100% !important; } + @page { margin: 0.5cm; } + p, h2, h3 { orphans: 3; widows: 3; } + h2, h3 { page-break-after: avoid; } +}
\ No newline at end of file diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss new file mode 100644 index 0000000..32e54f4 --- /dev/null +++ b/app/assets/stylesheets/application.css.scss @@ -0,0 +1,117 @@ +// Survival ✚ Kit [ Bootstrapper File ] + +// Dependencies +// ---------------------------------------- +@import "vendor/survival-kit/secure"; +@import "compass"; +@import "vendor/boilerplate-1.0/reset"; +@import "vendor/survival-kit/loader"; +@import "vendor/fancy-buttons/fancy-buttons"; + + +// Project Variables +// ---------------------------------------- +// Use @include debug; to show a color overlay on the element when this is set to true. +$debug : false; +// Typography +$base-font-family : "Helvetica Neue", Arial, Helvetica, sans-serif; +$base-font-size : 13px; +$base-line-height : 1.231; +$font-color : #222; +$link-color : #00e; +$link-hover-color : #06e; +$link-visited-color : #551a8b; +// ETC +$hr-color : #ccc; +// Selection +$selected-font-color : #fff; +$selected-background-color : #0084AC; +// Lists +$list-margin : 1em 0; +$list-padding : 0 0 0 2em; +// Container Width +$container-width : 1000px; +// Use @if in-compatibility-mode() to add conditional CSS (useful for mixins). +$compatibility-mode : true, ie7 ie8 ie9 ff2 chrome9; + +// -- Project Variables Overrides --------- + +$site-total-width : 1000px; +$vertical-margin : 15px; +$global-border-radius : 8px; +$global-inner-border-radius : 6px; + + +// -- Colors ------------------------------ +$link-color:#388DDA; +$border-dark-color: #E3E3E8; + +// Hooks +// ---------------------------------------- +// Mixins that are called from the Library files to add some extra styling. + +@mixin sk-html() { } + +@mixin sk-body() { + background:#F0F3F3 image-url('bg-body.png') left top repeat; +} + +// h1, h2, h3, h4, h5, h6 +@mixin sk-header-tags() { + font-weight:bold; +} + + +// Global Styling +// ---------------------------------------- +// Calculate all H# Tags. +@include htags-sizes($base-font-size + 20); +@include simple-forms(auto, block-hints no-stars ); +ul { + ul { + margin:0; + } +} + +// Global Classes for extension. +// ---------------------------------------- +// Here you place classes which are used as extensions across all the project. +// Prefix them with .ext- + + +// The default fancy button, used across the SK. +// @TODO: Turn this into a mixin @include sk-button(small/medium/big); +.sk-button, .button { + @include fancy-button(#1E81D5); +} +a.button { margin:10px 0;} + +// Border Radius +// ---------------------------------------- +.ext-bradius { @include border-radius($global-border-radius); } +.ext-bradius-inner-t { @include border-radius($global-inner-border-radius $global-inner-border-radius 0 0); } +.ext-bradius-inner-b { @include border-radius(0 0 $global-inner-border-radius $global-inner-border-radius); } +.ext-bradius-inner { @include border-radius($global-inner-border-radius); } + + +// The Partials +// ---------------------------------------- +// Base styles thanks to html5boilerplate. This one uses the Hooks defined before. +@import "vendor/boilerplate-1.0/styles"; + +// -- Shared Partials + // Headers and related material go here. + @import "app/shared/headers"; + // Footers and related material go here. + @import "app/shared/footers"; + // Content and Related Material go here. + @import "app/shared/contents"; + +// -- Layouts Partials + // The most general one goes first + @import "app/layouts/app"; + @import "app/layouts/phone-book-entry"; + @import "app/layouts/conference"; + + // Compatibility.. oh jeez. + @import "app/shared/ie";
\ No newline at end of file diff --git a/app/assets/stylesheets/scaffolds.css.scss b/app/assets/stylesheets/scaffolds.css.scss new file mode 100644 index 0000000..05188f0 --- /dev/null +++ b/app/assets/stylesheets/scaffolds.css.scss @@ -0,0 +1,56 @@ +body { + background-color: #fff; + color: #333; + font-family: verdana, arial, helvetica, sans-serif; + font-size: 13px; + line-height: 18px; } + +p, ol, ul, td { + font-family: verdana, arial, helvetica, sans-serif; + font-size: 13px; + line-height: 18px; } + +pre { + background-color: #eee; + padding: 10px; + font-size: 11px; } + +a { + color: #000; + &:visited { + color: #666; } + &:hover { + color: #fff; + background-color: #000; } } + +div { + &.field, &.actions { + margin-bottom: 10px; } } + +#notice { + color: green; } + +.field_with_errors { + padding: 2px; + background-color: red; + display: table; } + +#error_explanation { + width: 450px; + border: 2px solid red; + padding: 7px; + padding-bottom: 0; + margin-bottom: 20px; + background-color: #f0f0f0; + h2 { + text-align: left; + font-weight: bold; + padding: 5px 5px 5px 15px; + font-size: 12px; + margin: -7px; + margin-bottom: 0px; + background-color: #c00; + color: #fff; } + ul li { + font-size: 12px; + list-style: square; } } diff --git a/app/assets/stylesheets/vendor/README b/app/assets/stylesheets/vendor/README new file mode 100644 index 0000000..016b5fa --- /dev/null +++ b/app/assets/stylesheets/vendor/README @@ -0,0 +1 @@ +Here you should place the files that are not part of your project, but you use them at some point.
\ No newline at end of file diff --git a/app/assets/stylesheets/vendor/boilerplate-1.0/README b/app/assets/stylesheets/vendor/boilerplate-1.0/README new file mode 100644 index 0000000..a5aa5b1 --- /dev/null +++ b/app/assets/stylesheets/vendor/boilerplate-1.0/README @@ -0,0 +1,15 @@ +HTML5 ✰ Boilerplate (ac92ae7a) + +style.css contains a reset, font normalization and some base styles. + +Credit is left where credit is due. +Much inspiration was taken from these projects: +- yui.yahooapis.com/2.8.1/build/base/base.css +- camendesign.com/design/ +- praegnanz.de/weblog/htmlcssjs-kickstart + +Implementation to Compass as part of Survival Kit by Mario "Kuroir" Ricalde. + +Notes: + + Not implementing Non-semantic helper classes. Use Compass builts-in.
\ No newline at end of file diff --git a/app/assets/stylesheets/vendor/boilerplate-1.0/_reset.scss b/app/assets/stylesheets/vendor/boilerplate-1.0/_reset.scss new file mode 100644 index 0000000..efd1ac6 --- /dev/null +++ b/app/assets/stylesheets/vendor/boilerplate-1.0/_reset.scss @@ -0,0 +1,37 @@ +// html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline) +// v1.6.1 2010-09-17 | Authors: Eric Meyer & Richard Clark +// html5doctor.com/html-5-reset-stylesheet/ +html, body, div, span, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, +small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, figcaption, figure, +footer, header, hgroup, menu, nav, section, summary, +time, mark, audio, video{ + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} + +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} + +blockquote, q { quotes: none; } + +blockquote:before, blockquote:after, +q:before, q:after { content: ""; content: none; } + +del { text-decoration: line-through; } + +abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; } + +table { border-collapse: collapse; border-spacing: 0; } + +input, select { vertical-align: middle; } diff --git a/app/assets/stylesheets/vendor/boilerplate-1.0/_styles.scss b/app/assets/stylesheets/vendor/boilerplate-1.0/_styles.scss new file mode 100644 index 0000000..3852329 --- /dev/null +++ b/app/assets/stylesheets/vendor/boilerplate-1.0/_styles.scss @@ -0,0 +1,171 @@ +// HTML5 ✰ Boilerplate +// +// style.css contains a reset, font normalization and some base styles. +// +// Credit is left where credit is due. +// Much inspiration was taken from these projects: +// - yui.yahooapis.com/2.8.1/build/base/base.css +// - camendesign.com/design/ +// - praegnanz.de/weblog/htmlcssjs-kickstart +// +// Modified to fit Survival ✚ Kit + + html { + @include sk-html; + overflow-y: scroll; + } + + +// Sections (body, section, nav, article, aside, h1..6, header, footer, address) +// ---------------------------------------- + + body, select, input, textarea { color: $font-color; font-family: $base-font-family; } + + body { @include sk-body; font-size: $base-font-size; line-height: $base-line-height; } + + +// Grouping Content (p, hr, pre, blockquote, ol, ul, li, dl, dt, dt, dd, figure, figcaption, div) +// ---------------------------------------- + + p { margin: 0 0 1em 0;} + li { margin-bottom: (1em / 2);} + + hr { border: 0; border-top: 1px solid $hr-color; display: block; height: 1px; margin: 1em 0; padding: 0; } + + blockquote { color: #666; font-style: italic; margin: 1.5em; } + + // normalize monospace sizing + // meyerweb.com/eric/thoughts/2010/02/12/fixed-monospace-sizing/ + // en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome + pre { + // www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/ + white-space: pre; white-space: pre-wrap; word-wrap: break-word; + padding: 15px; + } + + pre, code, kbd, samp { font-family: monospace, sans-serif; } + + // Lists + ul, ol { margin:$list-margin; padding:$list-padding;} + + ol { list-style-type: decimal; } + + // Remove margin from navigation lists. + nav ul, + nav li { list-style:none; list-style-image: none; margin: 0; } + + // Lists + dl { margin: 0 0 1.5em 0; } + + dl dt { font-weight: bold; } + + dd { margin-left: 1.5em;} + + +// Text Level Semantics (a, em, strong, small, s, cite, q, dfn, abbr, time, code, var, samp, kbd, sub, i, b, u, mark, ruby, rt, rp, bdi, bdo, span, br, wbr) +// ---------------------------------------- + + // Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test + a {text-decoration:none;} + + a:hover, a:active { outline: none; text-decoration:underline;} + + a, a:active, a:visited { color: $link-color; } + + a:hover { color: $link-hover-color; } + + // Headers (h1, h2, etc) have no default font-size or margin; define those yourself + h1, h2, h3, h4, h5, h6 { @include sk-header-tags; } + + // j.mp/webkit-tap-highlight-color + a:link { -webkit-tap-highlight-color: #FF5E99; } + + small { font-size: 85%; } + + strong, b, th, dfn { font-weight: bold; } + + em, i { font-style:italic; } + + mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; } + + abbr, + acronym { border-bottom: 1px dotted #666; } + + address { font-style: italic; margin: 0 0 1.5em; } + + // Set sub, sup without affecting line-height: gist.github.com/413930 + sub, sup { font-size: 75%; line-height: 0; position: relative; } + + sup { top: -0.5em; } + + sub { bottom: -0.25em; } + + +// Embedded Content (img) +// ---------------------------------------- + + // Bicubic resizing for non-native sized IMG: + // code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ + .ie7 img { -ms-interpolation-mode: bicubic; } + + +// Tabular Data (table, caption, colgroup, col, tbody, thead, tfoot, tr, td, th) +// ---------------------------------------- + + table { margin-bottom: 1.4em; width:100%; } + + th { font-weight: bold; } + + th,td,caption { padding: 4px 10px 4px 5px; text-align: left; } + + +// Edits (ins, del) +// ---------------------------------------- + + ins { background-color: #ff9; color: #000; text-decoration: none; } + + del { color:#666; } + + +// Forms +// ---------------------------------------- + + select, input, textarea, button { font: 99% $base-font-family; outline:none;} + + td { vertical-align: top; } + + textarea { overflow: auto; } + + // Align checkboxes, radios, text inputs with their label by: Thierry Koblentz tjkdesign.com/ez-css/css/base.css + input[type="radio"] { vertical-align: text-bottom; } + + input[type="checkbox"] { vertical-align: bottom; } + + // Hand cursor on clickable input elements + + label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; } + + // Webkit browsers add a 2px margin outside the chrome of form elements + button, input, select, textarea { margin: 0; } + + + // required:valid and required:invalid moved to form.scss + + // Make buttons play nice in IE: + // www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ + button { overflow: visible; width: auto; } + + @if in-compatibility-mode() { + .ie7 input[type="checkbox"] { vertical-align: baseline; } + + .ie6 input { vertical-align: text-bottom; } + + .ie6 legend, .ie7 legend { margin-left: -7px; } + } + + +// Etc. +// ---------------------------------------- + + ::-moz-selection{ background: $selected-background-color; color:$selected-font-color; text-shadow: none; } + ::selection { background:$selected-background-color; color:$selected-font-color; text-shadow: none; } diff --git a/app/assets/stylesheets/vendor/boilerplate-2.0/README b/app/assets/stylesheets/vendor/boilerplate-2.0/README new file mode 100644 index 0000000..c9cd066 --- /dev/null +++ b/app/assets/stylesheets/vendor/boilerplate-2.0/README @@ -0,0 +1,16 @@ +HTML5 ✰ Boilerplate 2.0 (7467f9c0417a0c1f9863e2d000aad73f34836ef2) + +style.css contains a reset, font normalization and some base styles. + +Credit is left where credit is due. +Much inspiration was taken from these projects: +- yui.yahooapis.com/2.8.1/build/base/base.css +- camendesign.com/design/ +- praegnanz.de/weblog/htmlcssjs-kickstart + +Implementation to Compass as part of Survival Kit by Mario "Kuroir" Ricalde. + +Notes: + + - Not implementing Non-semantic helper classes. Use Compass builts-in. + - 1.0 and 2.0 are very similar. With 2.0 you save a couple of bytes.. maybe not worth the change?
\ No newline at end of file diff --git a/app/assets/stylesheets/vendor/boilerplate-2.0/_styles.scss b/app/assets/stylesheets/vendor/boilerplate-2.0/_styles.scss new file mode 100644 index 0000000..6268a35 --- /dev/null +++ b/app/assets/stylesheets/vendor/boilerplate-2.0/_styles.scss @@ -0,0 +1,209 @@ +// +// HTML5 ✰ Boilerplate +// +// What follows is the result of much research on cross-browser styling. +// Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, +// Kroc Camen, and the H5BP dev community and team. +// +// Detailed information about this CSS: h5bp.com/css +// +// ==|== normalize ========================================================== +// + + +// ========================================================================== +// HTML5 display definitions +// ========================================================================== + +article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; } +audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } +audio:not([controls]) { display: none; } +[hidden] { display: none; } + +// ========================================================================== +// Base +// ========================================================================== + +// +// 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units +// 2. Force vertical scrollbar in non-IE +// 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g +// + +html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } + +body { margin: 0; font-size: $base-font-size; line-height: $base-line-height; } + +body, button, input, select, textarea { font-family: $base-font-family; color: $font-color; } + +// +// Remove text-shadow in selection highlight: h5bp.com/i +// These selection declarations have to be separate +// Also: hot pink! (or customize the background color to match your design) +// + +::-moz-selection { background: $selected-background-color; color: $selected-font-color; text-shadow: none; } +::selection { background: $selected-background-color; color: $selected-font-color; text-shadow: none; } + + +// ========================================================================== +// Links +// ========================================================================== + +a { color: $link-color; } +a:visited { color: $link-visited-color; } +a:hover { color: $link-hover-color; } +a:focus { outline: thin dotted; } + +/* Improve readability when focused and hovered in all browsers: h5bp.com/h */ +a:hover, a:active { outline: 0; } + + +// ========================================================================== +// Typography +// ========================================================================== + +abbr[title] { border-bottom: 1px dotted; } + +b, strong { font-weight: bold; } + +i, em { font-style:italic;} + +blockquote { margin: 1em 40px; } + +dfn { font-style: italic; } + +hr { display: block; height: 1px; border: 0; border-top: 1px solid $hr-color; margin: 1em 0; padding: 0; } + +ins { background: #ff9; color: #000; text-decoration: none; } + +mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; } + +// Redeclare monospace font family: h5bp.com/j +pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; } + +// Improve readability of pre-formatted text in all browsers +pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } + +q { quotes: none; } +q:before, q:after { content: ""; content: none; } + +small { font-size: 85%; } + +// Position subscript and superscript content without affecting line-height: h5bp.com/k +sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } +sup { top: -0.5em; } +sub { bottom: -0.25em; } + + +// ========================================================================== +// Lists +// ========================================================================== +dl {margin:$list-margin;} +ul, ol { margin: $list-margin; padding: $list-padding; } +dd { margin: 0 0 0 40px; } +nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; } + + +// ========================================================================== +// Embedded content +// ========================================================================== + +// +// 1. Improve image quality when scaled in IE7: h5bp.com/d +// 2. Remove the gap between images and borders on image containers: h5bp.com/e +// + +img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; } + +// +// Correct overflow not hidden in IE9 +// + +svg:not(:root) { overflow: hidden; } + + +// ========================================================================== +// Figures +// ========================================================================== + +figure { margin: 0; } + + +// ========================================================================== +// Forms +// ========================================================================== + +form { margin: 0; } +fieldset { border: 0; margin: 0; padding: 0; } + +// Indicate that 'label' will shift focus to the associated form element +label { cursor: pointer; } + +// +// 1. Correct color not inheriting in IE6/7/8/9 +// 2. Correct alignment displayed oddly in IE6/7 +// + +legend { border: 0; *margin-left: -7px; padding: 0; } + +// +// 1. Correct font-size not inheriting in all browsers +// 2. Remove margins in FF3/4 S5 Chrome +// 3. Define consistent vertical alignment display in all browsers +// + +button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; } + +// +// 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet) +// 2. Correct inner spacing displayed oddly in IE6/7 +// + +button, input { line-height: normal; *overflow: visible; } + +// +// Reintroduce inner spacing in 'table' to avoid overlap and whitespace issues in IE6/7 +// + +table button, table input { *overflow: auto; } + +// +// 1. Display hand cursor for clickable form elements +// 2. Allow styling of clickable form elements in iOS +// + +button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; } + +// +// Consistent box sizing and appearance +// + +input[type="checkbox"], input[type="radio"] { box-sizing: border-box; } +input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } +input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } + +// +// Remove inner padding and border in FF3/4: h5bp.com/l +// + +button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } + +// +// 1. Remove default vertical scrollbar in IE6/7/8/9 +// 2. Allow only vertical resizing +// + +textarea { overflow: auto; vertical-align: top; resize: vertical; } + +// Colors for form validity +input:valid, textarea:valid { } +input:invalid, textarea:invalid { background-color: #f0dddd; } + + +// ========================================================================== +// Tables +// ========================================================================== + +table { border-collapse: collapse; border-spacing: 0; } +td { vertical-align: top; }
\ No newline at end of file diff --git a/app/assets/stylesheets/vendor/easy-slider/_numeric.scss b/app/assets/stylesheets/vendor/easy-slider/_numeric.scss new file mode 100644 index 0000000..db61e78 --- /dev/null +++ b/app/assets/stylesheets/vendor/easy-slider/_numeric.scss @@ -0,0 +1,44 @@ +// +// @TODO: Add docs to easy-slider-numeric! +// +@mixin easy-slider-numeric($width, $height, $selector:'#slider') { + #{$selector} { + & ul, & li { + margin:0; + padding:0; + list-style:none; + } + & li { + width:$width; + height:$height; + overflow:hidden; + } + } + @include _numeric-controls(); +} + +// You can override this function to alter the appearance of the numeric controls. +@mixin _numeric-controls() { + #controls{ + margin:10px 0; + line-height:28px; + list-style:none; + text-align:right; + li { + @include inline-block; + margin:0 0 0 10px; + } + .current a { + background:#FFFFFF; + color:#C80111; + @include box-shadow(0px 0px 3px #B2B2B2); + padding:6px 11px; // Simulate "hover" + } + a { + padding:5px 10px; + background:#F5F5F5; + border: 1px solid #AEAEAE; + color: #7F7F7F; + } + } +}
\ No newline at end of file diff --git a/app/assets/stylesheets/vendor/facebox/_facebox.scss b/app/assets/stylesheets/vendor/facebox/_facebox.scss new file mode 100644 index 0000000..53e612d --- /dev/null +++ b/app/assets/stylesheets/vendor/facebox/_facebox.scss @@ -0,0 +1,85 @@ +$facebox-overlay: #000 !default; +#facebox { + left: 0; + position: fixed; + text-align: left; + top: 0; + z-index: 100; +} + + +#facebox .popup{ + border:9px solid rgba(0, 157, 214, 0.8); + border-radius:5px; + -moz-border-radius:5px; + -webkit-border-radius:5px; + box-shadow:0 0 18px rgba(0,0,0,0.4); + -moz-box-shadow:0 0 18px rgba(0,0,0,0.4); + -webkit-box-shadow:0 0 18px rgba(0,0,0,0.4); + position:relative; +} + +#facebox .content { + background: #fff; + border-radius:4px; + -moz-border-radius:4px; + -webkit-border-radius:4px; + display:table; + min-width: 370px; + padding: 10px; +} + +#facebox .content > p:first-child{ + margin-top:0; +} +#facebox .content > p:last-child{ + margin-bottom:0; +} + +#facebox .close{ + padding:2px; + position:absolute; + right:5px; + top:5px; + z-index:101; +} +#facebox .close img{ + opacity:0.3; +} +#facebox .close:hover img{ + opacity:1.0; +} + +#facebox .loading { + text-align: center; +} + +#facebox .image { + text-align: center; +} + +#facebox img { + border: 0; + margin: 0; +} + +#facebox_overlay { + height:100%; + left: 0px; + position: fixed; + top: 0px; + width:100%; +} + +.facebox_hide { + z-index:-100; +} + +.facebox_overlayBG { + background-color: $facebox-overlay; + z-index: 99; +} + +#facebox h1{ + margin: 0 0 10px 0; +} diff --git a/app/assets/stylesheets/vendor/fancy-box/README b/app/assets/stylesheets/vendor/fancy-box/README new file mode 100644 index 0000000..70212dd --- /dev/null +++ b/app/assets/stylesheets/vendor/fancy-box/README @@ -0,0 +1,4 @@ +Fancybox 1.3.4 (2010/11/11) +Licensed under both MIT and GPL licenses + +http://fancybox.net/
\ No newline at end of file diff --git a/app/assets/stylesheets/vendor/fancy-box/_fancy-box.scss b/app/assets/stylesheets/vendor/fancy-box/_fancy-box.scss new file mode 100755 index 0000000..7ec2644 --- /dev/null +++ b/app/assets/stylesheets/vendor/fancy-box/_fancy-box.scss @@ -0,0 +1,336 @@ +//
+// FancyBox - jQuery Plugin
+// Simple and fancy lightbox alternative
+//
+// Examples and documentation at: http://fancybox.net
+//
+// Copyright (c) 2008 - 2010 Janis Skarnelis
+// That said, it is hardly a one-person project. Many people have submitted bugs, code, and offered their advice freely. Their support is greatly appreciated.
+//
+// Version: 1.3.4 (11/11/2010)
+// Requires: jQuery v1.3+
+//
+// Dual licensed under the MIT and GPL licenses:
+// http://www.opensource.org/licenses/mit-license.php
+// http://www.gnu.org/licenses/gpl.html
+//
+
+#fancybox-loading {
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ width: 40px;
+ height: 40px;
+ margin-top: -20px;
+ margin-left: -20px;
+ cursor: pointer;
+ overflow: hidden;
+ z-index: 1104;
+ display: none;
+}
+
+#fancybox-loading div {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 40px;
+ height: 480px;
+ background-image: image-url('vendor/fancy-box/fancybox.png');
+}
+
+#fancybox-overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ z-index: 1100;
+ display: none;
+}
+
+#fancybox-tmp {
+ padding: 0;
+ margin: 0;
+ border: 0;
+ overflow: auto;
+ display: none;
+}
+
+#fancybox-wrap {
+ position: absolute;
+ top: 0;
+ left: 0;
+ padding: 20px;
+ z-index: 1101;
+ outline: none;
+ display: none;
+}
+
+#fancybox-outer {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ background: #fff;
+}
+
+#fancybox-content {
+ width: 0;
+ height: 0;
+ padding: 0;
+ outline: none;
+ position: relative;
+ overflow: hidden;
+ z-index: 1102;
+ border: 0px solid #fff;
+}
+
+#fancybox-hide-sel-frame {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: transparent;
+ z-index: 1101;
+}
+
+#fancybox-close {
+ position: absolute;
+ top: -15px;
+ right: -15px;
+ width: 30px;
+ height: 30px;
+ background: transparent image-url('vendor/fancy-box/fancybox.png') -40px 0px;
+ cursor: pointer;
+ z-index: 1103;
+ display: none;
+}
+
+#fancybox-error {
+ color: #444;
+ font: normal 12px/20px Arial;
+ padding: 14px;
+ margin: 0;
+}
+
+#fancybox-img {
+ width: 100%;
+ height: 100%;
+ padding: 0;
+ margin: 0;
+ border: none;
+ outline: none;
+ line-height: 0;
+ vertical-align: top;
+}
+
+#fancybox-frame {
+ width: 100%;
+ height: 100%;
+ border: none;
+ display: block;
+}
+
+#fancybox-left, #fancybox-right {
+ position: absolute;
+ bottom: 0px;
+ height: 100%;
+ width: 35%;
+ cursor: pointer;
+ outline: none;
+ background: transparent image-url('vendor/fancy-box/blank.gif');
+ z-index: 1102;
+ display: none;
+}
+
+#fancybox-left {
+ left: 0px;
+}
+
+#fancybox-right {
+ right: 0px;
+}
+
+#fancybox-left-ico, #fancybox-right-ico {
+ position: absolute;
+ top: 50%;
+ left: -9999px;
+ width: 30px;
+ height: 30px;
+ margin-top: -15px;
+ cursor: pointer;
+ z-index: 1102;
+ display: block;
+}
+
+#fancybox-left-ico {
+ background-image: image-url('vendor/fancy-box/fancybox.png');
+ background-position: -40px -30px;
+}
+
+#fancybox-right-ico {
+ background-image: image-url('vendor/fancy-box/fancybox.png');
+ background-position: -40px -60px;
+}
+
+#fancybox-left:hover, #fancybox-right:hover {
+ visibility: visible; /* IE6 */
+}
+
+#fancybox-left:hover span {
+ left: 20px;
+}
+
+#fancybox-right:hover span {
+ left: auto;
+ right: 20px;
+}
+
+.fancybox-bg {
+ position: absolute;
+ padding: 0;
+ margin: 0;
+ border: 0;
+ width: 20px;
+ height: 20px;
+ z-index: 1001;
+}
+
+#fancybox-bg-n {
+ top: -20px;
+ left: 0;
+ width: 100%;
+ background-image: image-url('vendor/fancy-box/fancybox-x.png');
+}
+
+#fancybox-bg-ne {
+ top: -20px;
+ right: -20px;
+ background-image: image-url('vendor/fancy-box/fancybox.png');
+ background-position: -40px -162px;
+}
+
+#fancybox-bg-e {
+ top: 0;
+ right: -20px;
+ height: 100%;
+ background-image: image-url('vendor/fancy-box/fancybox-y.png');
+ background-position: -20px 0px;
+}
+
+#fancybox-bg-se {
+ bottom: -20px;
+ right: -20px;
+ background-image: image-url('vendor/fancy-box/fancybox.png');
+ background-position: -40px -182px;
+}
+
+#fancybox-bg-s {
+ bottom: -20px;
+ left: 0;
+ width: 100%;
+ background-image: image-url('vendor/fancy-box/fancybox-x.png');
+ background-position: 0px -20px;
+}
+
+#fancybox-bg-sw {
+ bottom: -20px;
+ left: -20px;
+ background-image: image-url('vendor/fancy-box/fancybox.png');
+ background-position: -40px -142px;
+}
+
+#fancybox-bg-w {
+ top: 0;
+ left: -20px;
+ height: 100%;
+ background-image: image-url('vendor/fancy-box/fancybox-y.png');
+}
+
+#fancybox-bg-nw {
+ top: -20px;
+ left: -20px;
+ background-image: image-url('vendor/fancy-box/fancybox.png');
+ background-position: -40px -122px;
+}
+
+#fancybox-title {
+ font-family: Helvetica;
+ font-size: 12px;
+ z-index: 1102;
+}
+
+.fancybox-title-inside {
+ padding-bottom: 10px;
+ text-align: center;
+ color: #333;
+ background: #fff;
+ position: relative;
+}
+
+.fancybox-title-outside {
+ padding-top: 10px;
+ color: #fff;
+}
+
+.fancybox-title-over {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ color: #FFF;
+ text-align: left;
+}
+
+#fancybox-title-over {
+ padding: 10px;
+ background-image: image-url('vendor/fancy-box/fancy_title_over.png');
+ display: block;
+}
+
+.fancybox-title-float {
+ position: absolute;
+ left: 0;
+ bottom: -20px;
+ height: 32px;
+}
+
+#fancybox-title-float-wrap {
+ border: none;
+ border-collapse: collapse;
+ width: auto;
+}
+
+#fancybox-title-float-wrap td {
+ border: none;
+ white-space: nowrap;
+}
+
+#fancybox-title-float-left {
+ padding: 0 0 0 15px;
+ background: image-url('vendor/fancy-box/fancybox.png') -40px -90px no-repeat;
+}
+
+#fancybox-title-float-main {
+ color: #FFF;
+ line-height: 29px;
+ font-weight: bold;
+ padding: 0 0 3px 0;
+ background: image-url('vendor/fancy-box/fancybox-x.png') 0px -40px;
+}
+
+#fancybox-title-float-right {
+ padding: 0 0 0 15px;
+ background: image-url('vendor/fancy-box/fancybox.png') -55px -90px no-repeat;
+}
+
+/* IE6, IE7, IE8 */
+
+.fancybox-ie .fancybox-bg { background: transparent !important; }
+
+.fancybox-ie #fancybox-bg-n { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_n.png', sizingMethod='scale'); }
+.fancybox-ie #fancybox-bg-ne { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_ne.png', sizingMethod='scale'); }
+.fancybox-ie #fancybox-bg-e { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_e.png', sizingMethod='scale'); }
+.fancybox-ie #fancybox-bg-se { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_se.png', sizingMethod='scale'); }
+.fancybox-ie #fancybox-bg-s { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_s.png', sizingMethod='scale'); }
+.fancybox-ie #fancybox-bg-sw { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_sw.png', sizingMethod='scale'); }
+.fancybox-ie #fancybox-bg-w { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_w.png', sizingMethod='scale'); }
+.fancybox-ie #fancybox-bg-nw { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_nw.png', sizingMethod='scale'); }
\ No newline at end of file diff --git a/app/assets/stylesheets/vendor/fancy-buttons/README b/app/assets/stylesheets/vendor/fancy-buttons/README new file mode 100644 index 0000000..9ee6cc3 --- /dev/null +++ b/app/assets/stylesheets/vendor/fancy-buttons/README @@ -0,0 +1,3 @@ + Fancy Buttons by imathis + https://github.com/imathis/fancy-buttons + License: MIT
\ No newline at end of file diff --git a/app/assets/stylesheets/vendor/fancy-buttons/_fancy-buttons.scss b/app/assets/stylesheets/vendor/fancy-buttons/_fancy-buttons.scss new file mode 100644 index 0000000..2e85caf --- /dev/null +++ b/app/assets/stylesheets/vendor/fancy-buttons/_fancy-buttons.scss @@ -0,0 +1,195 @@ +@import "compass/css3/gradient"; +@import "compass/css3/border-radius"; +@import "compass/css3/opacity"; +@import "compass/css3/text-shadow"; +@import "compass/css3/box-shadow"; +@import "compass/css3/background-clip"; +@import "fancy-gradient"; + +$fb-gradient-style: glossy !default; +$fb-invert-on-click: 1 !default; +$fb-font-size: 18px !default; +$fb-color: #444444 !default; +$fb-font-weight: bold !default; +$fb-border-width: 1px !default; +$fb-radius: 6px !default; +$fb-light-text: white !default; +$fb-dark-text: #222222 !default; +$fb-gradient: 1 !default; +$fb-image-path: image-url("vendor/fancy-buttons/button_bg.png") !default; +$fb-allow-disabled: false !default; +$fb-line-height: 1.2em !default; + +// Make a fancy button. +@mixin fancy-button($color: $fb-color, $font-size: $fb-font-size, $radius: $fb-radius, $border-width: $fb-border-width) { + @include fancy-button-structure($font-size, $radius, $border-width); + @include fancy-button-colors($color); +} + +// Style the button's colors, picking the most appropriate color set for the base color. +@mixin fancy-button-colors($color: $fb-color, $hover: 0, $active: 0, $fb-allow-disabled: $fb-allow-disabled) { + @include fb-color($color, "default"); + &:hover, &:focus { + @if $hover == 0 { + @include fb-color(darken($color, 3), "hover", $color); } + @else { + @include fb-color($hover, "hover"); } } + &:active { + @if $active == 0 { + @include fb-color(darken($color, 6), "active", $color); + @include box-shadow(darken($color, 15) 0 0.08em 0.2em 1px inset); } + @else { + @include fb-color($active, "active"); + @include box-shadow(darken($active, 9) 0 0.08em 0.1em 1px inset); } } + @include box-shadow(rgba(white, lightness($color) / 100) 0 0 0.1em 1px inset); + @include background-clip(padding-box); + @if $fb-allow-disabled { + &.disabled, &[disabled] { + @include disable-fancy-button($color); + } + } +} + +@mixin fancy-button-allow-disable($color: $fb-color, $font-size: $fb-font-size, $radius: $fb-radius, $border-width: $fb-border-width) { + $fb-disable-allowed: $fb-allow-disabled; + $fb-allow-disabled: true; + @include fancy-button-structure($font-size, $radius, $border-width); + @include fancy-button-colors-matte($color); + $fb-allow-disabled: $fb-disable-allowed; +} + +@mixin fancy-button-matte($color: $fb-color, $font-size: $fb-font-size, $radius: $fb-radius, $border-width: $fb-border-width) { + @include fancy-button-structure($font-size, $radius, $border-width); + @include fancy-button-colors-matte($color); +} + +@mixin fancy-button-custom($color: $fb-color, $font-size: $fb-font-size, $radius: $fb-radius, $border-width: $fb-border-width) { + @include fancy-button-structure($font-size, $radius, $border-width); + @include fancy-button-colors-custom($color, $font-size, $radius, $border-width); +} + +@mixin fancy-button-colors-matte($color: $fb-color, $hover: 0, $active: 0) { + $fb-current-style: $fb-gradient-style; + $fb-gradient-style: matte; + @include fancy-button-colors($color, $hover, $active); + $fb-gradient-style: $fb-current-style; +} + +@mixin fancy-button-colors-custom($color: $fb-color, $hover: 0, $active: 0) { + $fb-current-style: $fb-gradient-style; + $fb-gradient-style: custom; + @include fancy-button-colors($color, $hover, $active); + $fb-gradient-style: $fb-current-style; +} + +// Default state color settings +@mixin fb-color($color, $state, $lumins: $color) { + $gradient-top: lighten($color, 15); + $gradient-bottom: darken($color, 6); + $border-color: darken($color, 8); + @if $fb-invert-on-click != 0 { + $border-color: darken($color, 15); } + @if saturation($color) > 0 { + $color: saturate($color, 40); } + @else if lightness($lumins) >= lightness(#aaaaaa) { + $color: lighten($color, 20); } + @include fb-state-colors($color, $gradient-top, $gradient-bottom, $border-color, $state, $lumins); +} + +// Apply the button colors specified for the button state into which it is mixed. +@mixin fb-state-colors($color, $gradient-top, $gradient-bottom, $border, $state, $lumins: $color) { + background-color: $color; + @if $fb-gradient != 0 { + @if $fb-gradient-style == "glossy" { + @if $state == "active" { + @include fancy-gradient-active($gradient-top, $gradient-bottom); } + @else { + @include fancy-gradient($gradient-top, $gradient-bottom); } } + @else if $fb-gradient-style == "matte" { + @if $state == "active" { + @include fancy-matte-gradient-active($gradient-top, $gradient-bottom); } + @else { + @include fancy-matte-gradient($gradient-top, $gradient-bottom); } } + @else if $fb-gradient-style == "custom" { + @if $state == "active" { + @include custom-fancy-gradient-active($gradient-top, $gradient-bottom); } + @else { + @include custom-fancy-gradient($gradient-top, $gradient-bottom); } } } + border: { + color: $border; }; + $text-shadow-settings: unquote("0px 1px 1px"); + @if $fb-invert-on-click != 0 and $state == "active" { + $text-shadow-settings: unquote("0px -1px -1px"); } + @if lightness($lumins) < lightness(#aaaaaa) { + text-shadow: darken($color, 25) $text-shadow-settings; + &, &:visited { + color: $fb-light-text; } } + @else { + text-shadow: lighten($color, 15) $text-shadow-settings; + &, &:visited { + color: $fb-dark-text; } } +} + +@mixin fancy-button-text-colors($color, $hover: $color, $active: $color, $fb-allow-disabled: $fb-allow-disabled) { + &, &:visited { + color: $color; } + &:hover, &:focus { + color: $hover; } + &:active { + color: $active; } + @if $fb-allow-disabled { + &.disabled, &[disabled] { + color: $color; } } +} + +// Layout the button's box +@mixin fancy-button-structure($font-size: $fb-font-size, $radius: $fb-radius, $border-width: $fb-border-width, $line-height: $fb-line-height) { + @extend .fancy-button-reset-base-class; + @include fancy-button-size($font-size, $radius, $border-width, $line-height); +} + +@mixin fancy-button-size($font-size: $fb-font-size, $radius: $fb-radius, $border-width: $fb-border-width, $line-height: $fb-line-height) { + // better padding for smaller buttons + $v-padding: 0.3em; + $h-padding: 1em; + @if $radius > 0 { + @include border-radius($radius); } + font-size: $font-size; + line-height: $line-height; + @include fancy-button-padding($v-padding, $h-padding, $border-width); +} + +@mixin fancy-button-padding($v-padding, $h-padding, $border-width: $fb-border-width) { + padding: $v-padding $h-padding; + border-width: $border-width; +} + +// Reset the button's important properties to make sure they behave correctly +@mixin fb-reset($font-weight: $fb-font-weight) { + font-family: "Lucida Grande", Lucida, Arial, sans-serif; + background: #{$fb-image-path} repeat-x bottom left; + margin: 0; + width: auto; + overflow: visible; + display: inline-block; + cursor: pointer; + text-decoration: none; + border-style: solid; + font-weight: $font-weight; + &::-moz-focus-inner { + border: none; + padding: 0; } + &:focus { + outline: none; } +} + +@mixin disable-fancy-button($color: $fb-color, $opacity: 0.7) { + @include fb-color($color, "default"); + @include opacity($opacity); + @include box-shadow(none); + cursor: default !important; +} + +.fancy-button-reset-base-class { + @include fb-reset; +} diff --git a/app/assets/stylesheets/vendor/fancy-buttons/_fancy-gradient.scss b/app/assets/stylesheets/vendor/fancy-buttons/_fancy-gradient.scss new file mode 100644 index 0000000..da0baa9 --- /dev/null +++ b/app/assets/stylesheets/vendor/fancy-buttons/_fancy-gradient.scss @@ -0,0 +1,28 @@ +@mixin fancy-gradient($color1, $color2) { + $top_shine: lighten($color1, 18); + $bottom_glow: lighten($color2, 10); + $top_middle: $color1; + $middle: lighten($color2, 3); + $bottom_middle: $color2; + @include background-image(linear-gradient($top_shine, $top_middle 10%, $middle 50%, $bottom_middle 50%, $bottom_glow)); } + +@mixin fancy-gradient-active($color1, $color2) { + $top: lighten($color2, 6); + $bottom: lighten($color2, 14); + $top_middle: lighten($color2, 8); + $middle: lighten($color2, 4); + $bottom_middle: lighten($color2, 1); + @include background-image(linear-gradient($top, $top_middle 30%, $middle 50%, $bottom_middle 50%, $bottom)); } + +@mixin fancy-matte-gradient($color1, $color2) { + @include background-image(linear-gradient($color1, $color2)); } + +@mixin fancy-matte-gradient-active($color1, $color2) { + $top: lighten($color2, 5); + $bottom: lighten($color2, 15); + $middle: lighten($color2, 8); + @include background-image(linear-gradient($top, $middle 40%, $middle 85%, $bottom)); } + +/* incase an inverted custom gradient isn't specified */ +@mixin custom-fancy-gradient-active($color1, $color2) { + @include custom-fancy-gradient($color1, $color2); } diff --git a/app/assets/stylesheets/vendor/survival-kit/_blog.scss b/app/assets/stylesheets/vendor/survival-kit/_blog.scss new file mode 100644 index 0000000..5bec255 --- /dev/null +++ b/app/assets/stylesheets/vendor/survival-kit/_blog.scss @@ -0,0 +1,99 @@ +// Survival ✚ Kit + +// News Item +// ---------------------------------------- +// <div class="blog-item"> +// <h6 class="date">14 de Julio 2010</h6> +// <h3><a href="#">Lorem My Ipsum</a></h3> +// <img src="image.jpg" width="194" height="146" alt="Blog Thumb"/> +// <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec ipsum magna. Duis porttitor, felis quis eleifend vehicula, mauris mi varius nibh, sit amet iaculis magna magna vitae justo...</p> +// <p class="read-more"><a href="#">Nota Completa</a></p> +// </div> +@mixin news-item($date:#383838, $header:#1491EE) { + @include clearfix; + .date { + color:$date; + font:{ + size:11px; + weight:normal; + }; + } + img { + float:left; + padding: 4px 14px 50px 0; + } + p { + color:$link-color; + } + h3 { + margin-bottom:8px; + a{ + color:$header; + font-size:15px; + font-weight:bold; + text-decoration:none; + } + } +} + + +// Pagination Styling +// ---------------------------------------- +// <div class="pagination"> +// <span class="previous_page disabled">← Previous</span> +// <em>1</em> +// <a rel="next" href="/?page=2">2</a> +// <a href="/?page=3">3</a> +// <a href="/?page=4">4</a> +// <a class="next_page" rel="next" href="/?page=2">Next →</a> +// </div> + +// Notes for Later +//$active-state: (border (1px solid red), height 300px, ..[infinite]); +// Would Output: +// border: 1px solid red; heigh: 300px; + +// Normal, hover, active, disabled +//$pagination-font-weights: normal bold normal; +//$pagination-font-colors: #7F7F7F yellow #FFFFFF #4C7DB5; +//$pagination-borders:none (1px solid #4C7DB5) (none) (1px solid #D0D0D0); +//$pagination-backgrounds: #F5F5F5 #FFFFFF none none; +// color, background, border, weight +//@include pagination(#7F7F7F yellow #FFFFFF #4C7DB5, #F5F5F5 #FFFFFF none none, none (1px solid #4C7DB5) (none) (1px solid #D0D0D0), ); + +@mixin pagination() { + text-align:center; + * { + @include border-radius(4px); + } + .current { + font-weight:bold; + color:#0090BC; + font-size:14px; + padding: 3px 8px; + margin-right:2px; + } + .disabled { + color:#518CBC; + border:1px solid #518CBC; + } + a { + padding: 3px 8px; + @include gradient(#80DFFF, #3BBBE7); + @include box-shadow(0 2px 0px #EBEBEB); + text-decoration:none; + color: #FFF; + font-weight: bold; + border:1px solid #4DC6EF; + &:active { + @include box-shadow(0px 1px #96C5FA, inset 0px 1px #5D96CC); + background:#F6FAFC !important; + } + &:hover { + background:#D0F0FC; + border:1px solid #4DC6EF; + color:$link-hover-color; + @include box-shadow(none); + } + } +}
\ No newline at end of file diff --git a/app/assets/stylesheets/vendor/survival-kit/_effects.scss b/app/assets/stylesheets/vendor/survival-kit/_effects.scss new file mode 100644 index 0000000..488a83a --- /dev/null +++ b/app/assets/stylesheets/vendor/survival-kit/_effects.scss @@ -0,0 +1,97 @@ +// Survival ✚ Kit + +// Add a Bendy shadow to a squar element. +// @author Chris Eppstein +@mixin bendy-shadow($width, $angle: 5deg, $color: rgba(#333, 0.5)) { + @include box-shadow(0 10px 5px -5px $color); + position: relative; + z-index: 1; + &:before, &:after { + @include box-shadow(0 10px 10px 1px $color); + bottom: 2px; + content: ""; + height: 10px; + position: absolute; + width: $width / 2; + z-index: -1; + } + &:before { + @include rotate(-$angle); + left: 10px; + } + &:after { + @include rotate($angle); + right: 10px; + } +} + +// Sexy button ! +@mixin shiny-button($light-color: #92CE2F, $dark-mix-color: #32D17C, $mix-percent: 40%) { + // Params + $bg-light: $light-color; + $bg-dark: darken(mix($dark-mix-color, $bg-light, $mix-percent), 13%); + + $border-inset-color: $bg-light; + $border-inside-light: lighten($border-inset-color, 13%); + $border-inside-dark: $border-inset-color; + + $border-outside: darken($bg-dark, 9%); + $box-shadow: rgba(35, 35, 35, 0.2); + $text-shadow: darken($bg-dark, 7%); + + @extend .bradius-inner; + @include box-shadow(inset 1px 1px 0px $border-inside-light, inset -1px -1px 0px $border-inside-dark); + @include gradient($bg-light, $bg-dark); + @include text-shadow(2px 2px 1px $text-shadow); + border:1px solid $border-outside; + color:#FFF !important; + + font-size:size(13px); + font-weight: bold; + padding: 9px 60px; + text-decoration: none; + text-decoration: none !important; + &:hover { + @include box-shadow(inset 0px 0px 1px $border-inside-light, 0px 2px 1px $box-shadow); + @include gradient(lighten($bg-light, 6%), lighten($bg-dark, 6%)); + } + &:active { + @include box-shadow(inset 0px 2px 3px $bg-dark); + background: mix($bg-light, $bg-dark, 50%); + } + &.small { + font-size: 12px; + padding: 7px 22px; + } +} + +// +// @TODO: Add docs to shiny-button-colors! +// +@mixin shiny-button-colors($light-color: #92CE2F, $dark-mix-color: #32D17C, $mix-percent: 40%) { + // Params + $bg-light: $light-color; + $bg-dark: darken(mix($dark-mix-color, $bg-light, $mix-percent), 13%); + + $border-inset-color: $bg-light; + $border-inside-light: lighten($border-inset-color, 13%); + $border-inside-dark: $border-inset-color; + + $border-outside: darken($bg-dark, 9%); + $box-shadow: rgba(35, 35, 35, 0.2); + $text-shadow: darken($bg-dark, 7%); + + + @include box-shadow(inset 1px 1px 0px $border-inside-light, inset -1px -1px 0px $border-inside-dark); + @include gradient($bg-light, $bg-dark); + @include text-shadow(2px 2px 1px $text-shadow); + border:1px solid $border-outside; + &:hover { + @include box-shadow(inset 0px 0px 1px $border-inside-light, 0px 2px 1px $box-shadow); + @include gradient(lighten($bg-light, 6%), lighten($bg-dark, 6%)); + } + &:active { + @include box-shadow(inset 0px 2px 3px $bg-dark); + background: mix($bg-light, $bg-dark, 50%); + } +}
\ No newline at end of file diff --git a/app/assets/stylesheets/vendor/survival-kit/_forms.scss b/app/assets/stylesheets/vendor/survival-kit/_forms.scss new file mode 100644 index 0000000..7e82b87 --- /dev/null +++ b/app/assets/stylesheets/vendor/survival-kit/_forms.scss @@ -0,0 +1,313 @@ +// Survival ✚ Kit + +// A simple search box, generic. +// If $width contains a second argument, it won't output the width to the parent element, allowing you to use box-size. +// +// <form action="#" accept-charset="utf-8" class="search-box"> +// <input type="text" class="text" value="Search..." name="q" /> +// <input type="submit" class="button" value="" /> +// </form> +@mixin search-box-simple { + // Preferences + $width: 210px; + $height: 27px; + $font-size: 12px; + + background: #FFF; + overflow: hidden; + height: $height; + width: $width; + + // Style + border:1px solid #4BC5ED; + margin-top: -3px; + @extend .bradius-inner; + @include gradient(#FFF, #F5F5F5); + + &.active { + @include box-shadow(0px 1px 2px transparentize(#000, 0.8)); + background:#FFF; + } + + // Calculations + $button-width: 27px; + $input-width: $width - $button-width - 2px; + + input, button { + background:transparent; + border: 0; + font-size: $font-size; + outline: none; + } + .text { + @include size($input-width, $height, 7px 10px); + color: #777; + float: left; + line-height: $height - (7px * 2); + } + button, .search { + cursor: pointer; + display: block; + float:right; + height: $height; + padding:0; + width: $button-width; + } + .search { + background:transparent image-url('redesign/vendor/survival-kit/search-13x16.png') center center no-repeat; + } +} + +// Search Box Simple dimention override +@mixin search-box-simple-size($width, $height, $button-width: 27px) { + $input-width: $width - $button-width - 2px; + height: $height; + width: $width; + .text { + @include size($input-width, $height, 7px 10px); + line-height: $height - (7px * 2); + } + button, .search { + height: $height; + width: $button-width; + } +} + + +// Inputs. +$input-shadow : inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.2) !default; +$input-hover-color : #7DBEF1 !default; +$input-hover-shadow : 0 0 6px #7DBEF1 !default; + +// +// Adds the Input state effects +// +@mixin input-effects() { + @if $input-shadow { @include box-shadow($input-shadow); } + border:1px solid #CCCCCC; + outline: 0; + &:focus { + @if $input-hover-shadow { + @include box-shadow($input-hover-shadow); + } + border:1px solid $input-hover-color; + } +} + +// +// Forms Styles (Survival Kit) +// This styles are meant to be used with Simple_Forms (Rails) +// Usage: +// simple-forms(default, option-1 option2) +// Options: +// block-hints : display the hints right after the inut field. +@mixin simple-forms($selector : "simple_form", $opts:false) { + // Setup + $size-modifier : 0px; + $input-width : 300px; + $input-font-size : $base-font-size + $size-modifier; + $vertical-spacing : 7px; + $horizontal-spacing : 10px; + $label-width :148px; + + // 7px = base padding at 0 size modifier. + $vertical-field-padding : floor((7px + $size-modifier) + ($size-modifier / 4.4) * 2); + $horizontal-field-padding: 6px; + + // Colors. + $hint-color : #6E6E6E; + + @if $selector == auto or $selector == default { + $selector: 'simple_form'; + } + + .hidden { display: none; } + // Force $opts into a list goddamnit. + $opts: join($opts, herp derp); + + .#{$selector} { + @include debug; + .hint { + @include debug(green); + display:inline-block; + padding:$vertical-field-padding 0 $vertical-field-padding ($label-width + $horizontal-spacing); + } + + // Fix a issue with the spacing. + input.date { + label { + width: 145px !important; + } + } + + + label { + @include debug(green); + vertical-align:middle; + width:$label-width; // double line labels. + display:inline-block; // works with already inline displayed items. + margin:0 $horizontal-spacing 0 0; + padding: $vertical-field-padding 0; + line-height:$input-font-size + ($input-font-size * 0.26); + text-align: right; + abbr { + @include debug(yellow); + @if index($opts, no-stars) { + display:none; + } @else { + color:#E62500; + float: right; + margin-left: $horizontal-spacing; + } + } + &.boolean, &.collection_radio_buttons { padding:$horizontal-spacing/2; width: auto;} + } + + .ext-sfr { + @include debug(yellow); + display: inline-block; + vertical-align: middle; + width: $label-width; + } + + .input { + @include debug(blue); + padding:$vertical-spacing 0; + .hint { + @extend .ext-sfr; + color: #8A8A8A; + display: block; + font-size: size(11px); + padding: 2px 0 0 ($label-width + $horizontal-spacing); + width: $input-width + ($horizontal-field-padding * 2) + $horizontal-spacing; + } + &.boolean { + padding: 2px 0 0 ($label-width + $horizontal-spacing); + } + } + + select { + border:1px solid #CCCCCC; + outline:none; + // floor(Font Size * Line Height) + (Vertical Input Padding * 2) + 1px) + $calc: floor(($input-font-size * $base-line-height ) + ($vertical-field-padding * 2)) + (1px); + height: $calc + 1px; + padding:(6px + $size-modifier) * $base-line-height ; + &:focus { + border:1px solid $input-hover-color; + } + } + + // Needs to be nested so it doesn't collide with date selects. + .select select, .country select { + width:$input-width + ($horizontal-field-padding * 2); + } + textarea, input[type=text], input[type=password], input[type=email] { + font-size:$input-font-size; + padding: $vertical-field-padding $horizontal-field-padding; + vertical-align:top; + width:$input-width; + // Input Effects + @include input-effects; + } + + textarea { + height:80px; + max-width:$input-width; + } + + input { + &.check_boxes, &.radio, &.boolean { + vertical-align:middle; + } + } + + .submit, .padded { + padding-left: $label-width + $horizontal-spacing; + } + + .form-actions { + background: #F7F7F7; + border-top: 1px solid #DDD; + padding: 17px 0px 18px $label-width + $horizontal-spacing; + } + + // Simple Form Button for the forms. + .button { + @extend .sk-button; + } + + + // Errors @todo: this should be in its own section. + span.error, .error { + @extend .ext-sfr; + color: #D65C5C; + font-size: 12px; + margin-left: 10px; + } + + #error_explanation { + @include box-shadow(#D4D4D4 0 0 10px); + background: #FFEBD6; + border: 1px solid #FFB36C; + color:#895334; + margin:$vertical-spacing * 4 0; + padding: 10px 14px; + h2 { + @include header-size(18px); + color:#AE4910; + margin-top:0; + } + } + + + // Colors for form validity + input:valid, textarea:valid {} + + input:invalid, textarea:invalid { + $error-color: #FF6161; + box-shadow:$input-shadow, inset -7px 0px 0px lighten($error-color, 15%) !important; + &:focus { + @if $input-hover-shadow { + @include box-shadow($input-hover-shadow, inset -7px 0px 0px $error-color !important ); + } + } + } + } + + // Rails 3 wraps errors in Divs + .field_with_errors { + display:inline; + } + + // Make this compatible when you have no javascript loaded! + @if not index($opts, no-browser-support) { + .ie7 { + select { margin-top:15px;} + } + } +} + +// Allows you to have different widths for different layouts. +@mixin simple-form-width($width:false, $label-width:false) { + $horizontal-field-padding : 6px; + $horizontal-spacing : 3px; + $input-width : $width; + + @if $width { + textarea, input[type=text], input[type=password] { + max-width: $width; + width:$width; + } + + .select select, .country select { + width:$input-width + ($horizontal-field-padding * 2); + } + } + + @if $label-width { + .input .hint { + width:$label-width; + } + } +}
\ No newline at end of file diff --git a/app/assets/stylesheets/vendor/survival-kit/_headers.scss b/app/assets/stylesheets/vendor/survival-kit/_headers.scss new file mode 100644 index 0000000..8b99808 --- /dev/null +++ b/app/assets/stylesheets/vendor/survival-kit/_headers.scss @@ -0,0 +1,36 @@ +// Survival ✚ Kit + +// Sets the font size specified in pixels using percents so that the base +// font size changes and 1em has the correct value. When nesting font size +// declarations, within the DOM tree, the base_font_size must be the parent's +// effective font-size in pixels. +// Usage Examples: +// .big +// +font-size(16px) +// .bigger +// +font-size(18px) +// .big .bigger +// +font-size(18px, 16px) +// +// For more information see the table found at http://developer.yahoo.com/yui/3/cssfonts/#fontsize +// From: compass-html5-boilerplate gem. + +@function size($size, $base-font-size: $base-font-size) { + @return ceil(percentage($size / $base-font-size)); +} + + +// Calculate margin and line height according to the given size. +@mixin header-size($size) { + font-size: size($size); +} + +// Calculate the Header based on the H1 Max size. +@mixin htags-sizes($max) { + $per: $max * 0.10; + @for $i from 1 through 6 { + h#{$i} { + @include header-size($max - ($per * $i) ); + } + } +}
\ No newline at end of file diff --git a/app/assets/stylesheets/vendor/survival-kit/_images.scss b/app/assets/stylesheets/vendor/survival-kit/_images.scss new file mode 100644 index 0000000..36e67cd --- /dev/null +++ b/app/assets/stylesheets/vendor/survival-kit/_images.scss @@ -0,0 +1,121 @@ +// Survival ✚ Kit + +@import "compass/typography/text/replacement"; + +// Replace an A tag with an a background-image. +// @var $image string path to the image +// @var $inline boolean embed via data. +@mixin image-link($image, $inline:false) { + @include image-background($image, $inline); + cursor:pointer; + @extend .ext-hide-text; +} + +// Replace an A tag with an a background-image sprite. You need to provide it with +// the dimentions of the image and the x-pos/y-pos +// +// @var $image string path to the image, inherit is useful. +// @var $height width +// @var $height pixels +// @var $x-pos pixels +// @var $y-pos pixels +// @var $inline boolean embed via data. +@mixin image-sprite-link($image, $width, $height, $x-pos, $y-pos, $inline: false) { + @include sk-background(transparent, $image, $x-pos, $y-pos, no-repeat, $inline); + width:$width; + height:$height; + @extend .ext-hide-text; +} + +// Replace a Header>a tag with a background image. Made specifically for logos. +// @var $image string path to the image +// @var $inline boolean embed via data. +@mixin logo($image, $inline:false) { + @include no-mp; + width: image-width($image); + height: image-height($image); + a { + @include image-link($image, $inline); + &:hover { opacity: 0.7;} + } +} + +// Area for a header link, meant to be used when it inherits a background image. +// This should be invoked on the H1-6 Tag and not in the link, the needed structure is:2 +// <h1><a href=""></a></h1> +@mixin logo-area($width, $height, $debugging: false) { + @include no-mp; + width:$width; + height:$height; + a { + @include link-area($width, $height, $debugging); + } +} + +// An area which should be clickable. It's meant to be a low level mixin, you should +// use the alternatuves. +// - debugging enables a background color to know the position. +@mixin link-area($width, $height, $debugging: false) { + width:$width; + height:$height; + @if $debugging { + @include debug($debugging); + } + @extend .ext-hide-text; +} + +// Mixin for quickly replacing images for any given element. +// @var $image string path to the image +// @var $inline boolean embed via data. +@mixin image-replace($image, $inline:false) { + @include image-background($image, $inline); + @extend .ext-hide-text; +} +@mixin image-replace-url($image, $width, $height) { + background:transparent url($image) left top no-repeat; + @include link-area($width, $height); +} + +// Just adds the image as a background and sets the width/height accordingly. +// @var $image string path to the image +// @var $inline boolean embed via data. +@mixin image-background($image, $inline:false) { + @include sk-background(transparent, $image, no-repeat, top, left, $inline); + width: image-width($image); + height: image-height($image); +} + +// Add a background by passing the exact same parameters as a normal one. With +// one more parameter $inline. Which will use inline-image and add backward +// compatibility to IE7 via *background. +// +// @var $color +// @var $image string can be a path to an image or inherit (will insert tags separately) +// @var $horizontal +// @var $vertical +// @var $repeat +// @var $inline +@mixin sk-background($color, $image, $horizontal, $vertical, $repeat, $inline: false) { + @if $image == inherit { + background-color: $color; + background-repeat: $repeat; + background-position: $horizontal $vertical; + } @else { + @if $inline == true { + background : $color inline-image($image) $horizontal $vertical $repeat; + *background : $color image-url($image) $horizontal $vertical $repeat; + } @else { + background: $color image-url($image) $horizontal $vertical $repeat; + } + } +} + + +// Common styles needed by our Image Mixins. +// Depends on Compass. +.ext-hide-text { + @include hide-text; + display:block; + direction: ltr; + outline:none; +} diff --git a/app/assets/stylesheets/vendor/survival-kit/_lists.scss b/app/assets/stylesheets/vendor/survival-kit/_lists.scss new file mode 100644 index 0000000..ea9670e --- /dev/null +++ b/app/assets/stylesheets/vendor/survival-kit/_lists.scss @@ -0,0 +1,37 @@ +// Survival ✚ Kit + +// Add docs to float-list! +@mixin float-list($side:left) { + @include no-mp; + list-style-type: none; + li { float:$side; } +} + +$tc-begin-color : #000 !default; +$tc-end-color : lighten(#646464, 30) !default; +$tc-base-font-size : 11px !default; +$tc-max-font-size : 20px !default; +$tc-how-many : 10 !default; +@mixin tag-cloud($tc-begin-color, $tc-end-color, $tc-base-font-size, $tc-max-font-size, $tc-how-many) { + $font-calculations : $tc-base-font-size; + + li { + display:inline; + background:none; + padding:0 2px; + } + + a { + // Stops words from breaking. + display:inline-block; + } + + @for $i from 1 through $tc-how-many { + // The last item gets the max-font size. + $font-calculations: round($font-calculations + (($tc-max-font-size - $tc-base-font-size) / $tc-how-many)); + a.tag-#{$i} { + font-size:$font-calculations; + color: mix($tc-end-color, $tc-begin-color, ( $i * (100 / $tc-how-many) )); + } + } +} diff --git a/app/assets/stylesheets/vendor/survival-kit/_loader.scss b/app/assets/stylesheets/vendor/survival-kit/_loader.scss new file mode 100644 index 0000000..c09a018 --- /dev/null +++ b/app/assets/stylesheets/vendor/survival-kit/_loader.scss @@ -0,0 +1,11 @@ +// Survival ✚ Kit + +// Load all the Libraries. +@import "blog"; +@import "forms"; +@import "images"; +@import "lists"; +@import "navigation"; +@import "tools"; +@import "headers"; +@import "effects"; diff --git a/app/assets/stylesheets/vendor/survival-kit/_navigation.scss b/app/assets/stylesheets/vendor/survival-kit/_navigation.scss new file mode 100644 index 0000000..5e6f13d --- /dev/null +++ b/app/assets/stylesheets/vendor/survival-kit/_navigation.scss @@ -0,0 +1,230 @@ +// Survival ✚ Kit + +// Horizontal Navigation Low-level Method. +// +// It's meant to be called from other predifined mixins to avoid calling so many variables per call. +// Used from ul/ol +@mixin horizontal-navigation( + $height, + $color, + $hover-color, + $active-color, + $text-shadow, + $bg, + $bg-hover, + $bg-active, + $box-shadow, + $box-shadow-hover, + $box-shadow-active, + $border-left, + $border-right, + $padding, + $margin, + $border-radius, + $font-weight, + $font-size, + $tab-space // Sets a tabbing space. + ) { + // $bg none or transparent will remove the background. + @if $tab-space == none { $tab-space:0;} + @if $bg == none { $bg:transparent;} + @if $bg-active == auto { $bg-active:$bg-hover; } + @if $active-color == auto { $active-color:$hover-color; } + + // Border Calculation + // ---------------------------------------- + // Check if borders are set to anything but none / auto. + @if $border-left != none and $border-right != none and $border-left != auto and $border-right != auto { + // Borders where explicitly set. + @include _sk-nav-borders($border-left, $border-right); + } @else if $border-left == auto and $border-right == auto and $bg != transparent{ + // Borders calculated magically. + @include _sk-nav-borders(lighten($bg, 10%), darken($bg, 10%)); + } + + height:$height; // instead of clearfix, to keep shadows alive. + margin: 0; + list-style:none; + + // Links and input + li, a { + display:block; + float:left; // this can make it inline or block level. + line-height:$height; + } + + + a { + @if $font-weight != none { + font-weight: $font-weight; + } + @if $padding != none { + padding:$padding; + } + @if $margin != none { + margin:$margin; + } + @if $font-size != none { + font-size:$font-size; + } + + text-decoration:none; + color:$color; + + @if $bg != transparent { + background:$bg; + } + + @if $box-shadow != none { + @include box-shadow($box-shadow); + } + + @if $text-shadow != none { + @include text-shadow($text-shadow, 1px, 1px, 1px); + } + + @if $border-radius != none { + @include border-radius($border-radius); + } + + // Feature for tabs. + @if $tab-space != 0 { + margin-top: -($tab-space); + } + + // States + // ---------------------------------------- + + &:hover{ + @include _sk-nav-effects($hover-color, $bg-hover, $text-shadow, $box-shadow-hover, $bg-hover); + text-decoration:none; + } + + &:visited { + color:$active-color; + } + &.active { + @include _sk-nav-effects($active-color, $bg-active, $text-shadow, $box-shadow-active, $bg-hover); + // Add tab space. + @if $tab-space != 0 { + height:$height + $tab-space; + } + } + } +} + +// Mixin used to generate Background effects by the horizontal-navigation mixin. +@mixin _sk-nav-effects($color, $bg, $text-shadow, $box-shadow, $bg-hover) { + @if $color != auto { + color:$color; + } + @if $bg != transparent { + @if $bg-hover == auto { + background:darken($bg,3%); + } @else { + background:$bg; + } + @if $box-shadow != none{ + @include box-shadow($box-shadow); + } + } + // Remove the text shadow of hover. + @if $text-shadow != none { + @include text-shadow(none); + } +} + +// Low level mixin. +// Invoked by other mixins. +// +// @var $left the left border. +// @var $right the right border +@mixin _sk-nav-borders($left, $right) { + li:first-child, li.first { + border-left:1px solid $right; + }// li:first-child + li:last-child, li.last { + border-right:1px solid $left; + } + a { + border:{ + left: 1px solid $left; + right: 1px solid $right; + }; + &.active, &.active:hover { + border:{ + left:1px solid transparent; + right:1px solid transparent; + }; + } + &:hover { + border:{ + left:1px solid transparent; + right:1px solid transparent; + }; + } + } +} + +// +// @TODO: Add docs to tabs! +// +@mixin navigation-classes($opts: tabs) { + $opts: join($opts, force list); + .nav { + list-style: none; + margin-bottom: $base-line-height; + margin-left: 0; + } + + // Make links block level + .nav > li > a { + display: block; + } + .nav > li > a:hover { + background-color: #EEEEEE; + text-decoration: none; + } + + // Common styles + .nav-tabs { + @extend .nav; + @include pie-clearfix(); + } + .nav-tabs > li, .nav-pills > li { + float: left; + } + .nav-tabs > li > a { + line-height: 14px; + margin-right: 2px; + padding-left: 12px; + padding-right: 12px; // keeps the overall height an even number + } + + .nav-tabs { + border-bottom: 1px solid #ddd; + } + + .nav-tabs > li { + margin-bottom: -1px; + } + + .nav-tabs > li > a { + @include border-radius(4px 4px 0 0); + border: 1px solid transparent; + padding-bottom: 9px; + padding-top: 9px; + &:hover { + border-color: #EEEEEE #EEEEEE #ddd; + } + } + .nav-tabs > .active { + a, a:hover { + background-color: #FFF; + border: 1px solid #ddd; + border-bottom-color: transparent; + color: gray; + cursor: default; + } + } +}
\ No newline at end of file diff --git a/app/assets/stylesheets/vendor/survival-kit/_secure.scss b/app/assets/stylesheets/vendor/survival-kit/_secure.scss new file mode 100644 index 0000000..f08dd11 --- /dev/null +++ b/app/assets/stylesheets/vendor/survival-kit/_secure.scss @@ -0,0 +1,3 @@ +/*! + This is a compiled file. +*/
\ No newline at end of file diff --git a/app/assets/stylesheets/vendor/survival-kit/_tools.scss b/app/assets/stylesheets/vendor/survival-kit/_tools.scss new file mode 100644 index 0000000..e753dfe --- /dev/null +++ b/app/assets/stylesheets/vendor/survival-kit/_tools.scss @@ -0,0 +1,267 @@ +// Survival ✚ Kit +$container-width : 1000px !default; +$compatibility-mode : true, ie ie7 ie8 ie9 ff2 chrome9 !default; + +// Function to know if we're in compatibility mode, if $version is set it'll return if there's a match for that browser. +@function in-compatibility-mode($version: false) { + @if $compatibility-mode { + @if $version { + @return index(nth($compatibility-mode, 2), $version); + } @else { + @return nth($compatibility-mode, 1); + } + } @else { + @return false; + } +} + +// Shortcut to remove margin an padding. +// Used on several @mixins. +@mixin no-mp($extend:false) { + @if $extend { + @extend .no-mp; + } @else { + margin:0; + padding:0; + } +} +// Sometimes it's better to extend a class. +.no-mp { + margin:0; + padding:0; +} + +// Center an element. +@mixin center-container($container-width, $vertical-margin:0, $padding:0) { + margin:$vertical-margin auto; + @if $padding == 0 { + width:$container-width; + } @else { + @include size($container-width, auto, $padding); + } +} + +// Inline Block CrossBrowser. +// Disregards FF2 and IE6 +@mixin inline-block { + display: inline-block; + @if in-compatibility-mode(ie7) { + zoom: 1; + *display:inline; + } +} + +// Shortcut to set absolute positioning. +@mixin pos($pos, $debug: false) { + @if length($pos) == 1 { + $pos: $pos 0 0 0; + } + @if length($pos) == 2 { + $pos: nth($pos,1) nth($pos,2) 0 0; + } + @if length($pos) == 3 { + $pos: nth($pos,1) nth($pos,2) nth($pos, 3) 0; + } + position:absolute; + @if "#{nth($pos, 1)}" != "0" { top: nth($pos, 1); } + @if "#{nth($pos, 2)}" != "0" { right: nth($pos, 2); } + @if "#{nth($pos, 3)}" != "0" { bottom: nth($pos, 3); } + @if "#{nth($pos, 4)}" != "0" { left: nth($pos, 4); } + @if $debug { @include debug($debug); } +} + +// Center a absolute element horizontally; optional offset. +@mixin pos-x-center($width, $offset:0) { + @include pos(0 50% 0 50%); + margin-left:$offset - ( $width / 2 ); + width:$width; +} + +// Center a absolute element vertically; optional offset. +@mixin pos-y-center($height, $offset:0) { + @include pos(50% 0 50% 0); + height:$height; + margin-top:$offset - ( $height / 2 ); +} + +// Set a debug variable. +@mixin debug($color:red) { + @if $debug != false { + @if $color == true { $color:red; } + background: rgba($color, 0.2); // incompatible with IE. + } +} + +// Class available to center container to 1000px +.w, .pagewidth { + @include center-container($container-width); +} + +// Crossbrowser linear gradient. +// Compatible Browsers: FF3.6+ Saf4+ Chrome IE6-IE9 +// @author SitePoint +@mixin background-gradient($from, $to, $start: top, $end: bottom, $fallback:$from, $ie:false) { + @include gradient($from, $to, $start, $end, $fallback); +} +@mixin gradient($from, $to, $start: top, $end: bottom, $fallback:$from){ + background-color: $fallback; + + @if $end == bottom and $start == top { + @if $start == 0 { + background-image: -webkit-gradient(linear, left $start, left bottom, from($from), to($to)); + } @else { + background-image: -webkit-gradient(linear, $start, left bottom, from($from), to($to)); + } + background-image: -webkit-linear-gradient($start, $from, $to); + background-image: -moz-linear-gradient($start, $from, $to); + background-image: -ms-linear-gradient($start, $from, $to); + background-image: -o-linear-gradient($start, $from, $to); + @if in-compatibility-mode() { + filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#{ie-hex-str($from)}', EndColorStr='#{ie-hex-str($to)}'); + } + } @else if $end == bottom { + background-image: -webkit-gradient(linear, left $start, 0 $end, from($from), to($to)); + background-image: -webkit-linear-gradient(top, $from $start+px, $to); + background-image: -moz-linear-gradient(top, $from $start+px, $to); + background-image: -ms-linear-gradient(top, $from $start+px, $to); + background-image: -o-linear-gradient(top, $from $start+px, $to); + + } @else { + background-image: -webkit-gradient(linear, left $start, 0 $end, from($from), to($to)); + background-image: -webkit-linear-gradient(top, $from $start+px, $to $end+px); + background-image: -moz-linear-gradient(top, $from $start+px, $to $end+px); + background-image: -ms-linear-gradient(top, $from $start+px, $to $end+px); + background-image: -o-linear-gradient(top, $from $start+px, $to $end+px); + // No IE support for positioned gradients + } +} + +// Mixin that allows you to set the size of the box to a fixed width/height +// taking into consideration the padding and borders for you. +// +// Examples: +// @include size(100px, 100px, 10px, 5px solid red); +// Will render a 100x100. +// +// $width: Pixel value for width +// $height: Pixel value for height +// $padding: Padding accepts: 1px or 1px 2px or 1px 2px 3px 4px +// $border: Border, accepts 1px solid #000 or 1px or 1px 2px or 1px 2px 3px 4px +// When passing a border declaration (1px solid #000) it'll add the CSS for you. +@mixin size($width, $height:auto, $padding: none, $border:none) { + // Prepare the borders, accept the following: + // 1px solid #000 or 1px or 1px 2px or 1px 2px 3px 4px + @if true { + @if $border == none { + $border:0; + } + + $border-len: length($border); + // Standardize padding to a list with 4 items. + @if $border-len == 3 { + border:$border; + $bw: nth($border, 1); + $border: $bw $bw $bw $bw; + } @else if $border-len == 1 { + $border: $border $border $border $border; + } @else if $border-len == 2 { + $border: join($border, $border); + } + } + + // Prepare padding, accept the following: + // 1px or 1px 2px or 1px 2px 3px 4px + @if true { + @if $padding == none { + $padding:0; + } @else { + padding:$padding; + } + + // Standardize padding to a list with 4 items. + $padding-len: length($padding); + @if $padding-len == 1 { + $padding: $padding $padding $padding $padding; + } @else if $padding-len == 2 { + $padding: join($padding, $padding); + } + } + + @if $width != auto { + width: $width - (nth($padding, 2) + nth($padding, 4)) - (nth($border, 2) + nth($border, 4)); + } + @if $height != auto { + height: $height - (nth($padding, 1) + nth($padding, 3)) - (nth($border, 1) + nth($border, 3)); + } +} + +// Float an element with a given width and a direction. Third parameter allows easy debugging. +// Yes, we override Compass :( +// @TODO: Make it use box-size and allow padding. +@mixin float($side, $size:auto, $debug-color:false) { + @if $size != auto { + @if length($size) == 1 { + width:$size; + } @else { + height:nth($size, 2); + width:nth($size, 1); + } + + } + @if in-compatibility-mode(ie6) { + display:inline; + } + float: $side; + @if $debug-color and $debug { + @include debug($debug-color); + } +} + +@mixin transition($property: all, $time: 400ms, $easing: ease-out){ + transition: $property $time $easing; + -moz-transition: $property $time $easing; + -ms-transition: $property $time $easing; + -o-transition: $property $time $easing; + -webkit-transition: $property $time $easing; +} + +// Calculate the Golden Ratio of a given value. +// ---------------------------------------- +@function golden-ratio($size, $type) { + $big : round($size / 1.61803); + $small : $size - $big; + @return if($type == large, $big, $small); +} + + +// +// @TODO: Add docs to link-colors! +// +@mixin link-colors($normal, $hover: false, $active: false, $visited: false, $focus: false) { + @if $normal == default { + $hover: $link-hover-color; + $normal: $link-color; + $visited: $link-visited-color; + } + color: $normal; + @if $visited { + &:visited { + color: $visited; } } + @if $focus { + &:focus { + color: $focus; } } + @if $hover { + &:hover { + color: $hover; } } + @if $active { + &:active { + color: $active; } } +} + +// Substract the Body to the Container width to get the sidebar. +@function sidebar($body-width, $container-width-over: false) { + @if $container-width-over == false { + $container-width-over : $container-width; + } + @return $container-width - $body-width; +}
\ No newline at end of file |