boletia_ui 0.1.1

data/vendor/assets/boletia_ui/stylesheets/partials/_dashboard.scss

@@ -0,0 +1,192 @@
+/* DASHBOARD GENERAL ELEMENTS */
+
+.c-dashboard {padding-top: $base-space * 4}
+
+
+.c-dashboard__header {
+	border-bottom: 1px solid $lightgray;
+	margin-bottom: 1.4rem;
+}
+
+.c-dashboard__title {
+	margin-bottom: $base-space * 2;
+	text-transform: uppercase;
+	font-weight: 500;
+	letter-spacing: 1px;
+}
+
+
+.c-dashboard__subtitle {
+	margin-bottom: $base-space;
+	border-bottom: 1px dotted darken($lightgray,20%);
+	padding-bottom: $base-space;
+	font-weight: normal;
+}
+
+
+.c-dashboard__filter {
+	font-size: 1.8rem;
+	font-weight: 300;
+	margin-bottom: 1.4rem;
+
+	select { display: inline-block;}
+}
+
+
+
+.c-dashboard__label {
+	font-weight: normal;
+	text-transform: uppercase;
+}
+
+
+.c-dashboard__chart {
+	margin-top: 1rem;
+}
+
+
+.c-dashboard__subsection {background:darken($lightgray,4%);}
+
+
+
+.c-dashboard__finished-message{
+	font-weight: 500;
+	margin-bottom: $base-space * 2;
+}
+
+
+/* STATISTICS CARD */
+
+.c-statistics-card {
+	padding:$base-space;
+	display: table;
+	height:22rem;
+	width: 100%;
+	@extend .u-border-box;
+	@extend .u-text-center;
+	@extend .o-boletia-card;
+}
+
+.c-statistics-card__label {
+	text-transform: uppercase;
+	font-weight: normal;
+	color: lighten($darkblue,10%);
+}
+
+.c-statistics-card__counter {
+	display: table-cell;
+	color: lighten($darkblue,10%);
+	@extend .u-inline-block-middle;	
+}
+
+.c-statistics-card__data {
+	font-size: 8.8rem;
+	line-height: 1;
+	font-weight: 200;
+}
+
+
+.c-statistics-card__data--small {
+	font-size: 3.4rem;
+	font-weight: 300;
+}
+
+
+
+.c-statistics-card--is-new {
+	border-top: 10px solid $darkblue;
+
+	a{
+		margin-top: $base-space;
+		display: block
+	}
+}
+
+.c-statistics-card--is-good {
+	border-top: 10px solid $green;
+}
+
+.c-statistics-card--is-bad {
+	border-top: 10px solid $red;
+}
+
+
+
+.c-statistics-number__data {
+	font-size: 4.2rem;
+	line-height: 1;
+	font-weight: 700;
+	color: $darkblue;
+	letter-spacing: -1px;
+	margin-bottom: 1.4rem;
+}
+
+.c-statistics-number__label {
+	font-size: 1.4rem;
+	color: $bodytext;
+	font-weight: normal;
+	margin-bottom: 0.4rem;
+}
+
+
+
+/*** LEGEND  ***/ 
+
+
+.o-chart-legend__title {
+    display: inline-block;
+    margin-bottom: 1.2rem;
+   	margin-right: 0.8rem
+}
+
+.o-chart-legend__color-sample {
+    display: block;
+    @extend .u-left;
+    width: 1em;
+    height: 1em;
+    border: 2px solid; /* Comment out if you don't want to show the fillColor */
+    margin-right: 0.5em;
+}
+
+
+
+/*** CHART TYPES  ***/ 
+
+.c-donutchart {position: relative;}
+
+.c-donutchart__counter {
+	position: absolute;
+	color: lighten($darkblue,10%);
+	width:50%;
+	@extend .u-text-center;
+	top: 30%;
+	left:50%;
+	margin-left: -25%;	
+}
+
+.c-donutchart__number {
+	font-size: 5.8rem;
+	line-height: .8;
+}
+
+.c-donutchart__label {
+	width: 10rem;
+	line-height: 1.2;
+	font-weight: normal;
+}
+
+
+
+
+
+/* ICONS */
+
+.u-finished-icon{
+	background: url('../images/trophy.png') no-repeat center top;
+	background-size: contain;
+	width: 15rem;
+	height:15rem;
+	margin-bottom: $base-space * 2;
+}
+
+

