uol_frontend_framework_rails 0.1.0 → 0.2.0

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

@@ -0,0 +1,3 @@
+@import 
+	"functions",
+	"variables";

data/vendor/assets/stylesheets/abstracts/app/_functions.scss

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

data/vendor/assets/stylesheets/abstracts/app/_variables.scss

@@ -0,0 +1,120 @@
+@import "../common/variables";
+
+/**
+ * Container
+ */
+$container-width: 1220px;
+
+/**
+ * Grid specific setup
+ */
+$grid-columns-count: 12;
+$grid-cell-gutter  : 1.5rem;
+
+
+/**
+ * Responsive screen sizes 
+ */
+$screen-breakpoints: (
+	xs: 0,
+	sm: 576px,
+	md: 768px,
+	lg: 992px,
+	xl: 1200px
+);
+
+$screen-sm-min: map-get($screen-breakpoints, sm);
+$screen-md-min: map-get($screen-breakpoints, md);
+$screen-lg-min: map-get($screen-breakpoints, lg);
+$screen-xl-min: map-get($screen-breakpoints, xl);
+
+/**
+ * Typo
+ */
+$fontSize-title      : rem(22px);
+$fontSize-headline   : rem(18px);
+$fontSize-subHeadline: rem(16px);
+$fontSize            : rem(14px);
+$fontSize-smaller    : rem(11px);
+
+$baseline : rem(23px);
+$line-height: $baseline / $fontSize;
+
+$fontFamily: 'Open Sans', sans-serif;
+
+/**
+ * Vertical spacing
+ */
+$vertitalSpace: $baseline;
+$verticalSpace-bigger: $baseline *2;
+
+$input-height: $baseline *2;
+
+/**
+ * Horizontal spacing
+ */
+$gutter: rem(12px);
+
+$gridGutters: (
+	0: 0,
+	1: $grid-cell-gutter/2,
+	2: $grid-cell-gutter,
+	3: $grid-cell-gutter*2
+);
+
+/**
+ * Colors
+ */
+$color-primary  : #ff8800;
+$color-border   : #e0e0e0;
+$color-lightIcon: #cccccc;
+$color-warning  : #d33226;
+$color-text     : #3e3e3e;
+$white    : #FFFFFF;
+$color-bg       : #f7f7f7;
+$colors: (
+	success: green, 
+	warning: #f0ad4e,
+	danger : #d33226,
+);
+
+$borderRadius: 2px;
+$borderRadius-button: 999px;
+
+
+/**
+ * Sidebar nav
+ */
+$sidebar-width: 150px;
+
+$transition-type: ease;
+$transition-duration: .2s;
+
+// Z Indexes
+$zIndex-1: 1;
+$zIndex-2: 2;
+$zIndex-3: 3;
+$zIndex-4: 4;
+$zIndex-5: 5;
+$zIndex-6: 6;
+$zIndex-7: 7;
+$zIndex-8: 8;
+$zIndex-9: 9;
+
+$topBar-zIndex: $zIndex-5;
+$bottomBar-zIndex: $zIndex-5;
+$nav-zIndex: $zIndex-6;
+
+/**
+ * Buttons
+ */
+
+$button-primary-background: $color-primary;
+
+$button-secondary-background: #ccc;
+
+$button-success-background: map-get($colors, success);
+
+$button-warning-background: map-get($colors, warning);
+
+$button-danger-background: map-get($colors, danger);

data/vendor/assets/stylesheets/abstracts/common/_functions.scss

@@ -0,0 +1,4 @@
+@function rem($sizeInPx) {
+	$remSize: $sizeInPx / 16px;
+	@return $remSize * 1rem;
+}

data/vendor/assets/stylesheets/abstracts/common/_variables.scss

@@ -0,0 +1,14 @@
+/**
+ * Colors
+ */
+
+$white: #fff;
+
+$color-primary  : #f80;
+$color-border   : #e0e0e0;
+$color-lightIcon: #ccc;
+$color-text     : #3e3e3e;
+
+$color-success: green;
+$color-warning: #f0ad4e;
+$color-danger:  #d33226;

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

@@ -0,0 +1,3 @@
+@import 
+	"functions",
+	"variables";

data/vendor/assets/stylesheets/abstracts/web/_functions.scss

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

data/vendor/assets/stylesheets/abstracts/web/_variables.scss

