bones-rails 0.0.2 → 0.1.0

data/app/assets/stylesheets/bones/partials/_grid.scss

@@ -0,0 +1,112 @@
+.row {
+  width: 100%;
+  float: left;
+}
+
+.column {
+  display: inline-block;
+  float: left;
+  margin: $grid-col-margin-top-bottom $grid-col-margin;
+  padding: $grid-col-padding-top-bottom $grid-col-padding;
+}
+
+.span-full {
+  margin: 0;
+  width: 100 - (2 * $grid-col-padding);
+}
+
+.span-1 {
+  @include column-width(1);
+}
+
+.span-2 {
+  @include column-width(2);
+}
+
+.span-3 {
+  @include column-width(3);
+}
+
+.span-4 {
+  @include column-width(4);
+}
+
+.span-5 {
+  @include column-width(5);
+}
+
+.span-6 {
+  @include column-width(6);
+}
+
+.span-7 {
+  @include column-width(7);
+}
+
+.span-8 {
+  @include column-width(8);
+}
+
+.span-9 {
+  @include column-width(9);
+}
+
+.span-10 {
+  @include column-width(10);
+}
+
+.span-11 {
+  @include column-width(11);
+}
+
+.span-12 {
+  @include column-width(12);
+}
+
+.span-13 {
+  @include column-width(13);
+}
+
+.span-14 {
+  @include column-width(14);
+}
+
+.span-15 {
+  @include column-width(15);
+}
+
+.span-16 {
+  @include column-width(16);
+}
+
+.span-17 {
+  @include column-width(17);
+}
+
+.span-18 {
+  @include column-width(18);
+}
+
+.span-19 {
+  @include column-width(19);
+}
+
+.span-20 {
+  @include column-width(20);
+}
+
+.span-21 {
+  @include column-width(21);
+}
+
+.span-22 {
+  @include column-width(22);
+}
+
+.span-23 {
+  @include column-width(23);
+}
+
+.span-24 {
+  @include column-width(24);
+}

data/app/assets/stylesheets/bones/partials/_images.scss

@@ -0,0 +1,52 @@
+img {
+  margin: 0;
+  padding: 0;
+  height: auto;
+  &.thumb {
+    width: 150px;
+  }
+  &.medium {
+    width: 300px;
+  }
+  &.large {
+    width: 450px;
+  }
+  &.frame {
+    border: 0.5em solid transparent;
+    outline: 1px solid $accent-light-dark;
+  }
+  &.polaroid {
+    border: 0.75em solid transparent;
+    outline: 1px solid $accent-light-dark;
+    border-bottom-width: 2.75em;
+  }
+  &.center {
+    display: block;
+    margin-right: auto;
+    margin-left: auto;
+  }
+}
+
+div.panoramic {
+  width: 100%;
+  height: 200px;
+  overflow:hidden;
+  box-sizing: border-box;
+  position: relative;
+  img {
+    width: 100%;
+    position: absolute;
+    top: -40%;
+  }
+}
+
+div.circle {
+  border-radius: 50%;
+  overflow: hidden;
+  width: 150px;
+  height: 150px;
+  img {
+    width: 150px;
+    height: 150px;
+  }
+}

data/app/assets/stylesheets/bones/partials/_nav.scss

@@ -0,0 +1,111 @@
+nav.top, div.top-nav {
+  width: 100%;
+  background: $primary;
+  overflow: hidden;
+  ul {
+    @include horizontal-nav-core(
+      $nav-tb-background,
+      $nav-tb-color,
+      $nav-tb-background-hover,
+      $nav-tb-color-hover,
+      $nav-tb-padding,
+      $nav-tb-font-size
+    );
+    float: left;
+    &.right {
+      float: right;
+    }
+  }
+  &.secondary {
+    background: $primary-light;
+    ul > li {
+      a {
+        color: $primary;
+        i, span {
+          color: $primary;
+        }
+        &:hover, &.active {
+          background: $primary;
+          color: $accent-light;
+          i, span {
+            background: $primary;
+            color: $accent-light;
+          }
+        }
+      }
+    }
+  }
+}
+
+nav.horizontal, div.horizontal-nav {
+  ul {
+    @include horizontal-nav-core(
+      $nav-h-background,
+      $nav-h-color,
+      $nav-h-background-hover,
+      $nav-h-color-hover,
+      $nav-h-padding,
+      $nav-h-font-size
+    );
+  }
+}
+
+nav.vertical, nav {
+  ul {
+    @include nav-core();
+    li {
+      a {
+        display: block;
+        padding: $nav-v-padding;
+        font-size: $nav-v-font-size;
+        background: $nav-v-background;
+        color: $nav-v-color;
+        &:hover, &.active {
+          text-decoration: none;
+          background: $nav-v-background-hover;
+          color: $nav-v-color-hover;
+          span, i {
+            background: $nav-v-background-hover;
+            color: $nav-v-color-hover;
+          }
+        }
+        span, i {
+          margin-right: 10px;
+          background: $nav-v-background;
+          color: $nav-v-color;
+        }
+      }
+    }
+  }
+}
+
+ul.filter {
+  @include horizontal-nav-core(
+    $nav-f-background,
+    $nav-f-color,
+    $nav-f-background-hover,
+    $nav-f-color-hover,
+    $nav-f-padding,
+    $nav-f-font-size
+  );
+}
+
+ul.breadcrumb {
+  @include horizontal-nav-core(
+    $nav-b-background,
+    $nav-b-color,
+    $nav-b-background-hover,
+    $nav-b-color-hover,
+    $nav-b-padding,
+    $nav-b-font-size
+  );
+  li {
+    &:after {
+      content: $nav-b-separator;
+      color: $accent-light-darker;
+    }
+    &:last-child:after {
+      content: "";
+    }
+  }
+}

