uol_frontend_framework_rails 0.1.0 → 0.2.0

data/vendor/assets/stylesheets/components/app/_thumbnail.scss

@@ -0,0 +1 @@
+@import "../common/thumbnail";

data/vendor/assets/stylesheets/components/common/_addressBox.scss

@@ -0,0 +1,22 @@
+.addressBox {
+	background: $white;
+	border: 1px solid $color-border;
+	padding: $baseline $gutter;
+}
+
+.addressBox iframe {
+	margin-bottom: $baseline;
+}
+
+.addressBox li:not(:last-of-type) {
+	margin-bottom: $baseline/4;
+}
+
+.addressBox li:first-of-type {
+	margin-bottom: $baseline;
+}
+
+.addressBox a {
+	color: inherit;
+	text-decoration: underline;
+}

data/vendor/assets/stylesheets/components/common/_button.scss

@@ -0,0 +1,187 @@
+$button-height: rem(40px) !default;
+
+.button {
+	display: inline-block;
+	font-size: rem(13px);
+	height: $button-height;
+	line-height: $button-height;
+	padding: 0 $gutter*1.5;
+	border: 0;
+	border-radius: $borderRadius-button;
+	cursor: pointer;
+	box-shadow: none;
+	outline: 0;
+	vertical-align: middle;
+	transition: $transition-type $transition-duration background;
+	text-align: center;
+	text-decoration: none;
+}
+
+.button.button--secondary:disabled {
+	color: lighten($color-text, 50%);
+	cursor: not-allowed;
+}
+
+a.button:not(.button--asLink):hover {
+	text-decoration: none;
+}
+
+%button--hasDropdown {
+	> .fa:last-of-type { margin-left: $gutter/2; }
+}
+
+.button.button--dropdown,
+.button.button--hasDropdown {
+	@extend %button--hasDropdown;
+}
+
+%button--unslyted {
+	height: auto;
+	border: 0;
+	padding: 0;
+	background: transparent;
+}
+
+.button.button--unstyled {
+	@extend %button--unstyled;
+}
+
+
+.button.button--primary {
+	color: $white;
+	background: $button-primary-background;
+}
+
+.button.button--primary:hover {
+	background: lighten($color-primary, 10%);
+}
+
+.button.button--primary.button--outlined {
+	background: transparent;
+	border: 1px solid $color-primary;
+	color: $color-primary;
+}
+
+.button.button--primary.button--outlined:hover {
+	color: darken($color-primary, 5%);
+	border-color: darken($color-primary, 5%);
+}
+
+.button.button--primary.button--borderLess {
+	color: $color-primary;
+}
+
+
+.button.button--secondary {
+	background: $button-secondary-background;
+	color: lighten($color-text, 25%);
+}
+
+.button.button--secondary:hover {
+	
+}
+
+.button.button--secondary.button--outlined {
+	background: transparent;
+	border: 1px solid $color-border;
+	color: darken($color-border, 20%);
+}
+
+.button.button--secondary.button--outlined:hover {
+	border-color: darken($color-border, 10%);
+	color: darken($color-border, 30%);
+}
+
+.button.button--secondary.button--borderLess {
+	color: lighten($color-text, 25%);
+}
+
+
+.button.button--danger {
+	background: $button-danger-background;
+	color: $white;
+}
+
+.button.button--danger.button--outlined {
+	background: transparent;
+	color: $button-danger-background;
+	border: 1px solid $button-danger-background;
+}
+
+.button.button--danger.button--outlined:hover {
+	color: darken($button-danger-background, 5%);
+	border-color: darken($button-danger-background, 5%);
+}
+
+.button.button--danger.button--borderLess {
+	color: $button-danger-background;
+}
+
+
+.button.button--success {
+	background: $button-success-background;
+	color: $white;
+}
+
+.button.button--success.button--outlined {
+	background: transparent;
+	color: $button-success-background;
+	border: 1px solid $button-success-background;
+}
+
+.button.button--success.button--outlined:hover {
+	color: darken($button-success-background, 5%);
+	border-color: darken($button-success-background, 5%);
+}
+
+.button.button--success.button--borderLess {
+	color: $button-success-background;
+}
+
+
+
+.button.button--borderLess {
+	background: transparent;
+	border: 0;
+	padding: 0;
+}
+
+.button.button--borderLess:hover {
+	background: transparent;
+} 
+
+.button--lightIcon {
+	@extend %button--unstyled;
+	color: $color-lightIcon;
+	font-size: rem(17px);
+}
+
+.button--lightIcon:hover {
+	color: darken($color-lightIcon, 10%);
+}
+
+.button.button--circular {
+	width: rem(40px);
+	height: rem(40px);
+	border: 1px solid $color-border;
+}
+
+
+.button.button--symmetricalIcon {
+	width: rem(40px);
+	height: rem(40px);
+	padding: 0;
+} 
+
+.button.button--bigger {
+	font-size: rem(15px);
+}
+
+
+
+/**
+ * Button group
+ */
+.buttonGroup > .button:not(:last-of-type) {
+	margin-right: $gutter/2;
+}

