From 75206f939b4ed4c0b8f1599b27d6547550c1fa0d Mon Sep 17 00:00:00 2001 From: gemaderus Date: Thu, 5 Mar 2015 10:31:55 +0100 Subject: [PATCH 1/2] Styled base line. --- ...{application.css.scss => application.scss} | 114 ++- app/assets/stylesheets/base/.keep | 0 app/assets/stylesheets/base/_base.scss | 23 + app/assets/stylesheets/base/_fonts.scss | 2 + app/assets/stylesheets/base/_label.scss | 13 + app/assets/stylesheets/base/_links.scss | 8 + app/assets/stylesheets/base/_lists.scss | 13 + app/assets/stylesheets/core/_functions.scss | 27 + app/assets/stylesheets/core/_mixins.scss | 83 ++ app/assets/stylesheets/core/_reset.scss | 427 ++++++++++ app/assets/stylesheets/core/_settings.scss | 32 + app/assets/stylesheets/helpers/.keep | 0 app/assets/stylesheets/helpers/_align.scss | 11 + app/assets/stylesheets/helpers/_bold.scss | 3 + app/assets/stylesheets/helpers/_clearfix.scss | 17 + app/assets/stylesheets/helpers/_colors.scss | 12 + app/assets/stylesheets/helpers/_float.scss | 11 + .../stylesheets/helpers/_font-sizes.scss | 14 + .../stylesheets/helpers/_is-hidden.scss | 12 + app/assets/stylesheets/helpers/_layout.scss | 33 + app/assets/stylesheets/helpers/_percent.scss | 19 + .../stylesheets/helpers/_white-spacing.scss | 158 ++-- .../stylesheets/helpers/_with-border.scss | 3 + app/assets/stylesheets/layout/.keep | 0 app/assets/stylesheets/layout/_donations.scss | 25 + .../stylesheets/layout/_post-donation.scss | 70 ++ app/assets/stylesheets/objects/.keep | 0 app/assets/stylesheets/objects/_avatar.scss | 23 + app/assets/stylesheets/objects/_checkbox.scss | 46 ++ app/assets/stylesheets/objects/_content.scss | 25 + .../stylesheets/objects/_form-fields.scss | 119 +++ app/assets/stylesheets/objects/_form.scss | 43 + .../stylesheets/objects/_justify-columns.scss | 21 + app/assets/stylesheets/vendor/_pikaday.scss | 204 +++++ app/assets/stylesheets/vendor/_select2.scss | 778 ++++++++++++++++++ app/assets/stylesheets/vendor/_slidebars.scss | 208 +++++ app/assets/stylesheets/vendor/_tipsy.scss | 12 + app/controllers/sandbox_controller.rb | 24 + app/views/sandbox/index.html.erb | 7 + app/views/sandbox/post-donation.html.erb | 52 ++ config/routes.rb | 5 + 41 files changed, 2609 insertions(+), 88 deletions(-) rename app/assets/stylesheets/{application.css.scss => application.scss} (89%) create mode 100644 app/assets/stylesheets/base/.keep create mode 100644 app/assets/stylesheets/base/_base.scss create mode 100644 app/assets/stylesheets/base/_fonts.scss create mode 100644 app/assets/stylesheets/base/_label.scss create mode 100644 app/assets/stylesheets/base/_links.scss create mode 100644 app/assets/stylesheets/base/_lists.scss create mode 100644 app/assets/stylesheets/core/_functions.scss create mode 100644 app/assets/stylesheets/core/_mixins.scss create mode 100644 app/assets/stylesheets/core/_reset.scss create mode 100644 app/assets/stylesheets/core/_settings.scss create mode 100644 app/assets/stylesheets/helpers/.keep create mode 100644 app/assets/stylesheets/helpers/_align.scss create mode 100644 app/assets/stylesheets/helpers/_bold.scss create mode 100644 app/assets/stylesheets/helpers/_clearfix.scss create mode 100644 app/assets/stylesheets/helpers/_colors.scss create mode 100644 app/assets/stylesheets/helpers/_float.scss create mode 100644 app/assets/stylesheets/helpers/_font-sizes.scss create mode 100644 app/assets/stylesheets/helpers/_is-hidden.scss create mode 100644 app/assets/stylesheets/helpers/_layout.scss create mode 100644 app/assets/stylesheets/helpers/_percent.scss create mode 100644 app/assets/stylesheets/helpers/_with-border.scss create mode 100644 app/assets/stylesheets/layout/.keep create mode 100644 app/assets/stylesheets/layout/_donations.scss create mode 100644 app/assets/stylesheets/layout/_post-donation.scss create mode 100644 app/assets/stylesheets/objects/.keep create mode 100644 app/assets/stylesheets/objects/_avatar.scss create mode 100644 app/assets/stylesheets/objects/_checkbox.scss create mode 100644 app/assets/stylesheets/objects/_content.scss create mode 100644 app/assets/stylesheets/objects/_form-fields.scss create mode 100644 app/assets/stylesheets/objects/_form.scss create mode 100644 app/assets/stylesheets/objects/_justify-columns.scss create mode 100755 app/assets/stylesheets/vendor/_pikaday.scss create mode 100755 app/assets/stylesheets/vendor/_select2.scss create mode 100644 app/assets/stylesheets/vendor/_slidebars.scss create mode 100644 app/assets/stylesheets/vendor/_tipsy.scss create mode 100644 app/controllers/sandbox_controller.rb create mode 100644 app/views/sandbox/index.html.erb create mode 100644 app/views/sandbox/post-donation.html.erb diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.scss similarity index 89% rename from app/assets/stylesheets/application.css.scss rename to app/assets/stylesheets/application.scss index 25b7023..b94302a 100644 --- a/app/assets/stylesheets/application.css.scss +++ b/app/assets/stylesheets/application.scss @@ -1,33 +1,103 @@ -/* - * This is a manifest file that'll be compiled into application.css, which will include all the files - * listed below. +/* + * 1. Core + * ------- * - * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets, - * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path. + * Any module relative to app configuration it should be here. This includes the global reset for common ground + * in all browsers, any custom reset we want to apply, all variables the app uses, sass functions and mixins... * - * You're free to add application-wide styles to this file and they'll appear at the bottom of the - * compiled file so the styles you add here take precedence over styles defined in any styles - * defined in the other CSS/SCSS files in this directory. It is generally better to create a new - * file per style scope. + */ + +@import "core/settings"; +@import "core/functions"; +@import "core/mixins"; +@import "core/reset"; + +/* + * 2. Base + * ------- + * + * All base styles for the app will be under base folder. This includes fonts, regular styles for headings, + * paragraphs, lists, links, etc. * - *= require_tree . - *= require_self - *= require jquery-ui/autocomplete - *= require tipsy - *= require slidebars - *= require select2 - *= */ -@import "http://fonts.googleapis.com/css?family=Raleway:400,700"; -@import "//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"; +@import "base/fonts"; +@import "base/base"; +@import "base/links"; +@import "base/lists"; +@import "base/label"; +/* + * 3. Helpers + * ---------- + * + * Utility classes, like to clearfix the floats or align text. This follows the single responsability principle. + * + */ + +@import "helpers/clearfix"; +@import "helpers/is-hidden"; +@import "helpers/percent"; +@import "helpers/font-sizes"; @import "helpers/white-spacing"; +@import "helpers/colors"; +@import "helpers/layout"; +@import "helpers/float"; +@import "helpers/with-border"; +@import "helpers/bold"; +@import "helpers/align"; + +/* + * 4. Objects + * ---------- + * + * We want reusable modules that they could be applied repeatedly on different pages. This alignes with + * the DRY principle + * + */ + +@import "objects/form"; +@import "objects/form-fields"; +@import "objects/justify-columns"; +@import "objects/content"; +@import "objects/checkbox"; +@import "objects/avatar"; + +/* + * 5. Layout + * --------- + * + * Sometimes it happens you need to overwrite some components' behaviour. This should be an exception, and if you + * find yourself overwriting any component twice, we are probably doing wrong. + * + */ + + @import "layout/donations"; + @import "layout/post-donation"; + +/* + * 6. Vendors + * ---------- + * + * Any vendor styles, usually linked to jquery plugins or javascripts, should go here. + * + */ + +@import "vendor/select2"; +@import "vendor/slidebars"; +@import "vendor/tipsy"; +@import "vendor/pikaday"; + +/* + +Prefer components over page level styles, for large term maintenability reasons mostly. We want our front end to +feel like library code. We should start to break files like this into smaller more focused files like +form.scss, button.scss, tags.scss, dropdown.css, etc. + +And this is important, make a tatoo in your arm if you prefer, but follow this rule: +DON'T USE #ID FOR STYLING. DON'T. JUST DON'T. -$main_color: #7C9200; /* main green */ -$secondary_color: #565631; /* dark green */ -$tertiary_color: #E4D6B3; -$light_background: #EBE8CC; +*/ /* colors */ body { background: #F3E9D1; } diff --git a/app/assets/stylesheets/base/.keep b/app/assets/stylesheets/base/.keep new file mode 100644 index 0000000..e69de29 diff --git a/app/assets/stylesheets/base/_base.scss b/app/assets/stylesheets/base/_base.scss new file mode 100644 index 0000000..f0ccb4b --- /dev/null +++ b/app/assets/stylesheets/base/_base.scss @@ -0,0 +1,23 @@ +/* + * Base styles for html pages + * + */ + +html, body { + height: 100%; + min-height: 590px; +} + +html { + font-size: 62.5%; +} + +body { + background: #F3E9D1; + color: $secondary-color; + font-family: 'Raleway', Arial, sans-serif; + font-size: 1.6rem; + font-weight: 400; + overflow-y: scroll; + overflow: hidden; +} \ No newline at end of file diff --git a/app/assets/stylesheets/base/_fonts.scss b/app/assets/stylesheets/base/_fonts.scss new file mode 100644 index 0000000..482e710 --- /dev/null +++ b/app/assets/stylesheets/base/_fonts.scss @@ -0,0 +1,2 @@ +@import "http://fonts.googleapis.com/css?family=Raleway:400,700"; +@import "//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"; \ No newline at end of file diff --git a/app/assets/stylesheets/base/_label.scss b/app/assets/stylesheets/base/_label.scss new file mode 100644 index 0000000..14dc70c --- /dev/null +++ b/app/assets/stylesheets/base/_label.scss @@ -0,0 +1,13 @@ +/* + * + * Label + * ----- + * + * Default label styles. + * + */ + +label { + cursor: pointer; + display: inline-block; +} \ No newline at end of file diff --git a/app/assets/stylesheets/base/_links.scss b/app/assets/stylesheets/base/_links.scss new file mode 100644 index 0000000..47aa214 --- /dev/null +++ b/app/assets/stylesheets/base/_links.scss @@ -0,0 +1,8 @@ +/* + * Base styles for regular links + * + */ + +a { + color: $main_color; +} \ No newline at end of file diff --git a/app/assets/stylesheets/base/_lists.scss b/app/assets/stylesheets/base/_lists.scss new file mode 100644 index 0000000..73d41a0 --- /dev/null +++ b/app/assets/stylesheets/base/_lists.scss @@ -0,0 +1,13 @@ +/* + * Base styles for regular lists + * + */ + +ul, li { + font-size: 100%; + line-height: 100%; +} + +.no-bullet { + list-style: none; +} \ No newline at end of file diff --git a/app/assets/stylesheets/core/_functions.scss b/app/assets/stylesheets/core/_functions.scss new file mode 100644 index 0000000..a1f55e6 --- /dev/null +++ b/app/assets/stylesheets/core/_functions.scss @@ -0,0 +1,27 @@ +/* + +Functions +--------- + +Calculations used by other SCSS files. If you need to DRY-up some CSS properties +put that code in `core/_mixins.scss`, this is only for functions. + +*/ + +@function number-to-width-unit($num) { + $count: 1; + + @each $word in five, ten, fifteen, twenty, + twentyfive, thirty, thirtyfive, forty, fortyfive, + fifty, fiftyfive, sixty, sixtyfive, seventy, seventyfive, + eighty, eightyfive, ninety, ninetyfive, hundred { + @if ($count == $num) { @return $word; } + $count: $count + 1; + } + + @return "invalid"; +} + +@function width-unit-to-percent($num) { + @return ($num * 5%); +} diff --git a/app/assets/stylesheets/core/_mixins.scss b/app/assets/stylesheets/core/_mixins.scss new file mode 100644 index 0000000..f31a017 --- /dev/null +++ b/app/assets/stylesheets/core/_mixins.scss @@ -0,0 +1,83 @@ + /* + +Mixins +------ + +Chunks of code to help us along the way. If you need to perform some calculation +place that in the `generic/_functions.scss` file, mixins is more for CSS +properties. + +*/ + +@mixin size($width, $height: $width) { + @if $width != false { width: $width; } + @if $height != false { height: $height; } +} + +@mixin position($top, $right, $bottom, $left) { + position: absolute; + @if $top != false { top: $top; } + @if $right != false { right: $right; } + @if $bottom != false { bottom: $bottom; } + @if $left != false { left: $left; } +} + +@mixin placeholder($color) { + &::-webkit-input-placeholder { color: $color; } + &:-moz-placeholder { color: $color; } + &:focus::-webkit-input-placeholder { color: lighten($color, 20%); } + &:focus:-moz-placeholder { color: lighten($color, 20%); } +} + +@mixin ellipsis { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + word-wrap: normal; +} + +@mixin keyframes( $animationName ) { + @-webkit-keyframes $animationName { + @content; + } + @-moz-keyframes $animationName { + @content; + } + @-o-keyframes $animationName { + @content; + } + @keyframes $animationName { + @content; + } +} + +/* +* @include triangle within a pseudo element and add positioning properties (ie. top, left) +* $direction: up, down, left, right +*/ +@mixin triangle($direction, $size: 8px, $color: #222){ + content: ''; + display: block; + position: absolute; + height: 0; width: 0; + @if ($direction == 'up'){ + border-bottom: $size solid $color; + border-left: $size solid transparent; + border-right: $size solid transparent; + } + @else if ($direction == 'down'){ + border-top: $size solid $color; + border-left: $size solid transparent; + border-right: $size solid transparent; + } + @else if ($direction == 'left'){ + border-top: $size solid transparent; + border-bottom: $size solid transparent; + border-right: $size solid $color; + } + @else if ($direction == 'right'){ + border-top: $size solid transparent; + border-bottom: $size solid transparent; + border-left: $size solid $color; + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/core/_reset.scss b/app/assets/stylesheets/core/_reset.scss new file mode 100644 index 0000000..458eea1 --- /dev/null +++ b/app/assets/stylesheets/core/_reset.scss @@ -0,0 +1,427 @@ +/*! normalize.css v3.0.2 | MIT License | git.io/normalize */ + +/** + * 1. Set default font family to sans-serif. + * 2. Prevent iOS text size adjust after orientation change, without disabling + * user zoom. + */ + +html { + font-family: sans-serif; /* 1 */ + -ms-text-size-adjust: 100%; /* 2 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/** + * Remove default margin. + */ + +body { + margin: 0; +} + +/* HTML5 display definitions + ========================================================================== */ + +/** + * Correct `block` display not defined for any HTML5 element in IE 8/9. + * Correct `block` display not defined for `details` or `summary` in IE 10/11 + * and Firefox. + * Correct `block` display not defined for `main` in IE 11. + */ + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +menu, +nav, +section, +summary { + display: block; +} + +/** + * 1. Correct `inline-block` display not defined in IE 8/9. + * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. + */ + +audio, +canvas, +progress, +video { + display: inline-block; /* 1 */ + vertical-align: baseline; /* 2 */ +} + +/** + * Prevent modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Address `[hidden]` styling not present in IE 8/9/10. + * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. + */ + +[hidden], +template { + display: none; +} + +/* Links + ========================================================================== */ + +/** + * Remove the gray background color from active links in IE 10. + */ + +a { + background-color: transparent; +} + +/** + * Improve readability when focused and also mouse hovered in all browsers. + */ + +a:active, +a:hover { + outline: 0; +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Address styling not present in IE 8/9/10/11, Safari, and Chrome. + */ + +abbr[title] { + border-bottom: 1px dotted; +} + +/** + * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. + */ + +b, +strong { + font-weight: bold; +} + +/** + * Address styling not present in Safari and Chrome. + */ + +dfn { + font-style: italic; +} + +/** + * Address variable `h1` font-size and margin within `section` and `article` + * contexts in Firefox 4+, Safari, and Chrome. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/** + * Address styling not present in IE 8/9. + */ + +mark { + background: #ff0; + color: #000; +} + +/** + * Address inconsistent and variable font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` affecting `line-height` in all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove border when inside `a` element in IE 8/9/10. + */ + +img { + border: 0; +} + +/** + * Correct overflow not hidden in IE 9/10/11. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* Grouping content + ========================================================================== */ + +/** + * Address margin not present in IE 8/9 and Safari. + */ + +figure { + margin: 1em 40px; +} + +/** + * Address differences between Firefox and other browsers. + */ + +hr { + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; +} + +/** + * Contain overflow in all browsers. + */ + +pre { + overflow: auto; +} + +/** + * Address odd `em`-unit font size rendering in all browsers. + */ + +code, +kbd, +pre, +samp { + font-family: monospace, monospace; + font-size: 1em; +} + +/* Forms + ========================================================================== */ + +/** + * Known limitation: by default, Chrome and Safari on OS X allow very limited + * styling of `select`, unless a `border` property is set. + */ + +/** + * 1. Correct color not being inherited. + * Known issue: affects color of disabled elements. + * 2. Correct font properties not being inherited. + * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. + */ + +button, +input, +optgroup, +select, +textarea { + color: inherit; /* 1 */ + font: inherit; /* 2 */ + margin: 0; /* 3 */ +} + +/** + * Address `overflow` set to `hidden` in IE 8/9/10/11. + */ + +button { + overflow: visible; +} + +/** + * Address inconsistent `text-transform` inheritance for `button` and `select`. + * All other form control elements do not inherit `text-transform` values. + * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. + * Correct `select` style inheritance in Firefox. + */ + +button, +select { + text-transform: none; +} + +/** + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Correct inability to style clickable `input` types in iOS. + * 3. Improve usability and consistency of cursor style between image-type + * `input` and others. + */ + +button, +html input[type="button"], /* 1 */ +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; /* 2 */ + cursor: pointer; /* 3 */ +} + +/** + * Re-set default cursor for disabled elements. + */ + +button[disabled], +html input[disabled] { + cursor: default; +} + +/** + * Remove inner padding and border in Firefox 4+. + */ + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +/** + * Address Firefox 4+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ + +input { + line-height: normal; +} + +/** + * It's recommended that you don't attempt to style these elements. + * Firefox's implementation doesn't respect box-sizing, padding, or width. + * + * 1. Address box sizing set to `content-box` in IE 8/9/10. + * 2. Remove excess padding in IE 8/9/10. + */ + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Fix the cursor style for Chrome's increment/decrement buttons. For certain + * `font-size` values of the `input`, it causes the cursor style of the + * decrement button to change from `default` to `text`. + */ + +input[type="number"]::-webkit-inner-spin-button, +input[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Address `appearance` set to `searchfield` in Safari and Chrome. + * 2. Address `box-sizing` set to `border-box` in Safari and Chrome + * (include `-moz` to future-proof). + */ + +input[type="search"] { + -webkit-appearance: textfield; /* 1 */ + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; /* 2 */ + box-sizing: content-box; +} + +/** + * Remove inner padding and search cancel button in Safari and Chrome on OS X. + * Safari (but not Chrome) clips the cancel button when the search input has + * padding (and `textfield` appearance). + */ + +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * Define consistent border, margin, and padding. + */ + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/** + * 1. Correct `color` not being inherited in IE 8/9/10/11. + * 2. Remove padding so people aren't caught out if they zero out fieldsets. + */ + +legend { + border: 0; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Remove default vertical scrollbar in IE 8/9/10/11. + */ + +textarea { + overflow: auto; +} + +/** + * Don't inherit the `font-weight` (applied by a rule above). + * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. + */ + +optgroup { + font-weight: bold; +} + +/* Tables + ========================================================================== */ + +/** + * Remove most spacing between table cells. + */ + +table { + border-collapse: collapse; + border-spacing: 0; +} + +td, +th { + padding: 0; +} diff --git a/app/assets/stylesheets/core/_settings.scss b/app/assets/stylesheets/core/_settings.scss new file mode 100644 index 0000000..129fac8 --- /dev/null +++ b/app/assets/stylesheets/core/_settings.scss @@ -0,0 +1,32 @@ +/* + +Put here all variables the app is going to use. + +*/ + +/* + * + * Colors + * ------ + * + */ + +$main_color: #7C9200; /* main green */ +$secondary_color: #565631; /* dark green */ +$tertiary_color: #E4D6B3; + +$light_background: #EBE8CC; + +$white: #fff; +$caqui: #DFDFB6; +$gray: #B0AEA5; + +/* + * + * Fonts + * ----- + * + */ + +$font-base: 'Raleway', Arial, sans-serif; +$font-form: Arial, sans-serif; \ No newline at end of file diff --git a/app/assets/stylesheets/helpers/.keep b/app/assets/stylesheets/helpers/.keep new file mode 100644 index 0000000..e69de29 diff --git a/app/assets/stylesheets/helpers/_align.scss b/app/assets/stylesheets/helpers/_align.scss new file mode 100644 index 0000000..b53b15f --- /dev/null +++ b/app/assets/stylesheets/helpers/_align.scss @@ -0,0 +1,11 @@ +.align-center { + text-align: center; +} + +.align-right { + text-align: right; +} + +.align-left { + text-align: left; +} \ No newline at end of file diff --git a/app/assets/stylesheets/helpers/_bold.scss b/app/assets/stylesheets/helpers/_bold.scss new file mode 100644 index 0000000..26fe63d --- /dev/null +++ b/app/assets/stylesheets/helpers/_bold.scss @@ -0,0 +1,3 @@ +.bold { + font-weight: bold; +} \ No newline at end of file diff --git a/app/assets/stylesheets/helpers/_clearfix.scss b/app/assets/stylesheets/helpers/_clearfix.scss new file mode 100644 index 0000000..b5a5bd1 --- /dev/null +++ b/app/assets/stylesheets/helpers/_clearfix.scss @@ -0,0 +1,17 @@ +/* + +Clear floats easily. Put this class in the parent of floated children and keep pushing. + +*/ + +.clearfix, %clearfix { + + &:after, &:before { + content: ''; + display: table; + } + + &:after { + clear: both; + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/helpers/_colors.scss b/app/assets/stylesheets/helpers/_colors.scss new file mode 100644 index 0000000..fc24f32 --- /dev/null +++ b/app/assets/stylesheets/helpers/_colors.scss @@ -0,0 +1,12 @@ +/* + +Colors +------ + +Use this helper to change the default color text. + +*/ + +.main-color { + color: $main-color; +} \ No newline at end of file diff --git a/app/assets/stylesheets/helpers/_float.scss b/app/assets/stylesheets/helpers/_float.scss new file mode 100644 index 0000000..a8cf125 --- /dev/null +++ b/app/assets/stylesheets/helpers/_float.scss @@ -0,0 +1,11 @@ +.float-left { + float: left; +} + +.float-right { + float: right; +} + +.float-none { + float: none; +} \ No newline at end of file diff --git a/app/assets/stylesheets/helpers/_font-sizes.scss b/app/assets/stylesheets/helpers/_font-sizes.scss new file mode 100644 index 0000000..b4c8492 --- /dev/null +++ b/app/assets/stylesheets/helpers/_font-sizes.scss @@ -0,0 +1,14 @@ +/* + +Font size helpers +----------------- + +Use this to modify the default font size of an element. + +*/ + +@for $i from 10 through 20 { + .s#{$i} { + font-size: #{$i}px; + } +} diff --git a/app/assets/stylesheets/helpers/_is-hidden.scss b/app/assets/stylesheets/helpers/_is-hidden.scss new file mode 100644 index 0000000..8910a64 --- /dev/null +++ b/app/assets/stylesheets/helpers/_is-hidden.scss @@ -0,0 +1,12 @@ +/* + +Hidden +------ + +Use this helper to hide an element form the dom, usually for js plugin use. + +*/ + +.is-hidden { + display: none; +} \ No newline at end of file diff --git a/app/assets/stylesheets/helpers/_layout.scss b/app/assets/stylesheets/helpers/_layout.scss new file mode 100644 index 0000000..313e0b1 --- /dev/null +++ b/app/assets/stylesheets/helpers/_layout.scss @@ -0,0 +1,33 @@ +/* + * + * Layout + * ------ + * + * Utility class for change display property. + * + */ + +.inline { + display: inline; +} + +.block { + display: block !important; +} + +.inline-block { + display: inline-block; +} + +.table { + display: table; +} + +.table-fixed { + display: table; + table-layout: fixed; +} + +.table-cell { + display: table-cell; +} \ No newline at end of file diff --git a/app/assets/stylesheets/helpers/_percent.scss b/app/assets/stylesheets/helpers/_percent.scss new file mode 100644 index 0000000..cadfc29 --- /dev/null +++ b/app/assets/stylesheets/helpers/_percent.scss @@ -0,0 +1,19 @@ +/* + * + * Percent + * ------- + * + * Width in percents for all elements. Supported values are 5% to 100% in steps of 5%. + * + *
5% width
+ *
30% width
+ * + */ + +.percent { + @for $i from 1 through 20 { + &.#{number-to-width-unit($i)} { + width: width-unit-to-percent($i) !important; + } + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/helpers/_white-spacing.scss b/app/assets/stylesheets/helpers/_white-spacing.scss index 10b9d43..9cfe404 100644 --- a/app/assets/stylesheets/helpers/_white-spacing.scss +++ b/app/assets/stylesheets/helpers/_white-spacing.scss @@ -1,4 +1,5 @@ /* Margin and padding utilities. These utilities use a shorthand naming convention: + Shorthand Description --------- ----------- m Margin @@ -14,72 +15,97 @@ n Negative (margin only) 2 default 10px 3 default 20px 4 default 30px + In some point should be good to base these var in relative font sizes (rem). + */ -.m0 { margin: 0 !important;} -.mt0 { margin-top: 0 !important;} -.mr0 { margin-right: 0 !important;} -.mb0 { margin-bottom: 0 !important;} -.ml0 { margin-left: 0 !important;} - -.m1 { margin: 5px !important; } -.mt1 { margin-top: 5px !important; } -.mr1 { margin-right: 5px !important; } -.mb1 { margin-bottom: 5px !important; } -.ml1 { margin-left: 5px !important; } - -.m2 { margin: 10px !important; } -.mt2 { margin-top: 10px !important; } -.mr2 { margin-right: 10px !important; } -.mb2 { margin-bottom: 10px !important; } -.ml2 { margin-left: 10px !important; } - -.m3 { margin: 20px !important; } -.mt3 { margin-top: 20px !important; } -.mr3 { margin-right: 20px !important; } -.mb3 { margin-bottom: 20px !important; } -.ml3 { margin-left: 20px !important; } - -.m4 { margin: 30px !important; } -.mt4 { margin-top: 30px !important; } -.mr4 { margin-right: 30px!important; } -.mb4 { margin-bottom: 30px!important; } -.ml4 { margin-left: 30px!important; } - -.mxn1 { margin-left: 5px!important; margin-right: 5px!important; } -.mxn2 { margin-left: -10px!important; margin-right: -10px!important; } -.mxn3 { margin-left: -20px!important; margin-right: -20px!important; } -.mxn4 { margin-left: -30px!important; margin-right: -30px!important; } - -.mx-auto { margin-left: auto!important; margin-right: auto!important; } - -.p0 { padding: 0 !important; } -.pl0 { padding-left: 0 !important; } -.pr0 { padding-right: 0 !important; } -.py0 { padding-top: 0 !important; padding-bottom: 0 !important; } -.px0 { padding-left: 0 !important; padding-right: 0 !important; } - -.p1 { padding: 5px !important; } -.pl1 { padding-left: 5px !important; } -.pr1 { padding-right: 5px !important; } -.py1 { padding-top: 5px !important; padding-bottom: 5px !important; } -.px1 { padding-left: 5px !important; padding-right: 5px !important; } - -.p2 { padding: 10px !important; } -.pl2 { padding-left: 10px !important; } -.pr2 { padding-right: 10px !important; } -.py2 { padding-top: 10px !important; padding-bottom: 10px !important; } -.px2 { padding-left: 10px !important; padding-right: 10px !important; } - -.p3 { padding: 20px !important; } -.pl3 { padding-left: 20px !important; } -.pr3 { padding-right: 20px !important; } -.py3 { padding-top: 20px !important; padding-bottom: 20px !important; } -.px3 { padding-left: 20px !important; padding-right: 20px !important; } - -.p4 { padding: 30px !important; } -.pl4 { padding-left: 30px !important; } -.pr4 { padding-right: 30px !important; } -.py4 { padding-top: 30px !important; padding-bottom: 30px !important; } -.px4 { padding-left: 30px !important; padding-right: 30px !important; } \ No newline at end of file +.m0 { margin: 0; } +.mt0 { margin-top: 0; } +.mr0 { margin-right: 0; } +.mb0 { margin-bottom: 0; } +.ml0 { margin-left: 0; } + +.m1 { margin: 5px; } +.mt1 { margin-top: 5px; } +.mr1 { margin-right: 5px; } +.mb1 { margin-bottom: 5px; } +.ml1 { margin-left: 5px; } + +.m2 { margin: 10px; } +.mt2 { margin-top: 10px; } +.mr2 { margin-right: 10px; } +.mb2 { margin-bottom: 10px; } +.ml2 { margin-left: 10px; } + +.m3 { margin: 20px; } +.mt3 { margin-top: 20px; } +.mr3 { margin-right: 20px; } +.mb3 { margin-bottom: 20px; } +.ml3 { margin-left: 20px; } + +.m4 { margin: 30px; } +.mt4 { margin-top: 30px; } +.mr4 { margin-right: 30px; } +.mb4 { margin-bottom: 30px; } +.ml4 { margin-left: 30px; } + +.m5 { margin: 40px; } +.mt5 { margin-top: 40px; } +.mr5 { margin-right: 40px; } +.mb5 { margin-bottom: 40px; } +.ml5 { margin-left: 40px; } + +.m6 { margin: 50px; } +.mt6 { margin-top: 50px; } +.mr6 { margin-right: 50px; } +.mb6 { margin-bottom: 50px; } +.ml6 { margin-left: 50px; } + +.mxn1 { margin-left: 5px; margin-right: 5px; } +.mxn2 { margin-left: -10px; margin-right: -10px; } +.mxn3 { margin-left: -20px; margin-right: -20px; } +.mxn4 { margin-left: -30px; margin-right: -30px; } + +.mx-auto { margin-left: auto; margin-right: auto; } + +.p0 { padding: 0; } +.pl0 { padding-left: 0; } +.pr0 { padding-right: 0; } +.pt0 { padding-top: 0; } +.pb0 { padding-bottom:0; } +.py0 { padding-top: 0; padding-bottom: 0; } +.px0 { padding-left: 0; padding-right: 0; } + +.p1 { padding: 5px; } +.pl1 { padding-left: 5px; } +.pr1 { padding-right: 5px; } +.pt1 { padding-top: 5px; } +.pb1 { padding-bottom:5px; } +.py1 { padding-top: 5px; padding-bottom: 5px; } +.px1 { padding-left: 5px; padding-right: 5px; } + +.p2 { padding: 10px; } +.pl2 { padding-left: 10px; } +.pr2 { padding-right: 10px; } +.pt2 { padding-top: 10px; } +.pb2 { padding-bottom:10px; } +.py2 { padding-top: 10px; padding-bottom: 10px; } +.px2 { padding-left: 10px; padding-right: 10px; } + +.p3 { padding: 20px; } +.pl3 { padding-left: 20px; } +.pr3 { padding-right: 20px; } +.pt3 { padding-top: 20px; } +.pb3 { padding-bottom:20px; } +.py3 { padding-top: 20px; padding-bottom: 20px; } +.px3 { padding-left: 20px; padding-right: 20px; } + +.p4 { padding: 30px; } +.pl4 { padding-left: 30px; } +.pr4 { padding-right: 30px; } +.pt4 { padding-top: 30px; } +.pb4 { padding-bottom:30px; } +.py4 { padding-top: 30px; padding-bottom: 30px; } +.px4 { padding-left: 30px; padding-right: 30px; } + diff --git a/app/assets/stylesheets/helpers/_with-border.scss b/app/assets/stylesheets/helpers/_with-border.scss new file mode 100644 index 0000000..ad85066 --- /dev/null +++ b/app/assets/stylesheets/helpers/_with-border.scss @@ -0,0 +1,3 @@ +.with-border { + border-bottom: 1px solid #D7C8A3; +} \ No newline at end of file diff --git a/app/assets/stylesheets/layout/.keep b/app/assets/stylesheets/layout/.keep new file mode 100644 index 0000000..e69de29 diff --git a/app/assets/stylesheets/layout/_donations.scss b/app/assets/stylesheets/layout/_donations.scss new file mode 100644 index 0000000..4cb20a0 --- /dev/null +++ b/app/assets/stylesheets/layout/_donations.scss @@ -0,0 +1,25 @@ +/* + * + * Donation object + * --------------- + * + * The holder object list of donations + * + */ + +.donations-holder, +.donation-details { + width: 700px; +} + +.donation-amount { + width: 80px; +} + +.donation-date { + width: 120px; +} + +.donation-details { + display: none; +} \ No newline at end of file diff --git a/app/assets/stylesheets/layout/_post-donation.scss b/app/assets/stylesheets/layout/_post-donation.scss new file mode 100644 index 0000000..1e8e697 --- /dev/null +++ b/app/assets/stylesheets/layout/_post-donation.scss @@ -0,0 +1,70 @@ +.pd-list { + margin-bottom: 75px; +} + +.content-left-number { + width: 30px; + height: 30px; + border-radius: 50%; + background: #E7E0BC; + display: inline-block; + text-align: center; + line-height: 30px; + color: white; + font-size: 1.6rem; +} + +.pd-content-right { + width: calc(100% - 50px); +} + +.pd-holder-border { + position: relative; + + &:after { + content: ''; + display: inline-block; + height: calc(100% - 32px); + width: 2px; + position: absolute; + top: 32px; + left: 15px; + background-color: #E9E6C8; + } +} + +.pd-date { + color: #b0aea5; + font-size: 1rem; + margin-left: 5px; + position: relative; + top: -1rem; +} + +.pd-user { + color: $main_color; + display: inline-block; + line-height: 32px; + vertical-align: top; +} + +.pd-content-right-container { + width: 90%; + margin-left: 45px; +} + +.pd-choise { + background-color: #CCCCCC; + width: 100%; + box-sizing: border-box; + padding: 1.6rem; + color: #949494; +} + +.pd-remind { + line-height: 20px; +} + +.button-container { + text-align: center; +} diff --git a/app/assets/stylesheets/objects/.keep b/app/assets/stylesheets/objects/.keep new file mode 100644 index 0000000..e69de29 diff --git a/app/assets/stylesheets/objects/_avatar.scss b/app/assets/stylesheets/objects/_avatar.scss new file mode 100644 index 0000000..545449f --- /dev/null +++ b/app/assets/stylesheets/objects/_avatar.scss @@ -0,0 +1,23 @@ +.avatar { + display: inline-block; + height: auto; + + &.is-small { + width: 32px; + } + + &.is-medium { + width: 48px; + } + + &.is-large { + width: 72px; + } +} + +.avatar img { + border-radius: 3px; + display: block; + max-width: 100%; + width: 100%; +} \ No newline at end of file diff --git a/app/assets/stylesheets/objects/_checkbox.scss b/app/assets/stylesheets/objects/_checkbox.scss new file mode 100644 index 0000000..26d6ff0 --- /dev/null +++ b/app/assets/stylesheets/objects/_checkbox.scss @@ -0,0 +1,46 @@ +.field-checkbox.is-fancy { + display: inline-block; + position: relative; + vertical-align: top; + width: 20px; +} + +.field-checkbox.is-fancy label { + width: 20px; + height: 20px; + cursor: pointer; + position: absolute; + top: 0; + left: 0; + background-color: $white; + border-radius: 4px; + box-shadow: 0 0 0 1px $main_color; +} + +.field-checkbox.is-fancy label:hover:after { + opacity: 0.6; +} + +.field-checkbox.is-fancy input[type=checkbox] { + display: none; + visibility: hidden; +} + +.field-checkbox.is-fancy input[type=checkbox]:checked + label { + background: $white; + box-shadow: 0 0 0 1px $main_color; +} + +.field-checkbox.is-fancy input[type=checkbox]:checked + label:after { + background: transparent; + border: 4px solid $main_color; + border-right: none; + border-top: none; + content: ''; + height: 5px; + left: 4px; + position: absolute; + top: 4px; + transform: rotate(-50deg); + width: 9px; +} diff --git a/app/assets/stylesheets/objects/_content.scss b/app/assets/stylesheets/objects/_content.scss new file mode 100644 index 0000000..92957d7 --- /dev/null +++ b/app/assets/stylesheets/objects/_content.scss @@ -0,0 +1,25 @@ +/* + +Content +------- + +This object is the column holding the content of the page. There are a few flavours. + +*/ + + +.content-full { + +} + +.content-big { + width: 710px; + margin-left: auto; + margin-right: auto; + padding-left: 20px; + padding-right: 20px; +} + +.content-medium { + +} \ No newline at end of file diff --git a/app/assets/stylesheets/objects/_form-fields.scss b/app/assets/stylesheets/objects/_form-fields.scss new file mode 100644 index 0000000..fe55216 --- /dev/null +++ b/app/assets/stylesheets/objects/_form-fields.scss @@ -0,0 +1,119 @@ +/* + * + * Form fields + * ----------- + * + * Put here any styles applied to form elements. Try to avoid styling generic elements, first option + * is to create a class always + * + */ + +.field-text, .field-textarea { + @include placeholder(#AEAE9E); + border: 1px dashed $main_color; + box-sizing: border-box; + font-family: $font-form; + font-size: 12px; + line-height: 1.5em; + padding: 8px; + + &:focus { + outline: none; + box-shadow: 0 0 2px $main_color; + } + + &:disabled { + cursor: not-allowed; + opacity: 0.8; + } +} + +.field-textarea-huge { + padding: 1.5rem 1rem 6rem; +} + +/* Field select */ + +.field-select { + background-color: $caqui; + cursor: pointer; + display: inline-block; + max-width:100%; + overflow:hidden; + position: relative; + vertical-align: middle; +} + +.field-select:hover { + background-color: darken($caqui, 10%); +} + +.field-select select { + /* Remove select styling */ + appearance: none; + -webkit-appearance: none; + -moz-appearance: window; /* Ugly Firefox way of doing it */ + background:none; + border: none; + color: $secondary_color; + cursor: pointer; + font-size: 12px; + line-height: 1.5em; + padding: 9px 14px; + /* Make sure the select is wider than the container so we can clip the arrow */ + width:110%; + max-width:110%; + min-width:110%; +} + +.field-select select:focus { + outline: none; +} + +/* This hides focus around selected option in FF */ +.field-select select:-moz-focusring { + color: transparent; + text-shadow: 0 0 0 #000; +} + +/* This hides native dropdown button arrow in IE */ +.field-select select::-ms-expand { + display: none; +} + +.field-select.has-caret:after { + border-left: 5px solid transparent; + border-right: 5px solid transparent; + border-top: 5px solid #555; + content: ""; + height: 0; + pointer-events:none; + position: absolute; + right: 12px; + top: 50%; + transform: translateY(-50%); + width: 0; + z-index: 1; +} + +/** + * Field group + * ----------- + * + * For group of elements coupled + * + *
+ * + * + *
+ */ + +.field-group { + display: inline-table; +} + +.field-group .field-group-item { + display: table-cell; + margin:0; + vertical-align: middle; +} \ No newline at end of file diff --git a/app/assets/stylesheets/objects/_form.scss b/app/assets/stylesheets/objects/_form.scss new file mode 100644 index 0000000..ff3e103 --- /dev/null +++ b/app/assets/stylesheets/objects/_form.scss @@ -0,0 +1,43 @@ +/* + * + * Form layout + * ----------- + * + * Put here any styles applied to form layout. + * + */ + + +.form { + // TBD +} + + +.form-group { + @extend %clearfix; +} + +.form-label { + width: 100%; + + &.uppercase { + font-size: 11px; + text-transform: uppercase; + } +} + +.form-fields { + // TBD + + &.solid { + background-color: $caqui; + font-size: 12px; + line-height: 1.5em; + padding: 9px 14px; + } +} + +.form-actions { + border-top: 1px solid #D7C8A3; + padding: 20px 0; +} diff --git a/app/assets/stylesheets/objects/_justify-columns.scss b/app/assets/stylesheets/objects/_justify-columns.scss new file mode 100644 index 0000000..01691ad --- /dev/null +++ b/app/assets/stylesheets/objects/_justify-columns.scss @@ -0,0 +1,21 @@ +/** +* Use this object if you need a row where the elements need to be distibuted all along the width, +* no matter how many elements to be. If they don't fit, they goes to the next row. +*/ + +.justify-columns { + font-size: 0; /* To clean the spacing between inline-blocks */ + text-align: justify; +} + +.justify-columns:after { + content: ''; + display: inline-block; + vertical-align: middle; + width: 100%; +} + +.justify-item { + display: inline-block; + vertical-align: middle; +} diff --git a/app/assets/stylesheets/vendor/_pikaday.scss b/app/assets/stylesheets/vendor/_pikaday.scss new file mode 100755 index 0000000..d681a76 --- /dev/null +++ b/app/assets/stylesheets/vendor/_pikaday.scss @@ -0,0 +1,204 @@ +@charset "UTF-8"; + +/*! + * Pikaday + * Copyright © 2014 David Bushell | BSD & MIT license | http://dbushell.com/ + */ + +.pika-single { + z-index: 9999; + display: block; + position: relative; + color: #333; + background: #fff; + border: 1px solid #ccc; + border-bottom-color: #bbb; + font-family: $font-base; //"Helvetica Neue", Helvetica, Arial, sans-serif; +} + +/* +clear child float (pika-lendar), using the famous micro clearfix hack +http://nicolasgallagher.com/micro-clearfix-hack/ +*/ +.pika-single:before, +.pika-single:after { + content: " "; + display: table; +} +.pika-single:after { clear: both } +.pika-single { *zoom: 1 } + +.pika-single.is-hidden { + display: none; +} + +.pika-single.is-bound { + position: absolute; + box-shadow: 0 5px 15px -5px rgba(0,0,0,.5); +} + +.pika-lendar { + float: left; + width: 240px; + margin: 8px; +} + +.pika-title { + position: relative; + text-align: center; +} + +.pika-label { + display: inline-block; + *display: inline; + position: relative; + z-index: 9999; + overflow: hidden; + margin: 0; + padding: 5px 3px; + font-size: 14px; + line-height: 20px; + font-weight: bold; + background-color: #fff; +} +.pika-title select { + cursor: pointer; + position: absolute; + z-index: 9998; + margin: 0; + left: 0; + top: 5px; + filter: alpha(opacity=0); + opacity: 0; +} + +.pika-prev, +.pika-next { + display: block; + cursor: pointer; + position: relative; + outline: none; + border: 0; + padding: 0; + width: 20px; + height: 30px; + /* hide text using text-indent trick, using width value (it's enough) */ + text-indent: 20px; + white-space: nowrap; + overflow: hidden; + background-color: transparent; + background-position: center center; + background-repeat: no-repeat; + background-size: 75% 75%; + opacity: .5; + *position: absolute; + *top: 0; + margin: 0; +} + +.pika-prev:hover, +.pika-next:hover { + opacity: 1; +} + +.pika-prev, +.is-rtl .pika-next { + float: left; + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAUklEQVR42u3VMQoAIBADQf8Pgj+OD9hG2CtONJB2ymQkKe0HbwAP0xucDiQWARITIDEBEnMgMQ8S8+AqBIl6kKgHiXqQqAeJepBo/z38J/U0uAHlaBkBl9I4GwAAAABJRU5ErkJggg=='); + *left: 0; +} + +.pika-next, +.is-rtl .pika-prev { + float: right; + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAU0lEQVR42u3VOwoAMAgE0dwfAnNjU26bYkBCFGwfiL9VVWoO+BJ4Gf3gtsEKKoFBNTCoCAYVwaAiGNQGMUHMkjGbgjk2mIONuXo0nC8XnCf1JXgArVIZAQh5TKYAAAAASUVORK5CYII='); + *right: 0; +} + +.pika-prev.is-disabled, +.pika-next.is-disabled { + cursor: default; + opacity: .2; +} + +.pika-select { + display: inline-block; + *display: inline; +} + +.pika-table { + width: 100%; + border-collapse: collapse; + border-spacing: 0; + border: 0; +} + +.pika-table th, +.pika-table td { + width: 14.285714285714286%; + padding: 0; +} + +.pika-table th { + color: #999; + font-size: 12px; + line-height: 25px; + font-weight: bold; + text-align: center; +} + +.pika-button { + cursor: pointer; + display: block; + box-sizing: border-box; + -moz-box-sizing: border-box; + outline: none; + border: 0; + margin: 0; + width: 100%; + padding: 5px; + color: #666; + font-size: 12px; + line-height: 15px; + text-align: right; + background: #f5f5f5; +} + +.pika-week { + font-size: 11px; + color: #999; +} + +.is-today .pika-button { + color: $main_color; + font-weight: bold; +} + +.is-selected .pika-button { + color: #fff; + font-weight: bold; + background: $main_color; + box-shadow: inset 0 1px 3px darken($main_color, 10%); + border-radius: 3px; +} + +.is-disabled .pika-button { + pointer-events: none; + cursor: default; + color: #999; + opacity: .3; +} + +.pika-button:hover { + color: #fff !important; + background: $main_color !important; + box-shadow: none !important; + border-radius: 3px !important; +} + +/* styling for abbr */ +.pika-table abbr { + border-bottom: none; + cursor: help; +} + diff --git a/app/assets/stylesheets/vendor/_select2.scss b/app/assets/stylesheets/vendor/_select2.scss new file mode 100755 index 0000000..0a29024 --- /dev/null +++ b/app/assets/stylesheets/vendor/_select2.scss @@ -0,0 +1,778 @@ +/* +Version: 3.5.2 Timestamp: Sat Nov 1 14:43:36 EDT 2014 +*/ +.select2-container { + margin: 0; + position: relative; + display: inline-block; + /* inline-block for ie7 */ + zoom: 1; + *display: inline; + vertical-align: middle; +} + +.select2-container, +.select2-drop, +.select2-search, +.select2-search input { + /* + Force border-box so that % widths fit the parent + container without overlap because of margin/padding. + More Info : http://www.quirksmode.org/css/box.html + */ + -webkit-box-sizing: border-box; /* webkit */ + -moz-box-sizing: border-box; /* firefox */ + box-sizing: border-box; /* css3 */ +} + +.select2-container .select2-choice { + display: block; + height: 26px; + padding: 0 0 0 8px; + overflow: hidden; + position: relative; + + border: 1px solid #aaa; + white-space: nowrap; + line-height: 26px; + color: #444; + text-decoration: none; + + border-radius: 4px; + + background-clip: padding-box; + + -webkit-touch-callout: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + + background-color: #fff; + background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eee), color-stop(0.5, #fff)); + background-image: -webkit-linear-gradient(center bottom, #eee 0%, #fff 50%); + background-image: -moz-linear-gradient(center bottom, #eee 0%, #fff 50%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#eeeeee', GradientType = 0); + background-image: linear-gradient(to top, #eee 0%, #fff 50%); +} + +html[dir="rtl"] .select2-container .select2-choice { + padding: 0 8px 0 0; +} + +.select2-container.select2-drop-above .select2-choice { + border-bottom-color: #aaa; + + border-radius: 0 0 4px 4px; + + background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eee), color-stop(0.9, #fff)); + background-image: -webkit-linear-gradient(center bottom, #eee 0%, #fff 90%); + background-image: -moz-linear-gradient(center bottom, #eee 0%, #fff 90%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eeeeee', GradientType=0); + background-image: linear-gradient(to bottom, #eee 0%, #fff 90%); +} + +.select2-container.select2-allowclear .select2-choice .select2-chosen { + margin-right: 42px; +} + +.select2-container .select2-choice > .select2-chosen { + margin-right: 26px; + display: block; + overflow: hidden; + + white-space: nowrap; + + text-overflow: ellipsis; + float: none; + width: auto; +} + +html[dir="rtl"] .select2-container .select2-choice > .select2-chosen { + margin-left: 26px; + margin-right: 0; +} + +.select2-container .select2-choice abbr { + display: none; + width: 12px; + height: 12px; + position: absolute; + right: 24px; + top: 8px; + + font-size: 1px; + text-decoration: none; + + border: 0; + background: url('select2.png') right top no-repeat; + cursor: pointer; + outline: 0; +} + +.select2-container.select2-allowclear .select2-choice abbr { + display: inline-block; +} + +.select2-container .select2-choice abbr:hover { + background-position: right -11px; + cursor: pointer; +} + +.select2-drop-mask { + border: 0; + margin: 0; + padding: 0; + position: fixed; + left: 0; + top: 0; + min-height: 100%; + min-width: 100%; + height: auto; + width: auto; + opacity: 0; + z-index: 9998; + /* styles required for IE to work */ + background-color: #fff; + filter: alpha(opacity=0); +} + +.select2-drop { + width: 100%; + margin-top: -1px; + position: absolute; + z-index: 9999; + top: 100%; + + background: #fff; + color: #000; + border: 1px solid #aaa; + border-top: 0; + + border-radius: 0 0 4px 4px; + + -webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, .15); + box-shadow: 0 4px 5px rgba(0, 0, 0, .15); +} + +.select2-drop.select2-drop-above { + margin-top: 1px; + border-top: 1px solid #aaa; + border-bottom: 0; + + border-radius: 4px 4px 0 0; + + -webkit-box-shadow: 0 -4px 5px rgba(0, 0, 0, .15); + box-shadow: 0 -4px 5px rgba(0, 0, 0, .15); +} + +.select2-drop-active { + border: 1px solid #5897fb; + border-top: none; +} + +.select2-drop.select2-drop-above.select2-drop-active { + border-top: 1px solid #5897fb; +} + +.select2-drop-auto-width { + border-top: 1px solid #aaa; + width: auto; +} + +.select2-drop-auto-width .select2-search { + padding-top: 4px; +} + +.select2-container .select2-choice .select2-arrow { + display: inline-block; + width: 18px; + height: 100%; + position: absolute; + right: 0; + top: 0; + + border-left: 1px solid #aaa; + border-radius: 0 4px 4px 0; + + background-clip: padding-box; + + background: #ccc; + background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ccc), color-stop(0.6, #eee)); + background-image: -webkit-linear-gradient(center bottom, #ccc 0%, #eee 60%); + background-image: -moz-linear-gradient(center bottom, #ccc 0%, #eee 60%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#eeeeee', endColorstr = '#cccccc', GradientType = 0); + background-image: linear-gradient(to top, #ccc 0%, #eee 60%); +} + +html[dir="rtl"] .select2-container .select2-choice .select2-arrow { + left: 0; + right: auto; + + border-left: none; + border-right: 1px solid #aaa; + border-radius: 4px 0 0 4px; +} + +.select2-container .select2-choice .select2-arrow b { + display: block; + width: 100%; + height: 100%; + background: url('select2.png') no-repeat 0 1px; +} + +html[dir="rtl"] .select2-container .select2-choice .select2-arrow b { + background-position: 2px 1px; +} + +.select2-search { + display: inline-block; + width: 100%; + min-height: 26px; + margin: 0; + padding-left: 4px; + padding-right: 4px; + + position: relative; + z-index: 10000; + + white-space: nowrap; +} + +.select2-search input { + width: 100%; + height: auto !important; + min-height: 26px; + padding: 4px 20px 4px 5px; + margin: 0; + + outline: 0; + font-family: sans-serif; + font-size: 1em; + + border: 1px solid #aaa; + border-radius: 0; + + -webkit-box-shadow: none; + box-shadow: none; + + background: #fff url('select2.png') no-repeat 100% -22px; + background: url('select2.png') no-repeat 100% -22px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, #fff), color-stop(0.99, #eee)); + background: url('select2.png') no-repeat 100% -22px, -webkit-linear-gradient(center bottom, #fff 85%, #eee 99%); + background: url('select2.png') no-repeat 100% -22px, -moz-linear-gradient(center bottom, #fff 85%, #eee 99%); + background: url('select2.png') no-repeat 100% -22px, linear-gradient(to bottom, #fff 85%, #eee 99%) 0 0; +} + +html[dir="rtl"] .select2-search input { + padding: 4px 5px 4px 20px; + + background: #fff url('select2.png') no-repeat -37px -22px; + background: url('select2.png') no-repeat -37px -22px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, #fff), color-stop(0.99, #eee)); + background: url('select2.png') no-repeat -37px -22px, -webkit-linear-gradient(center bottom, #fff 85%, #eee 99%); + background: url('select2.png') no-repeat -37px -22px, -moz-linear-gradient(center bottom, #fff 85%, #eee 99%); + background: url('select2.png') no-repeat -37px -22px, linear-gradient(to bottom, #fff 85%, #eee 99%) 0 0; +} + +.select2-drop.select2-drop-above .select2-search input { + margin-top: 4px; +} + +.select2-search input.select2-active { + background: #fff url('select2-spinner.gif') no-repeat 100%; + background: url('select2-spinner.gif') no-repeat 100%, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, #fff), color-stop(0.99, #eee)); + background: url('select2-spinner.gif') no-repeat 100%, -webkit-linear-gradient(center bottom, #fff 85%, #eee 99%); + background: url('select2-spinner.gif') no-repeat 100%, -moz-linear-gradient(center bottom, #fff 85%, #eee 99%); + background: url('select2-spinner.gif') no-repeat 100%, linear-gradient(to bottom, #fff 85%, #eee 99%) 0 0; +} + +.select2-container-active .select2-choice, +.select2-container-active .select2-choices { + border: 1px solid #5897fb; + outline: none; + + -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .3); + box-shadow: 0 0 5px rgba(0, 0, 0, .3); +} + +.select2-dropdown-open .select2-choice { + border-bottom-color: transparent; + -webkit-box-shadow: 0 1px 0 #fff inset; + box-shadow: 0 1px 0 #fff inset; + + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + + background-color: #eee; + background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #fff), color-stop(0.5, #eee)); + background-image: -webkit-linear-gradient(center bottom, #fff 0%, #eee 50%); + background-image: -moz-linear-gradient(center bottom, #fff 0%, #eee 50%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#ffffff', GradientType=0); + background-image: linear-gradient(to top, #fff 0%, #eee 50%); +} + +.select2-dropdown-open.select2-drop-above .select2-choice, +.select2-dropdown-open.select2-drop-above .select2-choices { + border: 1px solid #5897fb; + border-top-color: transparent; + + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(0.5, #eee)); + background-image: -webkit-linear-gradient(center top, #fff 0%, #eee 50%); + background-image: -moz-linear-gradient(center top, #fff 0%, #eee 50%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#ffffff', GradientType=0); + background-image: linear-gradient(to bottom, #fff 0%, #eee 50%); +} + +.select2-dropdown-open .select2-choice .select2-arrow { + background: transparent; + border-left: none; + filter: none; +} +html[dir="rtl"] .select2-dropdown-open .select2-choice .select2-arrow { + border-right: none; +} + +.select2-dropdown-open .select2-choice .select2-arrow b { + background-position: -18px 1px; +} + +html[dir="rtl"] .select2-dropdown-open .select2-choice .select2-arrow b { + background-position: -16px 1px; +} + +.select2-hidden-accessible { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} + +/* results */ +.select2-results { + max-height: 200px; + padding: 0 0 0 4px; + margin: 4px 4px 4px 0; + position: relative; + overflow-x: hidden; + overflow-y: auto; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} + +html[dir="rtl"] .select2-results { + padding: 0 4px 0 0; + margin: 4px 0 4px 4px; +} + +.select2-results ul.select2-result-sub { + margin: 0; + padding-left: 0; +} + +.select2-results li { + list-style: none; + display: list-item; + background-image: none; +} + +.select2-results li.select2-result-with-children > .select2-result-label { + font-weight: bold; +} + +.select2-results .select2-result-label { + padding: 3px 7px 4px; + margin: 0; + cursor: pointer; + + min-height: 1em; + + -webkit-touch-callout: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.select2-results-dept-1 .select2-result-label { padding-left: 20px } +.select2-results-dept-2 .select2-result-label { padding-left: 40px } +.select2-results-dept-3 .select2-result-label { padding-left: 60px } +.select2-results-dept-4 .select2-result-label { padding-left: 80px } +.select2-results-dept-5 .select2-result-label { padding-left: 100px } +.select2-results-dept-6 .select2-result-label { padding-left: 110px } +.select2-results-dept-7 .select2-result-label { padding-left: 120px } + +.select2-results .select2-highlighted { + background: #3875d7; + color: #fff; +} + +.select2-results li em { + background: #feffde; + font-style: normal; +} + +.select2-results .select2-highlighted em { + background: transparent; +} + +.select2-results .select2-highlighted ul { + background: #fff; + color: #000; +} + +.select2-results .select2-no-results, +.select2-results .select2-searching, +.select2-results .select2-ajax-error, +.select2-results .select2-selection-limit { + background: #f4f4f4; + display: list-item; + padding-left: 5px; +} + +/* +disabled look for disabled choices in the results dropdown +*/ +.select2-results .select2-disabled.select2-highlighted { + color: #666; + background: #f4f4f4; + display: list-item; + cursor: default; +} +.select2-results .select2-disabled { + background: #f4f4f4; + display: list-item; + cursor: default; +} + +.select2-results .select2-selected { + display: none; +} + +.select2-more-results.select2-active { + background: #f4f4f4 url('select2-spinner.gif') no-repeat 100%; +} + +.select2-results .select2-ajax-error { + background: rgba(255, 50, 50, .2); +} + +.select2-more-results { + background: #f4f4f4; + display: list-item; +} + +/* disabled styles */ + +.select2-container.select2-container-disabled .select2-choice { + background-color: #f4f4f4; + background-image: none; + border: 1px solid #ddd; + cursor: default; +} + +.select2-container.select2-container-disabled .select2-choice .select2-arrow { + background-color: #f4f4f4; + background-image: none; + border-left: 0; +} + +.select2-container.select2-container-disabled .select2-choice abbr { + display: none; +} + + +/* multiselect */ + +.select2-container-multi .select2-choices { + height: auto !important; + height: 1%; + margin: 0; + padding: 0 5px 0 0; + position: relative; + + border: 1px solid #aaa; + cursor: text; + overflow: hidden; + + background-color: #fff; + background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(1%, #eee), color-stop(15%, #fff)); + background-image: -webkit-linear-gradient(top, #eee 1%, #fff 15%); + background-image: -moz-linear-gradient(top, #eee 1%, #fff 15%); + background-image: linear-gradient(to bottom, #eee 1%, #fff 15%); +} + +html[dir="rtl"] .select2-container-multi .select2-choices { + padding: 0 0 0 5px; +} + +.select2-locked { + padding: 3px 5px 3px 5px !important; +} + +.select2-container-multi .select2-choices { + min-height: 26px; +} + +.select2-container-multi.select2-container-active .select2-choices { + border: 1px solid #5897fb; + outline: none; + + -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .3); + box-shadow: 0 0 5px rgba(0, 0, 0, .3); +} +.select2-container-multi .select2-choices li { + float: left; + list-style: none; +} +html[dir="rtl"] .select2-container-multi .select2-choices li +{ + float: right; +} +.select2-container-multi .select2-choices .select2-search-field { + margin: 0; + padding: 0; + white-space: nowrap; +} + +.select2-container-multi .select2-choices .select2-search-field input { + padding: 5px; + margin: 1px 0; + + font-family: sans-serif; + font-size: 100%; + color: #666; + outline: 0; + border: 0; + -webkit-box-shadow: none; + box-shadow: none; + background: transparent !important; +} + +.select2-container-multi .select2-choices .select2-search-field input.select2-active { + background: #fff url('select2-spinner.gif') no-repeat 100% !important; +} + +.select2-default { + color: #999; +} + +.select2-container-multi .select2-choices .select2-search-choice { + padding: 3px 5px 3px 18px; + margin: 3px 0 3px 5px; + position: relative; + + line-height: 13px; + color: #333; + cursor: default; + border: 1px solid #aaaaaa; + + border-radius: 3px; + + -webkit-box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05); + box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05); + + background-clip: padding-box; + + -webkit-touch-callout: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + + background-color: #e4e4e4; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#f4f4f4', GradientType=0); + background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eee)); + background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%); + background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%); + background-image: linear-gradient(to bottom, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%); +} +html[dir="rtl"] .select2-container-multi .select2-choices .select2-search-choice +{ + margin: 3px 5px 3px 0; + padding: 3px 18px 3px 5px; +} +.select2-container-multi .select2-choices .select2-search-choice .select2-chosen { + cursor: default; +} +.select2-container-multi .select2-choices .select2-search-choice-focus { + background: #d4d4d4; +} + +.select2-search-choice-close { + display: block; + width: 12px; + height: 13px; + position: absolute; + right: 3px; + top: 4px; + + font-size: 1px; + outline: none; + background: url('select2.png') right top no-repeat; +} +html[dir="rtl"] .select2-search-choice-close { + right: auto; + left: 3px; +} + +.select2-container-multi .select2-search-choice-close { + left: 3px; +} + +html[dir="rtl"] .select2-container-multi .select2-search-choice-close { + left: auto; + right: 2px; +} + +.select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close:hover { + background-position: right -11px; +} +.select2-container-multi .select2-choices .select2-search-choice-focus .select2-search-choice-close { + background-position: right -11px; +} + +/* disabled styles */ +.select2-container-multi.select2-container-disabled .select2-choices { + background-color: #f4f4f4; + background-image: none; + border: 1px solid #ddd; + cursor: default; +} + +.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice { + padding: 3px 5px 3px 5px; + border: 1px solid #ddd; + background-image: none; + background-color: #f4f4f4; +} + +.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice .select2-search-choice-close { display: none; + background: none; +} +/* end multiselect */ + + +.select2-result-selectable .select2-match, +.select2-result-unselectable .select2-match { + text-decoration: underline; +} + +.select2-offscreen, .select2-offscreen:focus { + clip: rect(0 0 0 0) !important; + width: 1px !important; + height: 1px !important; + border: 0 !important; + margin: 0 !important; + padding: 0 !important; + overflow: hidden !important; + position: absolute !important; + outline: 0 !important; + left: 0px !important; + top: 0px !important; +} + +.select2-display-none { + display: none; +} + +.select2-measure-scrollbar { + position: absolute; + top: -10000px; + left: -10000px; + width: 100px; + height: 100px; + overflow: scroll; +} + +/* Retina-ize icons */ + +@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 2dppx) { + .select2-search input, + .select2-search-choice-close, + .select2-container .select2-choice abbr, + .select2-container .select2-choice .select2-arrow b { + background-image: url('select2x2.png') !important; + background-repeat: no-repeat !important; + background-size: 60px 40px !important; + } + + .select2-search input { + background-position: 100% -21px !important; + } +} + +/* Custom styles */ +.select2-container { + width: 540px; + font-family: Arial, sans-serif; + font-size: 12px; + + .select2-choice { + line-height: 34px; + height: 34px; + border: 1px dashed #7c9200; + border-radius: 0; + background-image: none; + + .select2-arrow { + display: none; + } + } +} + +.select2-default.select2-choice { + color: #AEAE9E; +} + +.select2-dropdown-open.select2-drop-above .select2-choice, +.select2-dropdown-open .select2-choice { + background-color: #fff; + background-image: none; + border: 1px dashed #7c9200; + border-radius: 0; + box-shadow: none; +} + +.select2-results { + padding: 0; + margin: 4px 0; +} + +.select2-results .select2-highlighted { + background: #7c9200 !important; +} + +.select2-drop-active { + border: 1px dashed #7c9200 !important; + border-top: none !important; +} + +.select2-search { + margin-bottom: 4px; +} + +.select2-search input { + font-family: Raleway; + font-size: 16px; + background: #fff url('select2.png') no-repeat 100% -22px; +} + +.select2-search input.select2-active { + background: #fff url('select2-spinner.gif') no-repeat 100%; +} + +.select2-container-active .select2-choice, +.select2-container-active .select2-choices { + -webkit-box-shadow: 0 0 2px $main_color; + box-shadow: 0 0 2px $main_color; +} + +.select2-container .select2-choice abbr { + right: 10px; +} + +.select2-container.select2-allowclear .select2-choice .select2-chosen { + margin-right: 10px; +} \ No newline at end of file diff --git a/app/assets/stylesheets/vendor/_slidebars.scss b/app/assets/stylesheets/vendor/_slidebars.scss new file mode 100644 index 0000000..c09b2d9 --- /dev/null +++ b/app/assets/stylesheets/vendor/_slidebars.scss @@ -0,0 +1,208 @@ +/* ----------------------------------- + * Slidebars + * Version 0.10.2 + * http://plugins.adchsm.me/slidebars/ + * + * Written by Adam Smith + * http://www.adchsm.me/ + * + * Released under MIT License + * http://plugins.adchsm.me/slidebars/license.txt + * + * ------------------- + * Slidebars CSS Index + * + * 001 - Box Model, Html & Body + * 002 - Site + * 003 - Slidebars + * 004 - Animation + * 005 - Helper Classes + * + * ---------------------------- + * 001 - Box Model, Html & Body + */ + +html, body, #sb-site, .sb-site-container, .sb-slidebar { + /* Set box model to prevent any user added margins or paddings from altering the widths or heights. */ + margin: 0; + padding: 0; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +html, body { + width: 100%; + overflow-x: hidden; /* Stops horizontal scrolling. */ +} + +html { + height: 100%; /* Site is as tall as device. */ +} + +body { + min-height: 100%; + height: auto; + position: relative; /* Required for static Slidebars to function properly. */ +} + +/* Site scroll locking - prevent site from scrolling when a Slidebar is open, except when static Slidebars are only available. */ +html.sb-scroll-lock.sb-active:not(.sb-static) { + overflow: hidden; +} + +/* ---------- + * 002 - Site + */ + +#sb-site, .sb-site-container { + /* You may now use class .sb-site-container instead of #sb-site and use your own id. However please make sure you don't set any of the following styles any differently on your id. */ + width: 100%; + position: relative; + z-index: 1; /* Site sits above Slidebars */ + background-color: #ffffff; /* Default background colour, overwrite this with your own css. I suggest moving your html or body background styling here. Making this transparent will allow the Slidebars beneath to be visible. */ +} + +/* --------------- + * 003 - Slidebars + */ + +.sb-slidebar { + height: 100%; + overflow-y: auto; /* Enable vertical scrolling on Slidebars when needed. */ + position: fixed; + top: 0; + z-index: 0; /* Slidebars sit behind sb-site. */ + display: none; /* Initially hide the Slidebars. Changed from visibility to display to allow -webkit-overflow-scrolling. */ + background-color: #222222; /* Default Slidebars background colour, overwrite this with your own css. */ + -webkit-transform: translate(0px); /* Fixes issues with translated and z-indexed elements on iOS 7. */ +} + +.sb-left { + left: 0; /* Set Slidebar to the left. */ +} + +.sb-right { + right: 0; /* Set Slidebar to the right. */ +} + +html.sb-static .sb-slidebar, +.sb-slidebar.sb-static { + position: absolute; /* Makes Slidebars scroll naturally with the site, and unfixes them for Android Browser < 3 and iOS < 5. */ +} + +.sb-slidebar.sb-active { + display: block; /* Makes Slidebars visibile when open. Changed from visibility to display to allow -webkit-overflow-scrolling. */ +} + +.sb-style-overlay { + z-index: 9999; /* Set z-index high to ensure it overlays any other site elements. */ +} + +.sb-momentum-scrolling { + -webkit-overflow-scrolling: touch; /* Adds native momentum scrolling for iOS & Android devices. */ +} + +/* Slidebar widths for browsers/devices that don't support media queries. */ + .sb-slidebar { + width: 30%; + } + + .sb-width-thin { + width: 15%; + } + + .sb-width-wide { + width: 45%; + } + +@media (max-width: 480px) { /* Slidebar widths on extra small screens. */ + .sb-slidebar { + width: 70%; + } + + .sb-width-thin { + width: 55%; + } + + .sb-width-wide { + width: 85%; + } +} + +@media (min-width: 481px) { /* Slidebar widths on small screens. */ + .sb-slidebar { + width: 55%; + } + + .sb-width-thin { + width: 40%; + } + + .sb-width-wide { + width: 70%; + } +} + +@media (min-width: 768px) { /* Slidebar widths on medium screens. */ + .sb-slidebar { + width: 40%; + } + + .sb-width-thin { + width: 25%; + } + + .sb-width-wide { + width: 55%; + } +} + +@media (min-width: 992px) { /* Slidebar widths on large screens. */ + .sb-slidebar { + width: 30%; + } + + .sb-width-thin { + width: 15%; + } + + .sb-width-wide { + width: 45%; + } +} + +@media (min-width: 1200px) { /* Slidebar widths on extra large screens. */ + .sb-slidebar { + width: 20%; + } + + .sb-width-thin { + width: 5%; + } + + .sb-width-wide { + width: 35%; + } +} + +/* --------------- + * 004 - Animation + */ + +.sb-slide, #sb-site, .sb-site-container, .sb-slidebar { + -webkit-transition: -webkit-transform 400ms ease; + -moz-transition: -moz-transform 400ms ease; + -o-transition: -o-transform 400ms ease; + transition: transform 400ms ease; + -webkit-transition-property: -webkit-transform, left, right; /* Add left/right for Android < 4.4. */ + -webkit-backface-visibility: hidden; /* Prevents flickering. This is non essential, and you may remove it if your having problems with fixed background images in Chrome. */ +} + +/* -------------------- + * 005 - Helper Classes + */ + +.sb-hide { + display: none; /* Optionally applied to control classes when Slidebars is disabled over a certain width. */ +} \ No newline at end of file diff --git a/app/assets/stylesheets/vendor/_tipsy.scss b/app/assets/stylesheets/vendor/_tipsy.scss new file mode 100644 index 0000000..337e9ba --- /dev/null +++ b/app/assets/stylesheets/vendor/_tipsy.scss @@ -0,0 +1,12 @@ +.tipsy { padding: 5px; font-size: 10px; position: absolute; z-index: 100000; } + .tipsy-inner { padding: 5px 8px 4px 8px; background-color: black; color: white; max-width: 200px; text-align: center; } + .tipsy-inner { border-radius: 3px; -moz-border-radius:3px; -webkit-border-radius:3px; } + .tipsy-arrow { position: absolute; background: url('../images/tipsy.gif') no-repeat top left; width: 9px; height: 5px; } + .tipsy-n .tipsy-arrow { top: 0; left: 50%; margin-left: -4px; } + .tipsy-nw .tipsy-arrow { top: 0; left: 10px; } + .tipsy-ne .tipsy-arrow { top: 0; right: 10px; } + .tipsy-s .tipsy-arrow { bottom: 0; left: 50%; margin-left: -4px; background-position: bottom left; } + .tipsy-sw .tipsy-arrow { bottom: 0; left: 10px; background-position: bottom left; } + .tipsy-se .tipsy-arrow { bottom: 0; right: 10px; background-position: bottom left; } + .tipsy-e .tipsy-arrow { top: 50%; margin-top: -4px; right: 0; width: 5px; height: 9px; background-position: top right; } + .tipsy-w .tipsy-arrow { top: 50%; margin-top: -4px; left: 0; width: 5px; height: 9px; } diff --git a/app/controllers/sandbox_controller.rb b/app/controllers/sandbox_controller.rb new file mode 100644 index 0000000..c00c04d --- /dev/null +++ b/app/controllers/sandbox_controller.rb @@ -0,0 +1,24 @@ +class SandboxController < ApplicationController + skip_filter :record_access + + def index + + end + + def show + if params[:template].index('.') # CVE-2014-0130 + render :action => "index" + elsif lookup_context.exists?("sandbox/#{params[:template]}") + if params[:template] == "index" + render :action => "index" + else + render "sandbox/#{params[:template]}" + end + + elsif lookup_context.exists?("sandbox/#{params[:template]}/index") + render "sandbox/#{params[:template]}/index" + else + render :action => "index" + end + end +end \ No newline at end of file diff --git a/app/views/sandbox/index.html.erb b/app/views/sandbox/index.html.erb new file mode 100644 index 0000000..0739a1f --- /dev/null +++ b/app/views/sandbox/index.html.erb @@ -0,0 +1,7 @@ +
+
+
+

Welcome to sandbox

+
+
+
diff --git a/app/views/sandbox/post-donation.html.erb b/app/views/sandbox/post-donation.html.erb new file mode 100644 index 0000000..4b6979d --- /dev/null +++ b/app/views/sandbox/post-donation.html.erb @@ -0,0 +1,52 @@ +
+
+

Great! Just two things before you are done:

+
    +
  • +
    + 1 +
    +
    +

    Tell why you have donated, that will make the most impact in your friends and recruit more donors for the project.

    +
    +
    + + Gema de Rus + + Gema de Rus donated 25€ to Wikipedia13.06.2013 +
    + +
    +
    + + +
    +
    +

    When we have issues and project activities, let the user choose them (also: select a friend who made you donate)

    +
    +
    +
    +
    +
    • +
  • +
    + 2 +
    +
    +

    Set up a reminder Since yours is a one-time donation, we recommend thinking about donating again in 6 months

    +
    + + + + + +
    +
    +
    • +
+ +
+ TrackDon +
+
+
\ No newline at end of file diff --git a/config/routes.rb b/config/routes.rb index 3d25bd1..16a18d3 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -1,6 +1,11 @@ Rails.application.routes.draw do root 'pages#root', as: :redirected_root + if Rails.env.development? + get '/sandbox' => 'sandbox#index' + get '/sandbox/*template' => 'sandbox#show' + end + scope "/:locale" do root 'pages#index' From c79c385f68d39c3a765f23cdab789debea4d4f68 Mon Sep 17 00:00:00 2001 From: gemaderus Date: Thu, 5 Mar 2015 21:36:07 +0100 Subject: [PATCH 2/2] Mockup ready. --- app/assets/stylesheets/application.scss | 4 +- app/assets/stylesheets/base/_links.scss | 15 + app/assets/stylesheets/core/_settings.scss | 1 - app/assets/stylesheets/helpers/_align.scss | 4 + app/assets/stylesheets/helpers/_flex.scss | 395 ++++++++++++++++++ .../stylesheets/helpers/_white-spacing.scss | 4 + .../stylesheets/layout/_home-donation.scss | 105 +++++ app/assets/stylesheets/objects/_avatar.scss | 2 +- app/assets/stylesheets/objects/_grid.scss | 9 + app/views/layouts/sandbox.html.erb | 90 ++++ app/views/sandbox/home-donation.html.erb | 84 ++++ 11 files changed, 710 insertions(+), 3 deletions(-) create mode 100644 app/assets/stylesheets/helpers/_flex.scss create mode 100644 app/assets/stylesheets/layout/_home-donation.scss create mode 100644 app/assets/stylesheets/objects/_grid.scss create mode 100644 app/views/layouts/sandbox.html.erb create mode 100644 app/views/sandbox/home-donation.html.erb diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index b94302a..6e33a31 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -46,6 +46,7 @@ @import "helpers/with-border"; @import "helpers/bold"; @import "helpers/align"; +@import "helpers/flex"; /* * 4. Objects @@ -62,6 +63,7 @@ @import "objects/content"; @import "objects/checkbox"; @import "objects/avatar"; +@import "objects/grid"; /* * 5. Layout @@ -74,7 +76,7 @@ @import "layout/donations"; @import "layout/post-donation"; - + @import "layout/home-donation"; /* * 6. Vendors * ---------- diff --git a/app/assets/stylesheets/base/_links.scss b/app/assets/stylesheets/base/_links.scss index 47aa214..59446ea 100644 --- a/app/assets/stylesheets/base/_links.scss +++ b/app/assets/stylesheets/base/_links.scss @@ -5,4 +5,19 @@ a { color: $main_color; +} + +.link-share { + padding: 0.7rem; + background: $main_color; + color: white; + font-size: 1rem; + width: 105px; + display: inline-block; + box-sizing: border-box; + text-decoration: none; +} + +.link-blue { + color: #247AA3; } \ No newline at end of file diff --git a/app/assets/stylesheets/core/_settings.scss b/app/assets/stylesheets/core/_settings.scss index 129fac8..d873f01 100644 --- a/app/assets/stylesheets/core/_settings.scss +++ b/app/assets/stylesheets/core/_settings.scss @@ -20,7 +20,6 @@ $light_background: #EBE8CC; $white: #fff; $caqui: #DFDFB6; $gray: #B0AEA5; - /* * * Fonts diff --git a/app/assets/stylesheets/helpers/_align.scss b/app/assets/stylesheets/helpers/_align.scss index b53b15f..301c9f7 100644 --- a/app/assets/stylesheets/helpers/_align.scss +++ b/app/assets/stylesheets/helpers/_align.scss @@ -8,4 +8,8 @@ .align-left { text-align: left; +} + +.align-bottom { + vertical-align: bottom; } \ No newline at end of file diff --git a/app/assets/stylesheets/helpers/_flex.scss b/app/assets/stylesheets/helpers/_flex.scss new file mode 100644 index 0000000..7ac6af2 --- /dev/null +++ b/app/assets/stylesheets/helpers/_flex.scss @@ -0,0 +1,395 @@ +// Flexbox Mixins +// http://philipwalton.github.io/solved-by-flexbox/ +// https://github.com/philipwalton/solved-by-flexbox +// +// Copyright (c) 2013 Brian Franco +// +// Permission is hereby granted, free of charge, to any person obtaining a +// copy of this software and associated documentation files (the +// "Software"), to deal in the Software without restriction, including +// without limitation the rights to use, copy, modify, merge, publish, +// distribute, sublicense, and/or sell copies of the Software, and to +// permit persons to whom the Software is furnished to do so, subject to +// the following conditions: +// The above copyright notice and this permission notice shall be included +// in all copies or substantial portions of the Software. +// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS +// OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF +// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. +// IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY +// CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, +// TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE +// SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. +// +// This is a set of mixins for those who want to mess around with flexbox +// using the native support of current browsers. For full support table +// check: http://caniuse.com/flexbox +// +// Basically this will use: +// +// * Fallback, old syntax (IE10, Safari, mobile webkit browsers) +// * Prefixed standard syntax (Chrome) +// * Final standards syntax (FF, IE11, Opera 12.1) +// +// This was inspired by: +// +// * http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/ +// +// With help from: +// +// * http://w3.org/tr/css3-flexbox/ +// * http://the-echoplex.net/flexyboxes/ +// * http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx +// * http://css-tricks.com/using-flexbox/ +// * http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/ +// * https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes + +//---------------------------------------------------------------------- + +// Flexbox Containers +// +// The 'flex' value causes an element to generate a block-level flex +// container box. +// +// The 'inline-flex' value causes an element to generate a inline-level +// flex container box. +// +// display: flex | inline-flex +// +// http://w3.org/tr/css3-flexbox/#flex-containers +// +// (Placeholder selectors for each type, for those who rather @extend) + +@mixin flexbox { + display: -webkit-box; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flexbox; + display: flex; +} + +%flexbox { @include flexbox; } + +//---------------------------------- + +@mixin inline-flex { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -moz-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + +%inline-flex { @include inline-flex; } + +//---------------------------------------------------------------------- + +// Flexbox Direction +// +// The 'flex-direction' property specifies how flex items are placed in +// the flex container, by setting the direction of the flex container's +// main axis. This determines the direction that flex items are laid out in. +// +// Values: row | row-reverse | column | column-reverse +// Default: row +// +// http://w3.org/tr/css3-flexbox/#flex-direction-property + +@mixin flex-direction($value: row) { + @if $value == row-reverse { + -webkit-box-direction: reverse; + -webkit-box-orient: horizontal; + } @else if $value == column { + -webkit-box-direction: normal; + -webkit-box-orient: vertical; + } @else if $value == column-reverse { + -webkit-box-direction: reverse; + -webkit-box-orient: vertical; + } @else { + -webkit-box-direction: normal; + -webkit-box-orient: horizontal; + } + -webkit-flex-direction: $value; + -moz-flex-direction: $value; + -ms-flex-direction: $value; + flex-direction: $value; +} + // Shorter version: + @mixin flex-dir($args...) { @include flex-direction($args...); } + +//---------------------------------------------------------------------- + +// Flexbox Wrap +// +// The 'flex-wrap' property controls whether the flex container is single-line +// or multi-line, and the direction of the cross-axis, which determines +// the direction new lines are stacked in. +// +// Values: nowrap | wrap | wrap-reverse +// Default: nowrap +// +// http://w3.org/tr/css3-flexbox/#flex-wrap-property + +@mixin flex-wrap($value: nowrap) { + // No Webkit Box fallback. + -webkit-flex-wrap: $value; + -moz-flex-wrap: $value; + @if $value == nowrap { + -ms-flex-wrap: none; + } @else { + -ms-flex-wrap: $value; + } + flex-wrap: $value; +} + +//---------------------------------------------------------------------- + +// Flexbox Flow (shorthand) +// +// The 'flex-flow' property is a shorthand for setting the 'flex-direction' +// and 'flex-wrap' properties, which together define the flex container's +// main and cross axes. +// +// Values: | +// Default: row nowrap +// +// http://w3.org/tr/css3-flexbox/#flex-flow-property + +@mixin flex-flow($values: (row nowrap)) { + // No Webkit Box fallback. + -webkit-flex-flow: $values; + -moz-flex-flow: $values; + -ms-flex-flow: $values; + flex-flow: $values; +} + +//---------------------------------------------------------------------- + +// Flexbox Order +// +// The 'order' property controls the order in which flex items appear within +// their flex container, by assigning them to ordinal groups. +// +// Default: 0 +// +// http://w3.org/tr/css3-flexbox/#order-property + +@mixin order($int: 0) { + -webkit-box-ordinal-group: $int + 1; + -webkit-order: $int; + -moz-order: $int; + -ms-flex-order: $int; + order: $int; +} + +//---------------------------------------------------------------------- + +// Flexbox Grow +// +// The 'flex-grow' property sets the flex grow factor. Negative numbers +// are invalid. +// +// Default: 0 +// +// http://w3.org/tr/css3-flexbox/#flex-grow-property + +@mixin flex-grow($int: 0) { + -webkit-box-flex: $int; + -webkit-flex-grow: $int; + -moz-flex-grow: $int; + -ms-flex-positive: $int; + flex-grow: $int; +} + +//---------------------------------------------------------------------- + +// Flexbox Shrink +// +// The 'flex-shrink' property sets the flex shrink factor. Negative numbers +// are invalid. +// +// Default: 1 +// +// http://w3.org/tr/css3-flexbox/#flex-shrink-property + +@mixin flex-shrink($int: 1) { + -webkit-flex-shrink: $int; + -moz-flex-shrink: $int; + -ms-flex-negative: $int; + flex-shrink: $int; +} + +//---------------------------------------------------------------------- + +// Flexbox Basis +// +// The 'flex-basis' property sets the flex basis. Negative lengths are invalid. +// +// Values: Like "width" +// Default: auto +// +// http://www.w3.org/TR/css3-flexbox/#flex-basis-property + +@mixin flex-basis($value: auto) { + -webkit-flex-basis: $value; + -moz-flex-basis: $value; + -ms-flex-preferred-size: $value; + flex-basis: $value; +} + +//---------------------------------------------------------------------- + +// Flexbox "Flex" (shorthand) +// +// The 'flex' property specifies the components of a flexible length: the +// flex grow factor and flex shrink factor, and the flex basis. When an +// element is a flex item, 'flex' is consulted instead of the main size +// property to determine the main size of the element. If an element is +// not a flex item, 'flex' has no effect. +// +// Values: none | || +// Default: See individual properties (1 1 0). +// +// http://w3.org/tr/css3-flexbox/#flex-property + +@mixin flex($fg: 1, $fs: null, $fb: null) { + + // Set a variable to be used by box-flex properties + $fg-boxflex: $fg; + + // Box-Flex only supports a flex-grow value so let's grab the + // first item in the list and just return that. + @if type-of($fg) == 'list' { + $fg-boxflex: nth($fg, 1); + } + + -webkit-box-flex: $fg-boxflex; + -webkit-flex: $fg $fs $fb; + -moz-box-flex: $fg-boxflex; + -moz-flex: $fg $fs $fb; + -ms-flex: $fg $fs $fb; + flex: $fg $fs $fb; +} + +//---------------------------------------------------------------------- + +// Flexbox Justify Content +// +// The 'justify-content' property aligns flex items along the main axis +// of the current line of the flex container. This is done after any flexible +// lengths and any auto margins have been resolved. Typically it helps distribute +// extra free space leftover when either all the flex items on a line are +// inflexible, or are flexible but have reached their maximum size. It also +// exerts some control over the alignment of items when they overflow the line. +// +// Note: 'space-*' values not supported in older syntaxes. +// +// Values: flex-start | flex-end | center | space-between | space-around +// Default: flex-start +// +// http://w3.org/tr/css3-flexbox/#justify-content-property + +@mixin justify-content($value: flex-start) { + @if $value == flex-start { + -webkit-box-pack: start; + -ms-flex-pack: start; + } @else if $value == flex-end { + -webkit-box-pack: end; + -ms-flex-pack: end; + } @else if $value == space-between { + -webkit-box-pack: justify; + -ms-flex-pack: justify; + } @else if $value == space-around { + -ms-flex-pack: distribute; + } @else { + -webkit-box-pack: $value; + -ms-flex-pack: $value; + } + -webkit-justify-content: $value; + -moz-justify-content: $value; + justify-content: $value; +} + // Shorter version: + @mixin flex-just($args...) { @include justify-content($args...); } + +//---------------------------------------------------------------------- + +// Flexbox Align Items +// +// Flex items can be aligned in the cross axis of the current line of the +// flex container, similar to 'justify-content' but in the perpendicular +// direction. 'align-items' sets the default alignment for all of the flex +// container's items, including anonymous flex items. 'align-self' allows +// this default alignment to be overridden for individual flex items. (For +// anonymous flex items, 'align-self' always matches the value of 'align-items' +// on their associated flex container.) +// +// Values: flex-start | flex-end | center | baseline | stretch +// Default: stretch +// +// http://w3.org/tr/css3-flexbox/#align-items-property + +@mixin align-items($value: stretch) { + @if $value == flex-start { + -webkit-box-align: start; + -ms-flex-align: start; + } @else if $value == flex-end { + -webkit-box-align: end; + -ms-flex-align: end; + } @else { + -webkit-box-align: $value; + -ms-flex-align: $value; + } + -webkit-align-items: $value; + -moz-align-items: $value; + align-items: $value; +} + +//---------------------------------- + +// Flexbox Align Self +// +// Values: auto | flex-start | flex-end | center | baseline | stretch +// Default: auto + +@mixin align-self($value: auto) { + // No Webkit Box Fallback. + -webkit-align-self: $value; + -moz-align-self: $value; + @if $value == flex-start { + -ms-flex-item-align: start; + } @else if $value == flex-end { + -ms-flex-item-align: end; + } @else { + -ms-flex-item-align: $value; + } + align-self: $value; +} + +//---------------------------------------------------------------------- + +// Flexbox Align Content +// +// The 'align-content' property aligns a flex container's lines within the +// flex container when there is extra space in the cross-axis, similar to +// how 'justify-content' aligns individual items within the main-axis. Note, +// this property has no effect when the flexbox has only a single line. +// +// Values: flex-start | flex-end | center | space-between | space-around | stretch +// Default: stretch +// +// http://w3.org/tr/css3-flexbox/#align-content-property + +@mixin align-content($value: stretch) { + // No Webkit Box Fallback. + -webkit-align-content: $value; + -moz-align-content: $value; + @if $value == flex-start { + -ms-flex-line-pack: start; + } @else if $value == flex-end { + -ms-flex-line-pack: end; + } @else { + -ms-flex-line-pack: $value; + } + align-content: $value; +} diff --git a/app/assets/stylesheets/helpers/_white-spacing.scss b/app/assets/stylesheets/helpers/_white-spacing.scss index 9cfe404..fe1d259 100644 --- a/app/assets/stylesheets/helpers/_white-spacing.scss +++ b/app/assets/stylesheets/helpers/_white-spacing.scss @@ -68,6 +68,8 @@ In some point should be good to base these var in relative font sizes (rem). .mxn4 { margin-left: -30px; margin-right: -30px; } .mx-auto { margin-left: auto; margin-right: auto; } +.ml-auto { margin-left: auto;} +.mr-auto { margin-right: auto;} .p0 { padding: 0; } .pl0 { padding-left: 0; } @@ -109,3 +111,5 @@ In some point should be good to base these var in relative font sizes (rem). .py4 { padding-top: 30px; padding-bottom: 30px; } .px4 { padding-left: 30px; padding-right: 30px; } + + diff --git a/app/assets/stylesheets/layout/_home-donation.scss b/app/assets/stylesheets/layout/_home-donation.scss new file mode 100644 index 0000000..00f4e92 --- /dev/null +++ b/app/assets/stylesheets/layout/_home-donation.scss @@ -0,0 +1,105 @@ +.donation-container { + font-size: 1.6rem; + box-sizing: border-box; + margin-bottom: 40px; +} + +.donation-introduction { + background-color: #BAC271; +} + +.donation-introduction-holder { + padding: 4rem 1rem 3rem; +} + +.donation-content-holder-medium { + border-left: 1px solid #DFDFB6; +} + +.donation-content-user { + color: $main-color; +} + +.donation-content-user-info { + padding-top: 3rem; +} + +.icon-list { + white-space: nowrap; +} + +.icon { + width: 23px; + height: 23px; + background-color: $main-color; +} + +.flex-container { + @include flexbox; + @include align-items(center); +} + +.work-item { + padding: 0.5rem; + background: #F3E9D1; + display: inline-block; + border-radius: 4px; + font-size: 1.2rem; + + .work-item-number { + color: #BCBC8E; + } +} + +.dot-container { + position: relative; +} + +.with-dot { + + &:before { + content: ''; + display: inline-block; + width: 10px; + height: 10px; + border-radius: 50%; + background-color: #DFDFB6; + position: absolute; + left: -35px; + top: 50%; + transform: translateY(-50%); + } + + &.to-top { + &:before { + top: 0; + transform: translateY(50%); + } + } +} + +.donation-content-user-button { + @include align-self(flex-end); +} + +.donation-content-user-developed { + margin-bottom: 6rem; +} + +.semifooter-item { + padding: 2rem; +} + +.semifooter-item.one { + background-color: $caqui; + border-radius: 4px 4px 0 0; +} + +.semifooter-item.two { + background-color: $main-color; + a { + color: $white; + } +} + + diff --git a/app/assets/stylesheets/objects/_avatar.scss b/app/assets/stylesheets/objects/_avatar.scss index 545449f..59b07e4 100644 --- a/app/assets/stylesheets/objects/_avatar.scss +++ b/app/assets/stylesheets/objects/_avatar.scss @@ -20,4 +20,4 @@ display: block; max-width: 100%; width: 100%; -} \ No newline at end of file +} diff --git a/app/assets/stylesheets/objects/_grid.scss b/app/assets/stylesheets/objects/_grid.scss new file mode 100644 index 0000000..bfa16b8 --- /dev/null +++ b/app/assets/stylesheets/objects/_grid.scss @@ -0,0 +1,9 @@ +.row { + width: 100%; + display: table; + table-layout: fixed; +} + +.col { + display: table-cell; +} \ No newline at end of file diff --git a/app/views/layouts/sandbox.html.erb b/app/views/layouts/sandbox.html.erb new file mode 100644 index 0000000..1a096d5 --- /dev/null +++ b/app/views/layouts/sandbox.html.erb @@ -0,0 +1,90 @@ + + + + + + + <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> + + <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> + <%= csrf_meta_tags %> + + <%= display_meta_tags :site => 'TrackDons', :reverse => true %> + + + + + + + + + +
+
+ + + + <%= yield %> + + +
+ + + +
+ + + + +
+ +
    +
  • <%= link_to t('Projects'), controller: 'projects' %>
    • +
  • <%= link_to t('Donations'), controller: 'donations' %>
    • +
  • <%= link_to t('Users'), users_path %>
    • +
  • <%= link_to t('About'), controller: 'pages', action: 'about' %>
    • +
+ +
    + <%= render 'shared/user_links' %> +
+
+ +<%= "Locale: #{I18n.locale}" if Rails.env.development? %> +<%# debug(request) if Rails.env.development? %> +<%= debug(params) if Rails.env.development? %> +<%= debug(cookies) if Rails.env.development? %> + + + + diff --git a/app/views/sandbox/home-donation.html.erb b/app/views/sandbox/home-donation.html.erb new file mode 100644 index 0000000..d398571 --- /dev/null +++ b/app/views/sandbox/home-donation.html.erb @@ -0,0 +1,84 @@ +
+
+
+

Great your donation is tracked. This is just the begining

+
+
+
+

Be an active promoter of the donation you have done.

+
+
+ Share in Twitter +
+
+ +
+
+

Its the best way to convince your friends to donate.

+
+
+ Share in Facebook +
+
+
+
+
+
+
+
+ + Gema de Rus + + Gema de Rus donated 25€ to Wikipedia13.06.2013 +
    +
  • +
  • +
+
+ +
+ +
+
+

they work to

+
    +
  • + Promote Free Knowledge 1234 +
    • +
  • + Empower people to develop open content 1234 +
    • +
+
+ Share by email +
+
+

a friend inspired him to donate

+
+ + Gema de Rus + +
+
+
+

an activity they developed

+
+ The grand adventure of the Annual Report +
+
+
+
+

Do you know friends who have donated to Wikipedia?

+

+ Ask them to track their donations and further help Wikipedia +

+
+
+ +
+