data/app/assets/stylesheets/bones/partials/_tables.scss

@@ -0,0 +1,19 @@
+table {
+  width: $table-width;
+  border: $table-border;
+  th, td {
+    padding: $table-cell-padding;
+  }
+  thead tr {
+    background: $table-header-background;
+    th {
+      color: $table-header-color;
+      font-weight: $table-header-font-weight;
+    }
+  }
+  tbody tr {
+    &:nth-child(even) {
+      background: $table-cell-accent-background;
+    }
+  }
+}

data/app/assets/stylesheets/bones/partials/_typography.scss

@@ -0,0 +1,174 @@
+h1, h2, h3, h4, h5, h6 {
+  margin: $heading-margin;
+  color: $heading-color;
+  font-weight: $heading-font-weight;
+  @if $heading-caps == true {
+    text-transform: uppercase;
+  }
+
+  small {
+    font-size: $heading-small-factor;
+    color: $heading-small-color;
+  }
+}
+
+h1 {
+  @include heading($h1-font-size);
+}
+
+h2 {
+  @include heading($h2-font-size);
+}
+
+h3 {
+  @include heading($h3-font-size);
+}
+
+h4 {
+  @include heading($h4-font-size);
+}
+
+h5 {
+  @include heading($h5-font-size);
+}
+
+h6 {
+  @include heading($h6-font-size);
+}
+
+.subheading {
+  font-weight: $subheading-font-weight;
+  color: $subheading-color;
+}
+
+h1.subheading {
+  @include subheading($h1-font-size);
+}
+
+h2.subheading {
+  @include subheading($h2-font-size);
+}
+
+h3.subheading {
+  @include subheading($h3-font-size);
+}
+
+h4.subheading {
+  @include subheading($h4-font-size);
+}
+
+h5.subheading {
+  @include subheading($h5-font-size);
+}
+
+h6.subheading {
+  @include subheading($h6-font-size);
+}
+
+p {
+  font-weight: $paragraph-font-weight;
+  margin: $paragraph-margin;
+  line-height: $paragraph-line-height;
+  color: $paragraph-color;
+}
+
+blockquote {
+  padding: $blockquote-padding;
+  margin: $blockquote-margin;
+  background: $blockquote-background;
+  border-left: $blockquote-border-left;
+  font-size: $blockquote-font-size;
+
+  code {
+    border: none;
+    background: transparent;
+    font-size: $blockquote-font-size;
+  }
+}
+
+a {
+  color: $link-color;
+  @if $link-underline == true {
+    text-decoration: underline;
+  }
+  @else {
+    text-decoration: none;
+  }
+
+  &:hover {
+    color: $link-hover-color;
+    @if $link-hover-underline == true {
+      text-decoration: underline;
+    }
+    @else {
+      text-decoration: none;
+    }
+  }
+}
+
+small {
+  font-size: $small-font-factor;
+}
+
+big {
+  font-size: $big-font-factor;
+}
+
+em {
+  font-style: italic;
+}
+
+strong {
+  font-weight: $strong-font-weight;
+}
+
+ul {
+  margin-left: $ul-margin-left-level-1;
+  list-style-type: $ul-style-type;
+  ul, ul ul {
+    margin-left: $ul-margin-left-level-2;
+  }
+  li {
+    line-height: $ul-line-height;
+  }
+}
+
+ol {
+  margin: $ol-margin-left-level-1;
+  ol, ol ol {
+    margin: $ol-margin-left-level-2;
+  }
+  li {
+    line-height: $ol-line-height;
+  }
+}
+
+ul.disc {
+  @include unordered-list(disc);
+}
+
+ul.circle {
+  @include unordered-list(circle);
+}
+
+ul.square {
+  @include unordered-list(square);
+}
+
+ul.no-bullet {
+  @include unordered-list(none);
+  margin-left: $ul-margin-left-level-1 - 20px;
+  ul, ul ul {
+    margin-left: $ul-margin-left-level-2 - 20px;
+  }
+}
+
+ul.horizontal {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  li {
+    display: inline-block;
+    padding: $ul-h-padding;
+  }
+}