boletia_ui 0.1.1

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

@@ -0,0 +1,139 @@
+/*** CLOSED TABLE WITH DATA   ***/
+.o-data-table {
+
+  width: 100%;
+  color: $bodytext;
+  border-spacing: 0;
+
+  th,td {
+    padding:  $base-space * .5 $base-space;
+    font-size: 1.4rem;
+  }
+
+  th {
+    font-weight: normal;
+    text-transform: uppercase;
+  }
+
+}
+
+.o-data-table--zebra{
+  border: 1px solid $lightgray;
+
+  th{
+    background: lighten($darkblue,3%);
+    color: $lightgray;
+  }
+
+  tbody tr:nth-child(odd) {background: lighten($lightgray,1%);}
+}
+
+.o-data-table--clean{
+
+  th {border-bottom: 2px solid $darkgray;}
+  th,td {padding: $base-space}
+  tbody tr {border-top:1px solid darken($lightgray,10%);}
+  tbody tr:nth-child(even) {background: none;}
+
+}
+
+.o-data-table--cart{
+  line-height: 1.4;
+
+  th {
+    letter-spacing: 2px;
+    border-bottom: 3px solid lighten($darkgray,10%);
+  }
+
+  th, td {padding: $base-space * .5}
+
+}
+
+
+
+.o-data-table--list {
+
+  th {border-bottom: 2px solid $darkgray;}
+  th,td {padding: $base-space}
+  tbody tr {border-top:1px solid darken($lightgray,10%);}
+  tbody tr td {border-bottom: 1px dashed darken($lightgray,15%);}
+
+}
+
+
+
+ 
+
+
+.o-data-table__title-link {
+    font-weight: bold;
+    color: $darkgray;
+
+    &.hover,&.focus {
+      color: $blue;
+    }
+}
+
+
+.o-data-table__status {
+  font-size: 4rem;
+  display: inline-block;
+  line-height: 0;
+  vertical-align: sub;
+
+  //Status should go here
+  
+}
+
+
+
+/* DATA TABLE PAGINATION */
+
+.o-table-pagination {
+
+  text-align: center;
+  display: table;
+  margin: 2.0rem auto 0;
+  border-top: 1px solid darken($lightgray,4%);
+  font-size: 1.4rem;
+
+  li { 
+
+    display: inline-block; 
+
+    &.is-selected {
+      border-top: 2px solid $blue;
+
+      a { 
+        color: $blue; 
+        cursor: default;
+        font-weight: bold;
+      }
+    }
+  }
+
+  li a {
+    display: block;
+    color: $bodytext;
+    line-height: 1;
+    text-decoration: none;
+    padding: $base-space * 0.5 $base-space * 0.75; 
+    @include animate;
+
+    &:hover,&:focus {
+      color: $blue;
+    }
+
+  }
+
+  li:first-child,li:last-child { 
+    border-top: 2px solid $blue;
+
+    a { padding: $base-space * 0.5  $base-space * 0.25; }
+  }
+
+  li:last-child {
+    @extend .u-text-right;
+  }
+
+}

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