data/vendor/assets/boletia_ui/stylesheets/partials/_forms.scss

@@ -0,0 +1,395 @@
+/* FORM GENERAL ELEMENTS */
+
+input[type="text"],
+input[type="button"],
+button,
+input[type="email"],
+textarea,
+label,
+select {
+  font-size: 1.4rem;
+  font-family: $regular
+}
+
+ 
+fieldset{
+  margin: 0;
+  padding: 0;
+  border:none
+}
+
+.u-fieldset-title {
+  width: 100%;
+  position: relative;
+  text-transform: uppercase;
+  font-weight: normal;
+  display: block;
+  margin-bottom: $base-space;
+  font-size: 1.4rem;
+}
+
+label {
+  color: $darkgray;
+  cursor: pointer;
+  font-weight: bold;
+  line-height: 1.4;
+  display: inline-block;
+}
+
+
+.u-form-field { margin-bottom: $base-space * 1.5; }
+
+.u-type-select-field { margin-bottom: $base-space * .5 }
+
+
+.u-help-text {
+  font-size: 1.4rem;
+  display: inline-block;
+  font-style: italic;
+  margin-top: $base-space *.5;
+  line-height: 1.2;
+  color: darken($gray,10%);
+}
+
+.u-required-field {
+  color:darken($gray,30%);
+  font-weight: bold;
+  margin-left: $base-space * .25;
+}
+
+
+/* INPUT ELEMENTS */
+
+input[type="text"],input[type="email"],textarea,input[type="date"], {
+  display: block;
+  width: 100%;
+  @extend .u-border-box;
+  padding: $base-space * 0.5;
+  border: 1px solid darken($lightgray,10%);
+  background: lighten($lightgray,5%); 
+  position: relative;
+  color: darken($bodytext,10%);
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+  @include animate;
+
+  &:focus{background:$white;border-color:darken($gray,10%)}
+
+  &.error{border-color:darken($red,10%);}
+
+}
+
+textarea {height: 12rem}
+
+
+/* VALIDATIONS */
+
+.u-inline-validation {
+  margin-top: $base-space * 2.5;
+  line-height: 1.5;
+  font-size: 1.4rem;
+
+  .u-input-icon{
+    width: 100%;
+    height: 2rem;
+    background-size: 1.5rem;
+    padding-left:$base-space * 1.5;
+    background-repeat:no-repeat;
+    background-position: left center;
+    background-size: 1.5rem;
+
+    &.is-valid {
+      background-image:url(../icons/check.png);
+      color:$darkgreen;
+    }
+
+    &.is-invalid {
+      color:$red;
+      background-image:url(../icons/error.png);
+    }
+  }
+}
+
+
+.u-field-error {
+  font-size: 1.4rem;
+  display: inline-block;
+  font-style: italic;
+  margin-top: $base-space *.5;
+  line-height: 1.2;
+  color: $red;
+}
+
+/* CUSTOM FILE UPLOAD */
+
+.u-file-upload {
+
+  background: $lightgray;
+  display: block;
+  border: darken($lightgray,10%);
+  cursor: pointer;
+  padding: $base-space * 2;
+
+  input[type="file"] {
+    position: absolute;
+    left: -1000rem;
+  }
+
+}
+
+
+/* DATE PICKER */
+
+input[type="text"].js-datepicker {
+  padding: $base-space * 0.35;
+  font-size: 1.3rem;
+}
+
+
+/* SELECT */
+
+.u-select-wrapper {
+  display: block;
+  width: 100%;
+  border: 1px solid darken($lightgray,10%);
+  background: lighten($lightgray,5%); 
+  position: relative;
+  @extend .u-border-box;
+  
+  &:after {
+    content:'›';
+    font-family: "SSStandard";
+    font-size:2.6rem;
+    color: $gray;
+    right:1rem;
+    top:-.3rem;
+    position:absolute;
+    pointer-events:none;
+    -webkit-transform: rotate(90deg);
+    -moz-transform: rotate(90deg);
+    -ms-transform: rotate(90deg);
+    -o-transform: rotate(90deg);
+    transform: rotate(90deg);
+  }
+
+}
+
+.u-select-wrapper--small {
+  border-width: 1px;
+  width: 80%;
+
+  &:after {
+    font-size:.8rem;
+    right:1rem;
+    top:1rem;
+  }
+}
+
+
+select {
+  width: 100%;
+  padding: $base-space * 0.35;
+  @extend .u-border-box;
+  background: none;
+  color: darken($bodytext,10%);
+  border:none;
+  outline:none;
+  display: inline-block;
+  -webkit-appearance:none;
+  -moz-appearance:none;
+  appearance:none;
+  cursor:pointer;
+  font-size: 1.3rem;
+}
+
+
+/* CHECKBOX VALIDATION */
+
+.u-check-message {
+  display: block;
+  margin: $base-space 0;
+}
+
+
+
+
+/* SMALL INPUTS */
+
+.u-input--small {
+
+  input[type="text"],input[type="email"],textarea, .select-wrapper select {
+    padding: $base-space * .5;
+    font-size: 1.3rem;
+  }
+
+  textarea {height: 8rem;}
+
+  .u-select-wrapper:after {top:.8rem}
+
+}
+
+
+
+/* ASSIGN SEAT INPUTS */
+
+.u-assign-seat__label {
+  font-size: 1.6rem;
+  margin: $base-space 0 $base-space *.5
+}
+
+.u-assign-seat__input {
+  margin-bottom: $base-space * 2
+}
+
+
+/* EMPTY STATE FORM */
+
+.o-empty-state-form {
+  display: block;
+  padding: $base-space * 2 $base-space * 2;
+  background: $lightgray;
+  border: 1px solid darken($lightgray,2%);
+  text-align: center;
+  text-decoration: none;
+  @include animate;
+
+  &:hover {
+    text-decoration: none;
+    background: darken($lightgray,2%);
+    border: 1px solid darken($lightgray,4%);
+
+  }
+}
+
+
+
+.o-empty-state-form__description {
+  color: $bodytext;
+  font-size: 1.8rem;
+  margin-bottom: 0;
+}
+
+
+
+
+/** SEARCH ELEMENT */
+
+.o-search {position: relative;}
+
+.o-search__icon {
+  background-size: 100%;
+  position: absolute;
+}
+
+
+.o-search--default{
+  
+  .o-search__input {
+    background: lighten($lightgray,5%);
+    border:1px solid darken($lightgray,10%);
+    @include border-radius(5px);
+    padding: $base-space $base-space $base-space $base-space * 3;
+    width: 100%;
+    color: $darkgray;
+    @include animate;
+    @extend .u-border-box;
+    display: block;
+
+    &:focus {background:$white;}
+
+  }
+
+}
+
+
+.o-search--medium{
+
+  .o-search__input  {
+    padding: $base-space * 0.75 $base-space * 0.75 $base-space * 0.75 $base-space * 3;
+  }
+
+  .o-search__icon{
+    width: 1.5rem;
+    height: 1.5rem;
+    top: 1.4rem;
+    left:1.8rem;
+  }
+
+  .o-search__input {
+    font-size: 1.6rem;
+    border-width: 1px;
+  }
+}
+
+
+.o-search--big{
+
+  .o-search__icon{
+    width: 1.8rem;
+    height: 1.8rem;
+    top:2rem;
+    left:1.8rem;
+  }
+
+  .o-search__input {
+    font-size: 2.29rem;
+    border-width: 2px;
+  }
+}
+
+
+
+
+/* SEARCH FILTERS */
+
+
+.o-search-filters {
+  margin-top: 1.2rem;
+  margin-bottom: 3.0rem;
+}
+
+.o-search-filters__filter-name {
+  font-size: 1.4rem;
+  display: inline-block;
+  margin-bottom: 0.2rem;
+}
+
+.o-search-filters__tags {
+
+  li { 
+    display: inline-block;
+    margin-right: 0.5rem;
+  }
+
+  li:last-child{margin-right: 0;}
+
+  a {
+    display: inline-block;
+    background: $darkgray;
+    color: $lightgray;
+    padding: $base-space * 0.25 $base-space * 0.75;
+    font-size: 1.3rem;
+    text-decoration: none;
+    @include border-radius(4px);
+    @include animate;
+
+    &:hover,&:focus {
+      background: $blue; 
+    }
+  }
+}
+
+
+/* JQUERY UI STATE HIGHLIGHT */
+
+.ui-state-highlight{
+  background: lighten($lightgray,2%);
+  border:none;
+}
+
+
+/* Targetting Webkit browsers only. FF will show the dropdown arrow with so much padding. */
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+    .u-select-wrapper select {padding-right:18px}
+}