data/vendor/assets/stylesheets/components/common/_clickBox.scss

@@ -0,0 +1,39 @@
+.clickBox {
+	display: flex;
+	align-items: center;
+	color: inherit;
+	background: $white;
+	padding: $baseline $gutter*2;
+	border: 1px solid transparent;
+	border-radius: $borderRadius;
+	transition: .2s ease box-shadow, .2s ease border-color, .1s ease transform;
+	text-decoration: none;
+}
+
+.clickBox:hover {
+	box-shadow: 0 0 15px 0px rgba(0, 0, 0, 0.07);
+	border-color: rgba(0,0,0,.1);
+	text-decoration: none;
+}
+
+.clickBox:active {
+	transform: scale(0.99);
+}
+
+.clickBox-image {
+	max-width: rem(65px);
+}
+
+.clickBox-image:first-child {
+	margin-right: $gutter*3;
+}
+
+.clickBox p:last-child {
+	margin-bottom: 0;
+}
+
+@media (max-width: 800px) {
+	.clickBox {
+		border-color: $color-border;	
+	}
+}

data/vendor/assets/stylesheets/components/common/_datePicker.scss

@@ -0,0 +1,22 @@
+$react-dates-color-primary: $color-primary;
+$react-dates-color-primary-dark: $body-bg;
+$react-dates-color-border: $color-border;
+$react-dates-color-placeholder-text: $color-text;
+$react-dates-color-text-focus: $color-text;
+$react-dates-color-focus: $body-bg;
+
+// @import '~react-dates/css/variables.scss';
+// @import '~react-dates/css/styles.scss';
+
+.SingleDatePickerInput {
+	@extend .formControl;
+	padding: 0;
+	cursor: pointer;
+}
+
+.DateInput {
+	font-size: $fontSize;
+	padding: $baseline/8 $gutter/2;
+	width: auto;
+	min-width: rem(100px);
+}

data/vendor/assets/stylesheets/components/common/_thumbnail.scss

@@ -0,0 +1,8 @@
+.thumbnail {
+	width: rem(40px);
+	height: rem(40px);
+}
+
+.thumbnail-image {
+	border-radius: 2px;
+}

data/vendor/assets/stylesheets/components/web/_addressBox.scss

@@ -0,0 +1 @@
+@import "../common/addressBox";

data/vendor/assets/stylesheets/components/web/_all.scss

@@ -0,0 +1,18 @@
+@import
+	"header",
+	"nav",
+	"button",
+	"thumbnail",
+	"table",
+	"paginator",
+	"form",
+	"tag",
+	"definitionList",
+	"addressBox",
+	"clickBox",
+	"card",
+	"datePicker",
+	"dropdown",
+	"selectable",
+	"modal",
+	"typeahead";

data/vendor/assets/stylesheets/components/web/_button.scss

@@ -0,0 +1,5 @@
+@import "../common/button";
+
+.button.button--borderLess:hover {
+	text-decoration: underline;
+} 

data/vendor/assets/stylesheets/components/web/_card.scss

