RubyGems - psique - Versions diffs - 0.1.1 → 1.0.0 - Mend

psique 0.1.1 → 1.0.0

Files changed (659) hide show

data/assets/stylesheets/psique/_mixins.scss DELETED

@@ -1,69 +0,0 @@
-// Generate the grid for a particular size
-@mixin make-cols($size) {
-  @for $i from 1 through susy-get(columns) {
-    .col-#{$size}-#{$i} {
-      @include span($i);
-      @include trailer(susy-get(gutters));
-      > .row {
-        margin: 0 (- gutter()) (- gutter());
-      }
-    }
-  }
-}
-// Generate bottom arrow to header panels
-@mixin arrow($size, $color, $offset) {
-  position: relative;
-  &:after {
-    @include output-rhythm(border-width, $size);
-    @include output-rhythm(bottom, -1.8 * $size);
-    @include translateX(-$offset);
-    border: {
-      color: transparent;
-      style: solid;
-      top-color: $color;
-    }
-    content: '';
-    height: 0;
-    left: $offset;
-    pointer-events: none;
-    position: absolute;
-    visibility: visible;
-    width: 0;
-  }
-}
-// Generate panel
-@mixin panel($header-bg-color, $header-text-color, $content-bg-color: transparent, $content-border-color: transparent, $padding: .4rem) {
-  @include trailer(1);
-  .panel-header {
-    @include output-rhythm(padding, $padding);
-    background-color: $header-bg-color;
-    color: $header-text-color;
-    font-size: 1.2em;
-    font-weight: bold;
-    &.arrow {
-      @include arrow(rhythm(.4), $header-bg-color, 20%);
-    }
-    &.border-bottom {
-      @include output-rhythm(border-bottom, rhythm(.4));
-      border-bottom: {
-        color: adjust-color($header-bg-color, $hue: -2, $saturation: 48%, $lightness: -38%);
-        style: solid;
-      }
-    }
-  }
-  .panel-content {
-    @include output-rhythm(padding, $padding);
-    background-color: $content-bg-color;
-    border: 1px solid $content-border-color;
-    border-top: 0;
-  }
-}

data/assets/stylesheets/psique/_panels.scss DELETED