data/vendor/assets/boletia_ui/stylesheets/partials/_grid.scss

@@ -0,0 +1,85 @@
+/** CONTAINERS */
+
+//Static Containers
+.u-wrapper40 {width: 40rem;}
+.u-wrapper60 {width: 60rem;}
+.u-wrapper50 {width: 50rem;}
+.u-wrapper80 {width: 80rem;}
+.u-wrapper96 {width: 96rem;}
+.u-wrapper100 {width: 100rem;}
+.u-wrapper120 {width: 120rem;}
+.u-wrapper140 {max-width:140rem;width:95%;}
+
+
+//Responsive Containers
+.u-wrapper-r{width:95%;}
+.u-wrapper50r {max-width:50rem; @extend .u-wrapper-r;}
+.u-wrapper60r {max-width:60rem; @extend .u-wrapper-r;}
+.u-wrapper80r {max-width:80rem; @extend .u-wrapper-r;}
+.u-wrapper140r {max-width:140rem; @extend .u-wrapper-r}
+.u-wrapper120r {max-width:120rem; @extend .u-wrapper-r;}
+
+//Front End Containers
+.o-static-pages .u-wrapper {max-width:96rem;width: 80%;}
+.o-welcome-box .u-wrapper {max-width: 55rem;width:80%;}
+
+
+/** FORMATING COLUMNS */
+.u-col-row, .u-grid-row  {
+
+	&:before, &:after {display: table;content:"";}
+
+	&:after {clear:both}
+}
+
+// .u-col-row is used for layout design 
+.u-col-row {width: 100%;position: relative;}
+
+
+// .u-grid-row is used for content with a regular space between u-columns
+.u-grid-row {
+	position:relative;
+	margin-left:$base-space * -1;
+	margin-right: $base-space * -1;
+
+	.u-cols {@extend .u-col-space;}
+}
+
+.u-col-space {
+	padding-left:$base-space;
+	padding-right:$base-space;
+}
+
+.u-cols {
+	@extend .u-left;
+	@extend .u-border-box;
+	position: relative;
+}
+
+.u-col1 {@extend .u-cols;width:$u-col;}
+.u-col2 {@extend .u-cols;width:$u-col * 2}
+.u-col3 {@extend .u-cols;width:$u-col * 3}
+.u-col4 {@extend .u-cols;width:$u-col * 4}
+.u-col5 {@extend .u-cols;width:$u-col * 5}
+.u-col6 {@extend .u-cols;width:$u-col * 6}
+.u-col7 {@extend .u-cols;width:$u-col * 7}
+.u-col8 {@extend .u-cols;width:$u-col * 8}
+.u-col9 {@extend .u-cols;width:$u-col * 9}
+.u-col10 {@extend .u-cols;width:$u-col * 10}
+.u-col11 {@extend .u-cols;width:$u-col * 11}
+.u-col12 {@extend .u-cols;;width:100%;}
+
+/* Push class are applied in the same .u-col_ class */
+.u-push1 {margin-right:$u-col;}
+.u-push2 {margin-right:$u-col * 2;}
+.u-push3 {margin-right:$u-col * 3;}
+.u-push4 {margin-right:$u-col * 4;}
+.u-push5 {margin-right:$u-col * 5;}
+.u-push6 {margin-right:$u-col * 6;}
+.u-push7 {margin-right:$u-col * 7;}
+.u-push8 {margin-right:$u-col * 8;}
+.u-push9 {margin-right:$u-col * 9;}
+.u-push10 {margin-right:$u-col * 10;}
+.u-push11 {margin-right:$u-col * 11;}
+
+.u-full-container {@extend .u-inline-block;width: 100%;}