@@ -0,0 +1,58 @@
+.card {
+	display: block;
+	background: $white;
+	border: 1px solid $color-border;
+	border-radius: $borderRadius;
+}
+
+a.card {
+	color: inherit;
+	transition: 0.2s ease box-shadow, 0.2s ease border-color, 0.1s ease transform;
+	-webkit-tap-highlight-color: transparent;
+}
+
+a.card:hover {
+	box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.07);
+	text-decoration: none;
+}
+
+a.card:active {
+	transform: scale(0.98);
+}
+
+.card:not(:last-of-type) {
+	margin-bottom: $baseline/2;
+}
+
+.card-header {
+	background: $card-header-bg;
+	padding: $baseline/2 $gutter;
+}
+
+.card-title {
+	font-weight: 600;
+}
+
+.card-header.card-header--split {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.card-content {
+	padding: $baseline/2 $gutter;
+}
+
+.card-content dd {
+	text-align: right;
+}
+
+.card.card--invoice .grid-cell:last-child,
+.card.card--bankAccounts .grid-cell:last-child {
+	text-align: right;
+}
+
+.card.card--invoice .grid,
+.card.card--bankAccounts .grid {
+	align-items: center;
+}

data/vendor/assets/stylesheets/components/web/_clickBox.scss

@@ -0,0 +1 @@
+@import "../common/clickBox";

data/vendor/assets/stylesheets/components/web/_datePicker.scss

@@ -0,0 +1 @@
+@import "../common/datePicker"

data/vendor/assets/stylesheets/components/web/_definitionList.scss

@@ -0,0 +1,12 @@
+.definitionList.grid {
+	margin-bottom: $baseline/2;
+}
+
+.definitionList dt,
+.definitionList dd {
+
+}
+
+.definitionList dt {
+	font-weight: 600;
+}

data/vendor/assets/stylesheets/components/web/_dropdown.scss

@@ -0,0 +1,14 @@
+.dropdown {
+	background: $white;
+	padding: $baseline $gutter*2;
+	border-radius: 2px;
+	box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.07);
+}
+
+.dropdown.dropdown--withDatePicker {
+	width: 350px;
+}
+
+.dropdown.dropdown--withUserMenu {
+	width: 250px;
+}

data/vendor/assets/stylesheets/components/web/_form.scss