@@ -1,148 +0,0 @@
-/*doc
----
-title: Panels
-name: panel
-category: Components
----
-Example usage of basic panels.
-```haml_example
-%aside.panel
-  %header.panel-header
-    Panel title
-  %section.panel-content
-    Panel content
-```
-Panel with header decorations. You can use the classes `arrow` and `border-bottom`.
-```haml_example
-%aside.panel
-  %header.panel-header.arrow
-    Panel title
-  %section.panel-content
-    Panel content
-%aside.panel
-  %header.panel-header.border-bottom
-    Panel title
-  %section.panel-content
-    Panel content
-```
-Panel colors.
-```haml_example
-%aside.panel.red
-  %header.panel-header
-    Panel title
-  %section.panel-content
-    Panel content
-%aside.panel.green
-  %header.panel-header
-    Panel title
-  %section.panel-content
-    Panel content
-%aside.panel.pink
-  %header.panel-header
-    Panel title
-  %section.panel-content
-    Panel content
-%aside.panel.orange
-  %header.panel-header
-    Panel title
-  %section.panel-content
-    Panel content
-```
-Panel with tabs.
-```haml_example
-%aside.panel
-  %ul.tablist{role: 'tablist'}
-    %li.tab.active{'aria-controls' => 'panel1', :role => 'tab', :tabindex => '0'} First tab
-    %li.tab{'aria-controls' => 'panel2', :role => 'tab', :tabindex => '0'} Second tab
-    %li.tab{'aria-controls' => 'panel3', :role => 'tab', :tabindex => '0'} Third tab
-  %section.panel-content
-    #panel1.tabpanel.active{role: 'tabpanel'}
-      First panel
-    #panel2.tabpanel{role: 'tabpanel'}
-      Second panel
-    #panel3.tabpanel{role: 'tabpanel'}
-      Third panel
-```
-*/
-.panel {
-  @include panel(map-get($panel-colors, 'light-blue'), $black, $content-border-color: #ccc);
-  @each $panel-type, $panel-color in map-remove($panel-colors, 'light-blue') {
-    &.#{$panel-type} { @include panel($panel-color, $white, #f4f4f6); }
-  }
-}
-.tablist {
-  border-bottom: {
-    color: $primary-color;
-    style: solid;
-    width: 4px; }
-  display: table;
-  margin: 0;
-  padding: 0;
-  position: relative;
-  width: 100%;
-  &.narrow {
-    @include display-flex;
-    > .tab {
-      display: inline-block;
-      padding-left: 2em;
-      padding-right: 2em;
-    }
-  }
-}
-.tab {
-  @include reset-focus;
-  background-color: $azul-ceruleo;
-  border-left: 1px solid $white;
-  cursor: pointer;
-  display: table-cell;
-  font-weight: bold;
-  margin: 0;
-  padding: .4rem 0;
-  text-align: center;
-  &:first-child { border-left: 0; }
-  &.active {
-    @include arrow(rhythm(.4), $well-read, 50%);
-    background-color: $well-read;
-    color: $white;
-    cursor: auto;
-  }
-  a { @include unstyled-link; }
-}
-.tabpanel {
-  display: none;
-  &.active { display: block; }
-}
-.tab-menu {
-  bottom: 5px;
-  display: inline-block;
-  position: absolute;
-  right: 0;
-  > * {
-    @include delimited-list(' |');
-    margin: 0;
-    padding: 0;
-  }
-}

data/assets/stylesheets/psique/_settings.scss DELETED

@@ -1,127 +0,0 @@
-// Media queries screens and layouts
-// -------------------------------------------------
-$screen-desktop: 1000px !default;
-$screen-mobile: 768px !default;
-$layout-desktop: $screen-desktop static !default;
-// Susy grid global defaults
-// -------------------------------------------------
-$susy: (
-  flow: ltr,
-  math: fluid,
-  output: isolation,
-  gutter-position: split,
-  container: auto,
-  container-position: center,
-  columns: 12,
-  gutters: .25,
-  column-width: false,
-  global-box-sizing: content-box,
-  last-flow: to,
-  debug: (
-    image: hide,
-    color: rgba(#66f, .25),
-    output: background,
-    toggle: top right,
-  ),
-  use-custom: (
-    background-image: true,
-    background-options: false,
-    box-sizing: true,
-    clearfix: false,
-    rem: true,
-  )
-);
-// Compass Vertical Rhythm Settings
-// -------------------------------------------------
-$round-to-nearest-half-line: true;
-$rhythm-unit: 'rem';
-// Colors
-// -------------------------------------------------
-$astronaut: #034665 !default;
-$black: #000 !default;
-$casper: #afc6d4 !default;
-$hollywood-cerise: #c000a6 !default;
-$trinidad: #e85900 !default;
-$verdun-green: #426e00 !default;
-$well-read: #ab3132 !default;
-$white: #fff !default;
-$aux-grey: #d5d5d5;
-$azul-capota: #21689d;
-$azul-ceruleo: #a2baca;
-$highlight-color: #00bd00;
-$primary-color: $azul-capota;
-// Typography
-// -------------------------------------------------
-$font-size-h1: 36px;
-$font-size-h2: 30px;
-$font-size-h3: 18px;
-$font-size-h4: 14px;
-$font-size-h5: 12px;
-$font-size-h6: 10px;
-$texts-font-family:    'Source Sans Pro' !default;
-$headings-font-family: 'Roboto' !default;
-$headings-font-weight: bold;
-// Panels
-// -------------------------------------------------
-$panel-colors: (
-  'red': $well-read,
-  'green': #00bd00,
-  'pink': $hollywood-cerise,
-  'orange': $trinidad,
-  'light-blue': $casper
-);
-// Forms
-// -------------------------------------------------
-$input-border-radius: 4px;
-/*Rankia Colores*/
-/*Principales*/
-$capota:#21689D;
-$capota-light:lighten(#21689D,20);
-$capota-dark:darken(#21689D,10);
-$navyblue:#019875;
-$navyblue-light:lighten(#019875,15);
-$navyblue-dark:darken(#019875,10);
-$ceruleo:#A2BACA;
-$ceruleo-light:lighten(#A2BACA,15);
-$ceruleo-dark:darken(#A2BACA,10);
-/*Greyscale*/
-$lightgrey:#F4F4F4;
-$midgrey:#888888;
-$darkgrey:#1E1E1E;
-$auxgrey:#D5D5D5;
-/*Section colors*/
-$darkorange:#FA640F;
-$darkorange-light:lighten(#FA640F,15);
-$darkorange-dark:darken(#FA640F,8);
-$darkmagenta:#AA2098;
-$seagreen:#188960;
-$granate:#951E25;

data/assets/stylesheets/psique/_summaries.scss DELETED

@@ -1,188 +0,0 @@
-/*doc
----
-title: Summaries
-name: summary
-category: Components
----
-A summary is a representative of a complete news extract, to place it in some
-prominent and visible place in the website. The different formats summary,
-allow give more importance to some elements or others, according to their
-position on the page.
-```haml_example
-%article.summary.featured
-  .summary-left
-    %img{:src => "http://www.fillmurray.com/400/305/"}
-  .summary-right
-    %header.summary-header
-      %h2.summary-title
-        %a{href: '#'} Lorem ipsum dolor sit amet consectetur adipisicing
-      .summary-meta
-        .author john doe
-        .comments
-          %i.fa.fa-comment 7
-    %section.summary-content
-      %p
-        %a.topic{href: '#'} officia consectetur.
-        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
-```
-```haml_example
-%article.summary.medium
-  .summary-left
-    %img{:src => "http://www.fillmurray.com/g/400/300/"}
-  .summary-right
-    %header.summary-header
-      %h3.summary-title
-        %a{href: '#'} Lorem ipsum dolor sit amet consectetur adipisicing
-        %span.author john doe
-    %section.summary-content
-      %p
-        %a.topic{href: '#'} officia consectetur.
-        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
-```
-```haml_example
-%article.summary.new
-  %header.summary-header
-    %h3.summary-title
-      %a{href: '#'} Lorem ipsum dolor sit amet consectetur adipisicing
-  %section.summary-content
-    .thumbnail
-      %img{:src => "http://www.fillmurray.com/g/375/250/"}
-    .summary-meta
-      .author john doe
-      .comments
-        %i.fa.fa-comment 7
-    %p
-      %a.topic{href: '#'} officia consectetur.
-      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
-```
-```haml_example
-%article.summary.default
-  %header.summary-header
-    %h2.summary-title
-      %a{href: '#'} Lorem ipsum dolor sit amet consectetur adipisicing
-    .summary-meta
-      .author john doe
-      .comments
-        %i.fa.fa-comment 7
-  %section.summary-content
-    .thumbnail
-      %img{:src => "http://www.fillmurray.com/g/800/250/"}
-    %p
-      %a.topic{href: '#'} officia consectetur.
-      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
-```
-```haml_example
-%article.summary.small
-  .summary-left
-    %img{:src => "http://www.fillmurray.com/g/400/150/"}
-  .summary-right
-    %header.summary-header
-      %h4.category reprehenderit
-      %h4.summary-title
-        %a{href: '#'} Lorem ipsum dolor sit amet consectetur adipisicing
-    %section.summary-content
-      %p
-        %a.topic{href: '#'} officia consectetur.
-        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
-```
-*/
-%summary {
-  @extend .row;
-  padding: .2em;
-  .summary-title {
-    color: $primary-color;
-    font-weight: bold;
-    margin-bottom: 0;
-    a { color: $primary-color; }
-  }
-  .author {
-    color: #666;
-    display: inline-block;
-    font-size: 11px !important;
-    font-weight: normal;
-    text-transform: uppercase;
-    white-space: nowrap;
-  }
-  .comments {
-    color: $primary-color;
-    display: inline-block;
-    margin-left: 1em;
-    font-size: 14px;
-  }
-  .summary-content {
-    p {
-      color: #323131;
-      font-size: 13px;
-      line-height: 1.2em;
-      margin: 0;
-    }
-  }
-  .category {
-    color: $primary-color;
-    font-size: 12px;
-    font-weight: bold;
-    margin-bottom: 0;
-    text-transform: uppercase;
-  }
-  .topic {
-    color: $primary-color;
-    font-size: 12px;
-    text-transform: uppercase;
-  }
-  .thumbnail {
-    margin-bottom: .5em;
-  }
-  img {
-    max-width: 100%;
-    width: 100%;
-  }
-}
-.summary {
-  @extend %summary;
-  &.small {
-    .summary-left { @extend .col-sm-3; }
-    .summary-right { @extend .col-sm-9; }
-  }
-  &.medium {
-    .summary-left { @extend .col-sm-5; }
-    .summary-right { @extend .col-sm-7; }
-  }
-  &.new {
-    .summary-header { @extend .col-sm-12; }
-    .summary-content {
-      .thumbnail { @extend .col-sm-5; }
-      p { @extend .col-sm-7;}
-    }
-    .summary-meta { @extend .col-sm-7; }
-  }
-  &.default {
-    .summary-header { @extend .col-sm-12; }
-    .summary-content { @extend .col-sm-12; }
-  }
-  &.featured {
-    .summary-left { @extend .col-sm-5; }
-    .summary-right { @extend .col-sm-7; }
-    .summary-meta { margin: .25em 0; }
-    background-color: #F4F3F5;
-  }
-}