uol_frontend_framework_rails 0.1.0 → 0.2.0

data/vendor/assets/stylesheets/base/common/_reset.scss

@@ -0,0 +1,33 @@
+*,
+*:before,
+*:after { 
+	box-sizing: border-box;
+}
+
+* {
+	margin: 0;
+	padding: 0;
+}
+
+img {
+	height: auto;
+	max-width: 100%;
+}
+
+ul {
+	list-style: none;
+}
+
+button, input, optgroup, select, textarea {
+	font-family: inherit;
+}
+
+a {
+	color: $color-primary;
+	text-decoration: none;
+	transition: .1s $transition-type color;
+}
+
+a:hover {
+	text-decoration: underline;
+}

data/vendor/assets/stylesheets/base/common/_test.scss

@@ -0,0 +1,36 @@
+$t-color: $color-primary;
+
+.elementsPage {
+	padding: 50px 25px;
+}
+
+.t-box {
+	display: block;
+	background: $t-color;
+	min-height: 60px;
+	padding: 20px 15px;
+	border-radius: $borderRadius;
+	.t-box { background: darken($t-color, 5%) }
+}
+
+.t-pre {
+    max-height: 600px;
+	color: #7f7f7f;
+    overflow-x: auto;
+    padding: 1.25em;
+    border: 1px solid #e6e6e6;
+    border-left-width: 5px;
+    margin: $baseline 0;
+    font-size: rem(14px);
+    background: #fcfcfc;
+    white-space: pre;
+    word-wrap: normal;
+}
+
+.t-code {
+	padding: .2rem .4rem;
+    font-size: 90%;
+    color: #0e579d;
+    background-color: #a6eeff;
+    border-radius: $borderRadius;
+}

data/vendor/assets/stylesheets/base/common/_typo.scss

@@ -0,0 +1,40 @@
+body {
+	color: $color-text;
+	font-family: $fontFamily;
+	font-size: rem(14px);
+	line-height: $line-height;
+}
+
+.title,
+.headline,
+.subHeadline {
+	color: $headlines-color;
+	font-weight: 400;
+	margin: 0;
+}
+
+.title {
+	font-size: $fontSize-title;
+	margin-bottom: $baseline;
+}
+
+.headline {
+	font-size: $fontSize-headline;
+	margin-bottom: $baseline;
+}
+
+.subHeadline {
+	font-size: $fontSize-subHeadline;
+}
+
+.textHighlight {
+	background: lighten($color-primary, 40%);
+	padding: 0 $gutter/2;
+	border-radius: $borderRadius;
+}
+
+.fancyLabel {
+	font-size: rem(12px);
+	text-transform: uppercase;
+	letter-spacing: 1px;
+}

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

@@ -0,0 +1,6 @@
+@import 
+	"../common/reset",	
+	"../common/typo",
+	"../common/grid",
+	"../common/helpers",
+	"../common/test";

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

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

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

@@ -0,0 +1,10 @@
+@import
+	"card",
+	"tag",
+	"addressBox",
+	"button",
+	"clickBox",
+	"datePicker",
+	"thumbnail",
+	"paginator",
+	"form";

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

@@ -0,0 +1,7 @@
+$button-height: rem(44px);
+
+@import "../common/button";
+
+.button {
+	-webkit-tap-highlight-color: transparent;
+}

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

@@ -0,0 +1,57 @@
+.card {
+	display: block;
+	background: $white;	
+	border: 1px solid $color-border;
+	border-radius: $borderRadius;
+}
+a.card {
+	color: inherit;
+	transition: .2s ease box-shadow, .2s ease border-color, .1s ease transform;
+	-webkit-tap-highlight-color: transparent;
+}
+
+a.card:hover {
+	box-shadow: 0 0 15px 0px 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/app/_clickBox.scss

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

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

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

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

@@ -0,0 +1,197 @@
+$input-height: rem(44px);
+$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%);
+}
+
+.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;
+}
+
+.inputGroup {
+	position: relative;
+	display: flex;
+	align-items: center;
+}
+
+.inputGroup input.formControl {
+	min-width: 1px;
+}
+
+.inputGroup .formControl:not(:last-child) {
+	border-top-right-radius: 0;
+	border-bottom-right-radius: 0;
+}
+
+.inputGroup > .button {
+	// @extend .button--outlined;
+	border-radius: 0; 
+}
+
+.inputGroup > .button.button--primray,
+.inputGroup > .button.button--secondary {
+	border-left: 0;
+}
+
+.inputGroup > .button:last-child {
+	border-radius: 0 $borderRadius $borderRadius 0; 
+}
+
+.inputGroup .button.button--increment,
+.inputGroup .button.button--deduct {
+	font-size: rem(18px);
+	flex: 0 0 rem(37px);
+	max-width: rem(37px);
+	padding: 0;
+}
+
+.textInput {
+	@extend .formControl;
+}
+
+.formControl.formControl--hasFittedAddonFromLeft { padding-left: $fittedAddon-width }
+.formControl.formControl--hasFittedAddonFromRight { padding-right: $fittedAddon-width }
+
+.inputGroup-fittedAddon {
+	width: $fittedAddon-width;
+	position: absolute;
+	top: 50%;
+	transform: translateY(-50%);
+	left: 0;
+	text-align: center;
+	color: $color-lightIcon;
+}
+
+.inputGroup-fittedAddon.inputGroup-fittedAddon--right {
+	left: auto;
+	right: 0;
+}
+
+.formGroup.grid {
+	margin-bottom: $baseline/1.5;
+}
+
+@media (max-width: map-get($screen-breakpoints, sm)) {
+	.formGroup > .grid-cell.grid-cell--xs-12:last-child¨{
+		padding-top: $baseline/4;
+	}
+}
+
+.formGroup > label,
+.formGroup > .formGroup-label {
+	cursor: default;
+}
+
+.formGroup.grid > label.grid-cell,
+.formGroup.grid > .formGroup-label {
+	padding-top: map-get($gridGutters, 2) + ($baseline/2);
+}
+
+.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;
+}
+
+.formCheck {
+	display: inline-block;
+	cursor: pointer;
+}
+
+.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;
+}
+
+.inlineFormGroups > .inlineFormGroup {
+	margin-bottom: $baseline/2;	
+}
+
+.inlineFormGroup > .grid-cell > .button {
+	margin-top: rem(20px);
+} 

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

@@ -0,0 +1,3 @@
+.paginator {
+	
+}

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

@@ -0,0 +1,39 @@
+.tag {
+	display: inline-block;
+	padding: $baseline/4 $gutter/2;
+	background: #F7F7F7;
+	font-size: rem(12px);
+	border-radius: $borderRadius;
+	vertical-align: middle;
+	cursor: default;
+}
+
+.tag.tag--yesNo {
+	width: rem(52px);
+}
+
+.tag.tag--primary {
+	background: lighten($color-primary, 40%);
+	color: $color-primary
+}
+
+.tag.tag--small {
+	font-size: rem(10px);
+	padding: 0 $gutter/2;
+}
+
+.tag .fa {
+	color: darken(#F7F7F7, 10%);
+	font-size: rem(10px);
+	margin-right: $gutter/2;
+}
+
+.tag.tag--success {
+    background: #8ddf8d;
+    color: green;
+}
+
+.tag.tag--danger {
+    background: #df8d8d;
+    color: #6c4949;
+}