shipd_style 0.1.0

data/lib/sass/mobile/_oo-styles.scss

@@ -0,0 +1,218 @@
+.block {
+  @include line;
+}
+
+.hidden {
+  display: none;
+}
+
+.overflow {
+  overflow: visible;
+}
+
+.no-overflow, .no-scroll {
+  overflow: hidden;
+}
+
+.absolute {
+  position: absolute;
+}
+
+.relative {
+  position: relative;
+}
+
+
+
+.inner-top {
+  padding-top: $spacing;
+}
+
+.inner-bottom {
+  padding-bottom: $spacing;
+}
+
+.inner-left {
+  padding-left: $spacing;
+}
+
+.inner-right {
+  padding-right: $spacing;
+}
+
+.no-padding {
+  padding: 0;
+}
+
+
+
+.pointer-cursor {
+  cursor: pointer;
+}
+
+
+.rounded {
+  @include rounded;
+}
+
+.circular {
+  @include border-radius(50%);
+}
+
+
+
+.centered-content {
+  text-align: center;
+}
+
+.centerable {
+  display: inline-block;
+}
+
+
+
+.shadow-container {
+  @include line;
+  padding-right: $shadow-padding;
+  padding-bottom: $shadow-padding;
+}
+
+.shadow {
+  @include shadowed;
+}
+
+.transparent {
+  @include opacity(0);
+}
+
+.opaque {
+  @include opacity(1);
+}
+
+.border {
+  @include bordered;
+}
+
+.border-left {
+  border-left: $border-width solid $neutral-20;
+}
+
+.border-right {
+  border-right: $border-width solid $neutral-20;
+}
+
+.border-top {
+  border-top: $border-width solid $neutral-20;
+}
+
+.border-bottom {
+  border-bottom: $border-width solid $neutral-20;
+}
+
+.no-border {
+  border: none;
+}
+
+
+
+// text styles
+
+.wrap {
+  @include word-break(break-all);
+}
+
+.no-wrap {
+  white-space: nowrap;
+}
+
+.bold {
+  font-weight: bold;
+}
+
+.italic {
+  font-style: italic;
+}
+
+.small-text {
+  font-size: 0.9*$em;
+}
+
+.text-shadow {
+  @include text-shadowed;
+}
+
+.text-shadow-light {
+  @include text-shadowed-light;
+}
+
+// colored text
+
+.light-text {
+  color: $neutral-20;
+}
+
+.primary-text {
+  color: $primary;
+}
+
+.accent-text {
+  color: $accent;
+}
+
+.accent-2-text {
+  color: $accent-2;
+}
+
+.info-text {
+  color: $info;
+}
+
+.info-2-text {
+  color: $info-2;
+}
+
+.warn-text {
+  color: $warn;
+}
+
+.error-text {
+  color: $error-dark;
+}
+
+
+// colored backgrounds
+.background-light {
+  background-color: $lightest-color;
+}
+
+.background-dark {
+  background-color: $darkest-color;
+}
+
+.background-primary {
+  background-color: $primary;
+}
+
+.background-accent {
+  background-color: $accent;
+}
+
+.background-accent-2 {
+  background-color: $accent-2;
+}
+
+.background-info {
+  background-color: $info;
+}
+
+.background-info-2 {
+  background-color: $info-2;
+}
+
+.background-warn {
+  background-color: $warn;
+}
+
+.background-error {
+  background-color: $error;
+}

data/lib/sass/mobile/_typography.scss

