rpure-sass 0.1.1

data/assets/stylesheets/rpure/_buttons.scss

@@ -0,0 +1,188 @@
+.rpure-button {
+  display: inline-block;
+  zoom: 1;
+  line-height: normal;
+  white-space: nowrap;
+  vertical-align: middle;
+  text-align: center;
+  cursor: pointer;
+  -webkit-user-drag: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  box-sizing: border-box;
+  &::-moz-focus-inner {
+    padding: 0;
+    border: 0;
+  }
+}
+
+.rpure-button-group {
+  letter-spacing: -0.31em;
+  *letter-spacing: normal;
+  *word-spacing: -0.43em;
+  text-rendering: optimizespeed;
+}
+
+.opera-only :-o-prefocus {
+  word-spacing: -0.43em;
+}
+
+.rpure-button-group {
+  word-spacing: -0.43em;
+  .rpure-button {
+    letter-spacing: normal;
+    word-spacing: normal;
+    vertical-align: top;
+    text-rendering: auto;
+  }
+}
+
+.rpure-button {
+  font-family: inherit;
+  font-size: 100%;
+  padding: 0.5em 1em;
+  color: #444;
+  color: rgba(0, 0, 0, 0.8);
+  border: 1px solid #999;
+  border: none rgba(0, 0, 0, 0);
+  background-color: #E6E6E6;
+  text-decoration: none;
+  border-radius: 2px;
+}
+
+.rpure-button-hover {
+  filter: alpha(opacity=90);
+  background-image: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1));
+  background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1));
+}
+
+.rpure-button {
+  &:hover {
+    filter: alpha(opacity=90);
+    background-image: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1));
+    background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1));
+  }
+  &:focus {
+    filter: alpha(opacity=90);
+    background-image: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1));
+    background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1));
+    outline: 0;
+  }
+}
+
+.rpure-button-active {
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset, 0 0 6px rgba(0, 0, 0, 0.2) inset;
+  border-color: #000 \9
+;
+}
+
+.rpure-button {
+  &:active {
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset, 0 0 6px rgba(0, 0, 0, 0.2) inset;
+    border-color: #000 \9
+  ;
+  }
+  &[disabled] {
+    border: none;
+    background-image: none;
+    filter: alpha(opacity=40);
+    opacity: 0.40;
+    cursor: not-allowed;
+    box-shadow: none;
+    pointer-events: none;
+  }
+}
+
+.rpure-button-disabled {
+  border: none;
+  background-image: none;
+  filter: alpha(opacity=40);
+  opacity: 0.40;
+  cursor: not-allowed;
+  box-shadow: none;
+  pointer-events: none;
+  &:hover, &:focus, &:active {
+    border: none;
+    background-image: none;
+    filter: alpha(opacity=40);
+    opacity: 0.40;
+    cursor: not-allowed;
+    box-shadow: none;
+    pointer-events: none;
+  }
+}
+
+.rpure-button-hidden {
+  display: none;
+}
+
+.rpure-button-primary, .rpure-button-selected {
+  background-color: rgb(0, 120, 231);
+  color: #fff;
+}
+
+a {
+  &.rpure-button-primary, &.rpure-button-selected {
+    background-color: rgb(0, 120, 231);
+    color: #fff;
+  }
+}
+
+.rpure-button-group .rpure-button {
+  margin: 0;
+  border-radius: 0;
+  border-right: 1px solid #111;
+  border-right: 1px solid rgba(0, 0, 0, 0.2);
+  &:first-child {
+    border-top-left-radius: 2px;
+    border-bottom-left-radius: 2px;
+  }
+  &:last-child {
+    border-top-right-radius: 2px;
+    border-bottom-right-radius: 2px;
+    border-right: none;
+  }
+}
+
+.rpure-button-success,
+.rpure-button-error,
+.rpure-button-warning,
+.rpure-button-secondary {
+  color: white;
+  border-radius: 4px;
+  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+}
+
+.rpure-button-success {
+  background: rgb(28, 184, 65); /* this is a green */
+}
+
+.rpure-button-error {
+  background: rgb(202, 60, 60); /* this is a maroon */
+}
+
+.rpure-button-warning {
+  background: rgb(223, 117, 20); /* this is an orange */
+}
+
+.rpure-button-secondary {
+  background: rgb(66, 184, 221); /* this is a light blue */
+}
+
+.rpure-button-xsmall {
+    font-size: 70%;
+}
+
+.rpure-button-small {
+    font-size: 85%;
+}
+
+.rpure-button-large {
+    font-size: 110%;
+}
+
+.rpure-button-xlarge {
+    font-size: 125%;
+}