@@ -0,0 +1,125 @@
+/*** WIZARD HEADER  ***/
+
+.o-wizard-header {
+	background:$white;
+	height: 10rem;
+	z-index: 2;
+	border: 1px solid darken($lightgray,5%);
+}
+
+.o-wizard-header__title-bar {
+	height: 10rem;
+	display: table;
+	@extend .u-left;
+}
+
+
+.o-wizard-header__info {
+	padding: $base-space * 1.5;
+}
+
+.o-wizard-header__subtitle {
+	text-transform: uppercase;
+	font-weight: normal;
+	line-height: 1;
+	display: inline-block;
+	font-size: 1.6rem;
+	margin-bottom: 0.6rem;
+}
+
+
+
+.o-wizard-status {
+	width: 13rem;
+	height: 10rem;
+	background: lighten($gray,9%);
+	color:$white;
+	padding: $base-space * .5;
+	border-left: 1px solid darken($lightgray,5%);
+	display: table;
+	@extend .u-border-box;
+	@extend .u-right;
+}
+
+.o-wizard-status__container {
+	display: table-cell;
+	vertical-align: middle;
+}
+
+.js-tooltip__badge{
+	cursor: help;
+}
+
+.o-wizard-status__label { 
+	font-style: italic;
+	margin-bottom: 0.5rem;
+	color: $darkgray;
+	display: block;
+
+	strong{color:inherit;}
+}
+
+.o-wizard-status__counter, .o-wizard-status__counter-name {
+	line-height: 1.2;
+}
+
+.o-wizard-status__counter-name {
+	text-transform: uppercase;
+	color: $lightgray;
+	font-weight: normal;
+}
+
+.o-wizard-status__badge {
+	color: $lightgray;
+	display: inline-block;
+	padding: $base-space * 0.25 $base-space * 1;
+	font-size: 1.4rem;
+	@include border-radius(12px);
+}
+
+
+
+/* TOP NAVIGATION */
+
+.o-wizard-nav {margin-bottom: $base-space;	}
+
+.o-wizard-nav__link {
+	font-size: 1.6rem;
+	color:darken($lightgray,50%);
+}
+
+
+
+/* WIZARD ACTIONS */
+
+.c-wizard-actions {
+	font-size: 1.6rem;
+	display:table;
+	height:8rem;
+	width: 100%;
+	border-top: 1px solid $lightgray;
+	@extend .u-border-box;
+
+	.c-wizard-actions__button{
+		width: 50%;
+		line-height: 1.2;
+		display: table-cell;
+		vertical-align: middle;
+		@extend .u-text-center;
+	}
+
+	.u-button--primary{
+		-webkit-box-shadow: none;
+		-moz-box-shadow: none;
+		box-shadow: none;
+	}
+
+	.u-button--link {padding: 0;}
+}
+
+
+/* THEMES */
+
+.t-wizard-status--blue {
+	background: lighten($darkblue,20%);
+}

data/vendor/assets/boletia_ui/stylesheets/vendor/_select.scss

@@ -0,0 +1,109 @@
+/* Default custom select styles */
+div.js-custom-select {
+	@extend .u-inline-block-middle;
+	position: relative;
+	z-index: 1;
+	border: 1px solid darken($lightgray,3%);
+  	background: $lightgray;
+  	font-size: 2.2rem;
+  	@include border-radius(5px);
+}
+
+div.js-custom-select:focus {outline: none;}
+
+.js-custom-select select {display: none;}
+
+.js-custom-select span {
+	display: block;
+	position: relative;
+	cursor: pointer;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
+
+/* Placeholder and selected option */
+.js-custom-select > span::after {
+	speak: none;
+	position: absolute;
+	top: 50%;
+	-webkit-transform: translateY(-50%);
+	transform: translateY(-50%);
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+.js-custom-select > span::after {
+	font-family: "SSStandard";
+	right: 7%;
+	font-size: 40%;
+	content: '';
+	color:darken($lightgray,20%);
+	@include animate;
+}
+
+.js-custom-select.cs-active > span::after {
+	top:40%;
+	-webkit-transform: translateY(-50%) rotate(180deg);
+	transform: translateY(-50%) rotate(180deg);
+}
+
+div.cs-active {z-index: 200;}
+
+/* Options */
+
+.js-custom-select .cs-placeholder {
+	color: $blue;
+	padding: $base-space * 0.25 $base-space * 2 $base-space * 0.25 $base-space * 1.25;
+	font-weight: 600;
+	text-decoration: none;
+	cursor: pointer;
+	display: inline-block;
+
+	&:hover {color: darken($blue,5%)}
+}
+
+.js-custom-select .cs-options {
+	position: absolute;
+	overflow: hidden;
+	background: $white;
+	left: 0;
+	opacity:0;
+	visibility: hidden;
+	@include animate;
+	@include shadow($lightgray);
+	width: 100%;
+
+}
+
+.js-custom-select.cs-active .cs-options {
+	visibility: visible;
+	opacity:1;
+}
+
+.js-custom-select ul {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	width: 100%;
+}
+
+.js-custom-select ul span {
+	border-bottom: 1px solid $lightgray;
+	display: block;
+	padding: $base-space * 0.5 $base-space * 1.25;
+	font-size: 2.0rem;
+	&:hover {background:lighten($lightgray,4%)}
+}
+
+.js-custom-select ul li.cs-focus span {
+	background-color: $gray;
+}
+
+/* Optgroup and optgroup label */
+.js-custom-select li.cs-optgroup ul {
+	padding-left: 1rem;
+}
+
+.js-custom-select li.cs-optgroup > span {
+	cursor: default;
+}