@@ -0,0 +1,50 @@
+body {
+  color: $darkest-color;
+  font-family: $body-font;
+  font-size: $em;
+  text-rendering: optimizeLegibility;
+  line-height: $line-height;
+}
+
+h1, h2, h3, h4 {
+  font-weight: bold;
+  padding-bottom: $em*0.1;
+}
+
+p { padding-bottom: $em*0.75; }
+
+h1, h2, h3 { font-family: $headline-font; }
+h4, h5, h6 { font-family: $headline-2-font; }
+
+h1 { font-size: $em*1.7; line-height: 1; }
+h2 { font-size: $em*1.5; line-height: 1.3; }
+h3 { font-size: $em*1.3; line-height: 1.4; }
+h4 { font-size: $em; }
+h5 { font-size: $em*0.95; font-style: italic; }
+h6 { font-size: $em*0.8; line-height: 2; }
+
+a {
+  color: $info;
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+em { font-style: italic; }
+b { font-weight: bold; }
+
+hr {
+  border: 0;
+  background-color: $neutral-20;
+  height: 1px;
+}
+
+ul.bullet-list {
+  list-style: disc; padding: $spacing; margin: $spacing;
+
+  li { padding: $spacing/2 $spacing; }
+}
+
+// TODO: same for numberend list

data/lib/sass/mobile/widgets/_buttons.scss

@@ -0,0 +1,134 @@
+button,
+input[type=submit] {
+  @include line;
+}
+
+button,
+input[type=submit],
+a.button,
+div.button,
+label.button {
+  // overrides that should be in reset/normalize
+  outline-style: none;
+  resize: none;
+  -webkit-appearance: none;
+  border: none;
+
+  display: block;
+  font-size: $em;
+  font-family: $button-font;
+  font-weight: bold;
+  background-color: $primary;
+  color: $darkest-color;
+  padding: $spacing*1.2 $spacing*3;
+  line-height: 1;
+  letter-spacing: 1px;
+  text-align: center;
+  white-space: normal;
+  cursor: pointer;
+
+  @include rounded;
+  @include shadowed;
+  @include line;
+
+  &:hover {
+    text-decoration: none;
+    background-color: $primary-light;
+  }
+
+  &:active {
+    background-color: $primary-dark;
+    @include depressed-shadow;
+  }
+
+  &.accent {
+    background-color: $accent;
+
+    &:hover {
+      background-color: $accent-light;
+    }
+
+    &:active {
+      background-color: $accent-dark;
+    }
+  }
+
+  &.accent-2 {
+    background-color: $accent-2;
+
+    &:hover {
+      background-color: $accent-2-light;
+    }
+
+    &:active {
+      background-color: $accent-2-dark;
+    }
+  }
+
+  &.neutral {
+    background-color: $neutral-50;
+
+    &:hover {
+      background-color: $neutral-40;
+    }
+
+    &:active {
+      background-color: $neutral-60;
+    }
+  }
+
+  &.info {
+    background-color: $info;
+    color: $neutral-10;
+
+    &:hover {
+      background-color: $info-light;
+    }
+
+    &:active {
+      background-color: $info-dark;
+    }
+  }
+
+  &.info-2 {
+    background-color: $info-2;
+    color: $neutral-10;
+
+    &:hover {
+      background-color: $info-2-light;
+    }
+
+    &:active {
+      background-color: $info-2-dark;
+    }
+  }
+
+  &.warn {
+    background-color: $warn;
+    color: $neutral-10;
+
+    &:hover {
+      background-color: $warn-light;
+    }
+
+    &:active {
+      background-color: $warn-dark;
+    }
+  }
+
+  &.error {
+    background-color: $error;
+
+    &:hover {
+      background-color: $error-light;
+    }
+
+    &:active {
+      background-color: $error-dark;
+    }
+  }
+
+  &.disabled {
+    @include opacity(0.3);
+  }
+}

data/lib/sass/mobile/widgets/_carousel.scss

@@ -0,0 +1,16 @@
+$carousel-transition-time: 1s;
+
+.carousel-window {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.carousel-slide {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  transition-property: left;
+  transition-duration: $carousel-transition-time;
+  top: 0;
+}

data/lib/sass/mobile/widgets/_dialog-overlay.scss

@@ -0,0 +1,37 @@
+#overlay {
+  position: absolute;
+  overflow-y: scroll;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: $overlay-height;
+  background-color: transparentize($darkest-color, 0.5);
+  @include opacity-transition;
+}
+
+.dialog-container {
+  display: block;
+  position: relative;
+  top: $spacing*2;
+  margin: 0 auto;
+  z-index: $overlay-height + 100;
+  @include opacity-transition;
+}
+
+.dialog-inner {
+  padding: $spacing*1.5;
+}
+
+.dialog {
+  background-color: $lightest-color;
+  @include box-shadow($darkest-color $spacing/3 $spacing/3 $spacing*2);
+
+  .close-x {
+    font-size: $em*2;
+    position: absolute;
+    right: $spacing*4;
+    top: $spacing*1.5;
+    cursor: pointer;
+  }
+}

data/lib/sass/mobile/widgets/_form-elements.scss

@@ -0,0 +1,80 @@
+.input-container {
+  margin-top: $input-top-padding + $input-border-width + $shadow-padding/2;
+  margin-bottom: $input-top-padding;
+  margin-right: $input-side-padding $shadow-padding/2;
+  margin-left: $input-side-padding;
+}
+
+.input,
+input[type=text],
+input[type=password],
+input[type=email],
+textarea {
+  // overrides that should be in reset/normalize
+  outline-style: none;
+  resize: none;
+  -webkit-appearance: none;
+
+  @include line;
+  @include input-margin-fix;
+  @include border-radius;
+  @include bordered;
+  @include box-shadow(inset 0px $input-border-width-special $input-border-width-special $neutral-20);
+
+  background-color: $lightest-color;
+  font-size: $em;
+  color: $darkest-color;
+  padding: $input-top-padding  $input-side-padding;
+
+  &:focus {
+    @include focus-input-padding-fix;
+    border: $input-border-width-special solid $primary;
+    @include box-shadow(inset 0px $input-border-width-special*1.5 $input-border-width-special*1.5 $neutral-20);
+  }
+}
+
+input[type=checkbox] {
+  -webkit-appearance: checkbox;
+}
+input[type=radio] {
+  -webkit-appearance: radio;
+}
+
+textarea {
+  min-height: 100px;
+}
+@-moz-document url-prefix() {
+  textarea {
+    font-family: $body-font;
+  }
+}
+
+form {
+  .error-message {
+    display: none;
+  }
+
+  .error {
+    .error-message {
+      display: block;
+      color: $error-dark;
+    }
+
+    .file-input {
+      border: $input-border-width solid $error;
+    }
+
+    input[type=text],
+    input[type=password],
+    input[type=email],
+    textarea {
+      border: $input-border-width-special solid $error;
+      @include focus-input-padding-fix;
+
+      &:focus {
+        @include focus-input-padding-fix;
+        border: $input-border-width-special solid $primary;
+      }
+    }
+  }
+}

data/lib/sass/mobile/widgets/_header.scss

@@ -0,0 +1,6 @@
+#header {
+  background-color: $primary;
+  height: 3 * $em;
+  border-bottom: 1px solid transparentize($lightest-color, 0.8);
+  @include box-shadow($darkest-color 0px 0.5px 10px);
+}