data/assets/stylesheets/rpure/_forms.scss

@@ -0,0 +1,286 @@
+.rpure-form {
+  input {
+    &[type="text"], &[type="password"], &[type="email"], &[type="url"], &[type="date"], &[type="month"], &[type="time"], &[type="datetime"], &[type="datetime-local"], &[type="week"], &[type="number"], &[type="search"], &[type="tel"], &[type="color"] {
+      padding: 0.5em 0.6em;
+      display: inline-block;
+      border: 1px solid #ccc;
+      box-shadow: inset 0 1px 3px #ddd;
+      border-radius: 4px;
+      vertical-align: middle;
+      box-sizing: border-box;
+    }
+  }
+  select, textarea {
+    padding: 0.5em 0.6em;
+    display: inline-block;
+    border: 1px solid #ccc;
+    box-shadow: inset 0 1px 3px #ddd;
+    border-radius: 4px;
+    vertical-align: middle;
+    box-sizing: border-box;
+  }
+  input {
+    &:not([type]) {
+      padding: 0.5em 0.6em;
+      display: inline-block;
+      border: 1px solid #ccc;
+      box-shadow: inset 0 1px 3px #ddd;
+      border-radius: 4px;
+      box-sizing: border-box;
+    }
+    &[type="color"] {
+      padding: 0.2em 0.5em;
+    }
+    &[type="text"]:focus, &[type="password"]:focus, &[type="email"]:focus, &[type="url"]:focus, &[type="date"]:focus, &[type="month"]:focus, &[type="time"]:focus, &[type="datetime"]:focus, &[type="datetime-local"]:focus, &[type="week"]:focus, &[type="number"]:focus, &[type="search"]:focus, &[type="tel"]:focus, &[type="color"]:focus {
+      outline: 0;
+      border-color: #129FEA;
+    }
+  }
+  select:focus, textarea:focus {
+    outline: 0;
+    border-color: #129FEA;
+  }
+  input {
+    &:not([type]):focus {
+      outline: 0;
+      border-color: #129FEA;
+    }
+    &[type="file"]:focus, &[type="radio"]:focus, &[type="checkbox"]:focus {
+      outline: thin solid #129FEA;
+      outline: 1px auto #129FEA;
+    }
+  }
+  .rpure-checkbox, .rpure-radio {
+    margin: 0.5em 0;
+    display: block;
+  }
+  input {
+    &[type="text"][disabled], &[type="password"][disabled], &[type="email"][disabled], &[type="url"][disabled], &[type="date"][disabled], &[type="month"][disabled], &[type="time"][disabled], &[type="datetime"][disabled], &[type="datetime-local"][disabled], &[type="week"][disabled], &[type="number"][disabled], &[type="search"][disabled], &[type="tel"][disabled], &[type="color"][disabled] {
+      cursor: not-allowed;
+      background-color: #eaeded;
+      color: #cad2d3;
+    }
+  }
+  select[disabled], textarea[disabled] {
+    cursor: not-allowed;
+    background-color: #eaeded;
+    color: #cad2d3;
+  }
+  input {
+    &:not([type])[disabled] {
+      cursor: not-allowed;
+      background-color: #eaeded;
+      color: #cad2d3;
+    }
+    &[readonly] {
+      background-color: #eee;
+      color: #777;
+      border-color: #ccc;
+    }
+  }
+  select[readonly], textarea[readonly] {
+    background-color: #eee;
+    color: #777;
+    border-color: #ccc;
+  }
+  input:focus:invalid, textarea:focus:invalid, select:focus:invalid {
+    color: #b94a48;
+    border-color: #e9322d;
+  }
+  input {
+    &[type="file"]:focus:invalid:focus, &[type="radio"]:focus:invalid:focus, &[type="checkbox"]:focus:invalid:focus {
+      outline-color: #e9322d;
+    }
+  }
+  select {
+    height: 2.25em;
+    border: 1px solid #ccc;
+    background-color: white;
+    &[multiple] {
+      height: auto;
+    }
+  }
+  label {
+    margin: 0.5em 0 0.2em;
+  }
+  fieldset {
+    margin: 0;
+    padding: 0.35em 0 0.75em;
+    border: 0;
+  }
+  legend {
+    display: block;
+    width: 100%;
+    padding: 0.3em 0;
+    margin-bottom: 0.3em;
+    color: #333;
+    border-bottom: 1px solid #e5e5e5;
+  }
+}
+
+.rpure-form-stacked {
+  input {
+    &[type="text"], &[type="password"], &[type="email"], &[type="url"], &[type="date"], &[type="month"], &[type="time"], &[type="datetime"], &[type="datetime-local"], &[type="week"], &[type="number"], &[type="search"], &[type="tel"], &[type="color"], &[type="file"] {
+      display: block;
+      margin: 0.25em 0;
+    }
+  }
+  select, label, textarea, input:not([type]) {
+    display: block;
+    margin: 0.25em 0;
+  }
+}
+
+.rpure-form-aligned {
+  input, textarea, select, .rpure-help-inline {
+    display: inline-block;
+    *display: inline;
+    *zoom: 1;
+    vertical-align: middle;
+  }
+}
+
+.rpure-form-message-inline {
+  display: inline-block;
+  *display: inline;
+  *zoom: 1;
+  vertical-align: middle;
+}
+
+.rpure-form-aligned {
+  textarea {
+    vertical-align: top;
+  }
+  .rpure-control-group {
+    margin-bottom: 0.5em;
+    label {
+      text-align: right;
+      display: inline-block;
+      vertical-align: middle;
+      width: 10em;
+      margin: 0 1em 0 0;
+    }
+  }
+  .rpure-controls {
+    margin: 1.5em 0 0 11em;
+  }
+}
+
+.rpure-form {
+  input.rpure-input-rounded, .rpure-input-rounded {
+    border-radius: 2em;
+    padding: 0.5em 1em;
+  }
+  .rpure-group {
+    fieldset {
+      margin-bottom: 10px;
+    }
+    input, textarea {
+      display: block;
+      padding: 10px;
+      margin: 0 0 -1px;
+      border-radius: 0;
+      position: relative;
+      top: -1px;
+    }
+    input:focus, textarea:focus {
+      z-index: 3;
+    }
+    input:first-child, textarea:first-child {
+      top: 1px;
+      border-radius: 4px 4px 0 0;
+      margin: 0;
+    }
+    input:first-child:last-child, textarea:first-child:last-child {
+      top: 1px;
+      border-radius: 4px;
+      margin: 0;
+    }
+    input:last-child, textarea:last-child {
+      top: -2px;
+      border-radius: 0 0 4px 4px;
+      margin: 0;
+    }
+    button {
+      margin: 0.35em 0;
+    }
+  }
+  .rpure-input-1 {
+    width: 100%;
+  }
+  .rpure-input-3-4 {
+    width: 75%;
+  }
+  .rpure-input-2-3 {
+    width: 66%;
+  }
+  .rpure-input-1-2 {
+    width: 50%;
+  }
+  .rpure-input-1-3 {
+    width: 33%;
+  }
+  .rpure-input-1-4 {
+    width: 25%;
+  }
+  .rpure-help-inline {
+    display: inline-block;
+    padding-left: 0.3em;
+    color: #666;
+    vertical-align: middle;
+    font-size: 0.875em;
+  }
+}
+
+.rpure-form-message-inline {
+  display: inline-block;
+  padding-left: 0.3em;
+  color: #666;
+  vertical-align: middle;
+  font-size: 0.875em;
+}
+
+.rpure-form-message {
+  display: block;
+  color: #666;
+  font-size: 0.875em;
+}
+
+@media only screen and (max-width: 480px) {
+  .rpure-form {
+    button[type="submit"] {
+      margin: 0.7em 0 0;
+    }
+    input {
+      &:not([type]), &[type="text"], &[type="password"], &[type="email"], &[type="url"], &[type="date"], &[type="month"], &[type="time"], &[type="datetime"], &[type="datetime-local"], &[type="week"], &[type="number"], &[type="search"], &[type="tel"], &[type="color"] {
+        margin-bottom: 0.3em;
+        display: block;
+      }
+    }
+    label {
+      margin-bottom: 0.3em;
+      display: block;
+    }
+  }
+  .rpure-group input {
+    &:not([type]), &[type="text"], &[type="password"], &[type="email"], &[type="url"], &[type="date"], &[type="month"], &[type="time"], &[type="datetime"], &[type="datetime-local"], &[type="week"], &[type="number"], &[type="search"], &[type="tel"], &[type="color"] {
+      margin-bottom: 0;
+    }
+  }
+  .rpure-form-aligned {
+    .rpure-control-group label {
+      margin-bottom: 0.3em;
+      text-align: left;
+      display: block;
+      width: 100%;
+    }
+    .rpure-controls {
+      margin: 1.5em 0 0 0;
+    }
+  }
+  .rpure-form .rpure-help-inline, .rpure-form-message-inline, .rpure-form-message {
+    display: block;
+    font-size: 0.75em;
+    padding: 0.2em 0 0.8em;
+  }
+}