@@ -0,0 +1,288 @@
+$input-height: rem(40px);
+$fittedAddon-width: rem(37px);
+
+.formControl {
+	display: block;
+	width: 100%;
+	height: $input-height;
+	background: $white;
+	padding: 0 $gutter;
+	border: 1px solid $color-border;
+	border-radius: $borderRadius;
+	outline: none;
+	box-shadow: none;
+	transition: $transition-type $transition-duration border-color;
+}
+
+.formControl[type="text"] {
+	-webkit-appearance: none;
+}
+
+.formControl:disabled {
+	background: lighten($color-border, 10%);
+	cursor: not-allowed;
+}
+
+.formControl:not(:disabled):not(:focus):hover {
+	border-color: darken($color-border, 7%);
+}
+
+.formControl:focus {
+	border-color: $color-primary;
+}
+
+select.formControl {
+	cursor: pointer;
+}
+
+textarea.formControl {
+	max-width: 100%;
+	min-height: $baseline*4;
+	padding: $baseline/2 $gutter;
+}
+
+/**
+ * Form validation
+ */
+
+.is-danger .formControl,
+.is-danger .formControl:not(:focus):hover {
+	border-color: $color-danger;
+}
+
+.is-danger .formControlFeedback {
+	color: $color-danger;
+}
+
+.is-success .formControl,
+.is-success .formControl:not(:focus):hover {
+	border-color: $color-success;
+}
+
+.is-success .formControlFeedback {
+	color: $color-success;
+}
+
+.is-warning .formControl,
+.is-warning .formControl:not(:focus):hover {
+	border-color: $color-warning;
+}
+
+.is-warning .formControlFeedback {
+	color: $color-warning;
+}
+
+
+.formControlFeedback { display: none }
+
+.is-danger .formControlFeedback,
+.is-success .formControlFeedback,
+.is-warning .formControlFeedback { 
+	display: block; 
+	font-size: $fontSize-smaller;
+	margin-top: $baseline/4;
+}
+
+
+
+.inputGroup {
+	position: relative;
+	display: flex;
+	align-items: center;
+}
+
+// FF wierd width fix
+.inputGroup input.formControl {
+	min-width: 1px;
+}
+
+.inputGroup .formControl:not(:first-child):not(.formControl--hasFittedAddonFromLeft):not(.formControl--hasFittedAddonFromRight) {
+	border-top-left-radius: 0;
+	border-bottom-left-radius: 0;
+}
+
+.inputGroup .formControl:not(:last-child):not(.formControl--hasFittedAddonFromLeft):not(.formControl--hasFittedAddonFromRight) {
+	border-top-right-radius: 0;
+	border-bottom-right-radius: 0;
+}
+
+.inputGroup > .button {
+	// @extend .button--outlined;
+	flex-shrink: 0;
+	border-radius: 0; 
+}
+
+// Button border from right (cause of negative margin) would overlap input's right border when hover & focus 
+.inputGroup .formControl {
+	z-index: 1;
+}
+
+.inputGroup > .button:not(:last-child),
+.inputGroup > .formControl:not(:last-child) {
+	margin-right: -1px;
+}
+
+.inputGroup > .button:first-child {
+	border-radius: $borderRadius 0 0 $borderRadius; 
+}
+
+.inputGroup > .button:last-child {
+	border-radius: 0 $borderRadius $borderRadius 0; 
+}
+
+.inputGroup .button.button--increment,
+.inputGroup .button.button--deduct {
+	flex: 0 0 rem(37px);
+	max-width: rem(37px);
+	font-size: rem(18px);
+	padding: 0;
+}
+
+.invoiceSummary .inputGroup.inputGroup--invoiceDiscount {
+	max-width: rem(80px);
+}
+
+
+.formControl.formControl--hasFittedAddonFromLeft { padding-left: $fittedAddon-width }
+.formControl.formControl--hasFittedAddonFromRight { padding-right: $fittedAddon-width }
+
+.inputGroup-fittedAddon {
+	width: $fittedAddon-width;
+	position: absolute;
+	left: 0;
+	top: 50%;
+	transform: translateY(-50%);
+	text-align: center;
+	color: $color-lightIcon;
+	z-index: 2;
+}
+
+.inputGroup-fittedAddon.inputGroup-fittedAddon--right {
+	left: auto;
+	right: 0;
+}
+
+
+
+/**
+ * Form Group
+ */
+
+.formGroup:not(:last-child) {
+	margin-bottom: $baseline;
+}
+
+.formGroup.is-disabled {
+	opacity: .5;
+}
+
+.formGroup.grid {
+	margin-top: -($baseline/4);
+	margin-bottom: $baseline;
+}
+
+.formGroup.grid > .grid-cell {
+	padding-top: $baseline/4;
+}
+
+.formGroup > label:not(.formCheck),
+.formGroup > .formGroup-label {
+	cursor: default;
+}
+
+.formGroup.grid > label.grid-cell,
+.formGroup.grid > .formGroup-label {
+	padding-top: ($baseline/4) + ($baseline/2); // Fake "center" for label
+}
+
+.formGroup.formGroup--inline > .formControl {
+	width: auto;
+	display: inline-block;
+}
+
+.formGroup.formGroup--inline > label + .formControl,
+.formGroup.formGroup--inline > .inputGroup .formControl {
+	margin-left: $gutter;
+}
+
+.formGroup.formGroup--inline .inputGroup {
+	display: inline-flex;
+	vertical-align: middle;
+}
+
+
+
+/**
+ * Inline form group
+ */
+
+.inlineFormGroups > .inlineFormGroup { margin-bottom: $baseline/2 }
+
+.inlineFormGroup > .grid-cell > .button { margin-top: rem(20px) } // Fake center in a row
+
+
+
+/**
+ * Custom checkbox
+ */
+
+.formCheck {
+	display: inline-block;
+	cursor: pointer;
+}
+
+.formCheck.is-disabled {
+	opacity: .5;
+	cursor: not-allowed;
+}
+
+.formGroup.grid .formCheck {
+	display: flex;
+	align-items: center;
+	height: $input-height;
+}
+
+.formCheck input {
+	position: absolute;
+	visibility: hidden;
+	width: 0;
+	height: 0;
+	z-index: -1;
+}
+
+.formCheck .formCheck-indicator > .fa { transition: transform .2s ease, opacity .2s ease }
+
+.formCheck input:not(:checked) + .formCheck-indicator > .fa {
+	transform: scale(0);
+	opacity: 0;
+}
+
+.formCheck input:checked + .formCheck-indicator > .fa {
+	transform: scale(1);
+	opacity: 1;
+}
+
+.formCheck .formCheck-indicator {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: rem(18px);
+	height: rem(18px);
+	color: $color-primary;
+	font-size: rem(12px);
+	border: 1px solid $color-border;
+	border-radius: $borderRadius;
+	margin-right: $gutter/2;
+}
+
+.formCheck:hover .formCheck-indicator { border-color: darken($color-border, 7%) }
+
+.formCheck .formCheck-description { vertical-align: middle }
+
+/**
+ * Custom radio
+ */
+
+.formCheck input[type="radio"] + .formCheck-indicator {
+	border-radius: 999rem;
+}