data/lib/sass/mobile/widgets/_page-layout.scss

@@ -0,0 +1,9 @@
+body {
+  background-color: $neutral-60;
+}
+
+#page {
+  @include line;
+  width: 100%;
+  background-color: $lightest-color;
+}

data/lib/sass/shipd-all.scss

@@ -0,0 +1,9 @@
+@import "shipd-mobile";
+
+@media screen and (min-width: 768px) {
+  @import "shipd-tablet";
+}
+
+@media screen and (min-width: 1024px) {
+  @import "shipd-desktop";
+}

data/lib/sass/shipd-desktop.scss

@@ -0,0 +1,9 @@
+@import "compass/css3";
+@import "shipd-variables";
+
+
+@import "desktop/variables";
+@import "desktop/typography";
+@import "desktop/layout-elements";
+@import "desktop/button-form-elements";
+@import "desktop/grid";

data/lib/sass/shipd-mobile.scss

@@ -0,0 +1,20 @@
+/* This is the main CSS base class. Import it into HTML via:
+    <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
+*/
+
+@import "compass/reset";
+@import "compass/css3";
+@import "shipd-variables";
+
+@import "mobile/grid";
+@import "mobile/typography";
+
+// below this line is optional
+@import "mobile/oo-styles"; // for brevity, pick and choose your styles
+
+@import "mobile/widgets/form-elements";
+@import "mobile/widgets/buttons";
+@import "mobile/widgets/page-layout";
+@import "mobile/widgets/header";
+@import "mobile/widgets/dialog-overlay";
+@import "mobile/widgets/carousel";

data/lib/sass/shipd-tablet.scss

@@ -0,0 +1,9 @@
+@import "compass/css3";
+@import "shipd-variables";
+
+
+@import "tablet/variables";
+@import "tablet/typography";
+@import "tablet/layout-elements";
+@import "tablet/button-form-elements";
+@import "tablet/grid";

data/lib/sass/tablet/_button-form-elements.scss

@@ -0,0 +1,15 @@
+button,
+input[type=submit],
+a.button,
+div.button,
+label.button {
+  font-size: $em;
+}
+
+.input,
+input[type=text],
+input[type=password],
+input[type=email],
+textarea {
+  font-size: $em;
+}

data/lib/sass/tablet/_grid.scss

@@ -0,0 +1,39 @@
+.inner {
+  padding: $spacing;
+  @include line;
+}
+
+.spacer {
+  width: $spacing;
+  height: $spacing;
+}
+
+// mobile overrides
+.m-row { float: left; width: auto; }
+
+// creates a row in tablet mode only
+.t-row {
+  width: 100%;
+  @include line;
+}
+
+.m-hidden { display: block; }
+.d-hidden { display: block; }
+.t-hidden { display: none; }
+
+.t-unit{float:left;}
+.t-unit-right{float:right;}
+.t-size-1-1{width:100%;}
+.t-size-1-2{width:50%;}
+.t-size-1-3{width:33.33333%;}
+.t-size-1-4{width:25%;}
+.t-size-1-5{width:20%;}
+.t-size-2-3{width:66.66666%;}
+.t-size-2-5{width:40%;}
+.t-size-3-4{width:75%;}
+.t-size-3-5{width:60%;}
+.t-size-4-5{width:80%;}
+
+.right {
+  float: right;
+}

data/lib/sass/tablet/_layout-elements.scss

@@ -0,0 +1,15 @@
+#page {
+  max-width: $tablet-break-point - $spacing*2;
+  margin: 0 auto;
+  @include box-shadow($darkest-color 0 0 $spacing*2)
+}
+
+#header {
+  .inner {
+    padding: 10px;
+  }
+}
+
+.dialog-container {
+  width: 50%;
+}

data/lib/sass/tablet/_typography.scss

@@ -0,0 +1,6 @@
+h1 { font-size: $em*2.2; }
+h2 { font-size: $em*1.8; }
+h3 { font-size: $em*1.5; }
+body, h4, p { font-size: $em; }
+h5 { font-size: $em*0.9; }
+h6 { font-size: $em*0.75; }

data/lib/sass/tablet/_variable_overrides.scss

@@ -0,0 +1,2 @@
+$em: 18px;
+$spacing: 20px;

data/lib/sass/tablet/_variables.scss

@@ -0,0 +1,2 @@
+@import "../shipd-variables";
+@import "variable_overrides";