@@ -0,0 +1,146 @@
+@import "../common/variables";
+
+/**
+ * Body
+ */
+
+$body-bg: #f7f7f7 !default;
+
+/**
+ * Container
+ */
+
+$container-width: 1220px !default;
+
+/**
+ * Responsive screen sizes
+ */
+
+$screen-breakpoints: (
+	xs: 0,
+	sm: 576px,
+	md: 768px,
+	lg: 992px,
+	xl: 1200px
+) !default;
+
+/**
+ * Typo
+ */
+
+$fontFamily-sansSerif: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default;
+$fontFamily: "Open Sans", $fontFamily-sansSerif !default;
+
+$fontSize-title      : rem(22px) !default;
+$fontSize-headline   : rem(18px) !default;
+$fontSize-subHeadline: rem(16px) !default;
+$fontSize            : rem(14px) !default;
+$fontSize-smaller    : rem(11px) !default;
+
+/**
+ * Vertical spacing
+ */
+
+$baseline : rem(23px) !default;
+
+$spacers-y: (
+	0: 0,
+	1: ($baseline * 0.25),
+	2: ($baseline * 0.5),
+	3: $baseline,
+	4: ($baseline * 1.5),
+	5: ($baseline * 3),
+) !default;
+
+$line-height: $baseline / $fontSize;
+
+/**
+ * Horizontal spacing
+ */
+
+$gutter: rem(12px);
+
+$borderRadius: 2px !default;
+$borderRadius-button: 999px !default;
+
+/**
+ * Grid
+ */
+
+$grid-columns-count: 12 !default;
+$grid-cell-gutter: ($gutter * 2) !default;
+
+$grid-cell-gutters: (
+	0: 0,
+	1: ($grid-cell-gutter * 0.25),
+	2: ($grid-cell-gutter * 0.5),
+	3: $grid-cell-gutter,
+	4: ($grid-cell-gutter * 1.5),
+	5: ($grid-cell-gutter * 3),
+) !default;
+
+/**
+ * Sidebar nav
+ */
+
+$sidebar-width: 150px !default;
+
+/**
+ * Z indexes
+ */
+
+$zIndex-1: 1;
+$zIndex-2: 2;
+$zIndex-3: 3;
+$zIndex-4: 4;
+$zIndex-5: 5;
+$zIndex-6: 6;
+$zIndex-7: 7;
+$zIndex-8: 8;
+$zIndex-9: 9;
+
+/**
+ * Buttons
+ */
+
+$button-primary-background: $color-primary !default;
+
+$button-secondary-background: #ccc !default;
+
+$button-success-background: $color-success !default;
+
+$button-warning-background: $color-warning !default;
+
+$button-danger-background: $color-danger !default;
+
+/**
+ * Headlines
+ */
+
+$headlines-color: #484848 !default;
+
+/**
+ * Header
+ */
+
+$header-bg: $white !default;
+$header-zIndex: $zIndex-5 !default;
+
+/**
+ * Cards
+ */
+
+$card-header-bg: $body-bg !default;
+
+/**
+ * Inputs
+ */
+
+$input-height: $baseline * 2;
+
+/**
+ * Transitions
+ */
+
+$transition-type: ease !default;
+$transition-duration: 0.2s !default;

data/vendor/assets/stylesheets/app.scss

@@ -0,0 +1,7 @@
+@charset "UTF-8";
+
+@import
+	"abstracts/app/all",
+	"vendor/app/all",
+	"base/app/all",
+	"components/app/all";	

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

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

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

@@ -0,0 +1,67 @@
+.container {
+	margin: 0 auto;
+	padding: 0 $gutter;
+	width: 100%;
+	max-width: $container-width;
+}
+
+@media (min-width: 700px) {
+	.container {
+		padding: 0 $gutter*2;
+	}
+}
+
+.grid {
+	display: flex;
+	flex-wrap: wrap;
+	list-style: none;
+	padding: 0;
+
+	@extend .grid--gutters;
+}
+
+.grid-cell {
+	flex: 1;
+}
+
+@mixin makeGridGutters($gutter, $index) {
+	@if $index == 3 {
+		@include makeGridGutters($gutter, "");
+	}
+
+	.grid.grid--gutters#{$index} { margin: (-$gutter) 0 0 (-$gutter); }
+	.grid.grid--gutters#{$index} > .grid-cell { padding: $gutter 0 0 $gutter; }
+}
+
+@each $index, $grid-cell-gutter in $grid-cell-gutters {
+	@include makeGridGutters($grid-cell-gutter, $index);
+}
+
+@mixin makeGridCell($width: 100%) {
+	flex: 0 0 $width;
+	max-width: $width;
+}
+
+@mixin makeGridCells($sreenSize: "xs") {
+	@for $i from 1 through $grid-columns-count {
+
+		$gridCellClassName: ".grid-cell--#{$sreenSize}-#{$i}";
+		$gridCellWidth: 100% / $grid-columns-count * $i;
+
+		#{$gridCellClassName} {
+			@include makeGridCell($gridCellWidth);
+		}
+	}
+}
+
+@each $screenSize, $breakpoint in $screen-breakpoints {
+	@if $breakpoint == 0 {
+		@include makeGridCells($screenSize);
+	}
+
+	@else {
+		@media (min-width: $breakpoint) {
+			@include makeGridCells($screenSize);
+		}
+	}
+}

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

@@ -0,0 +1,57 @@
+.u-mr1 {
+	margin-right: $gutter/2;
+}
+
+.u-mr2 {
+	margin-right: $gutter;
+}
+
+.u-mb1 {
+	margin-bottom: $baseline/2;
+}
+
+.u-mb2 {
+	margin-bottom: $baseline;
+}
+
+.u-mb3 {
+	margin-bottom: $baseline*1.5;  
+}
+
+.u-mb4 {
+	margin-bottom: $baseline*2;
+}
+
+.u-mt1 {
+	margin-top: $baseline/2;
+}
+
+.u-mt2 {
+	margin-top: $baseline;
+}
+
+.u-mt3 {
+	margin-top: $baseline*1.5;  
+}
+
+.u-mt4 {
+	margin-top: $baseline*2;
+}
+
+.u-textMuted {
+	color: #b8b8b8;
+}
+
+a.u-textMuted,
+.u-textMuted a {
+	text-decoration: underline;
+}
+
+.unorderedList {
+    list-style: disc;
+	padding-left: $gutter*2;
+}
+
+.unorderedList li {
+	margin-bottom: $baseline/4;
+}