browsercms-artirix 4.0.0.rc1.art4

data/app/assets/stylesheets/cms/_sitemap.scss

@@ -0,0 +1,209 @@
+/* SITEMAP TABLE */
+#sitemap {
+	display: table;
+	width: 100%;
+	border: 1px solid rgba(black,0.1);
+	@include border-radius(5px);
+	@include rem(margin-bottom,1.5rem);
+
+  .children {
+    width: 100%;
+    height: 0%;
+    &.hide {
+      display: none;
+    }
+  }
+}
+
+
+.nav-list {
+	width: 100%;
+	list-style-type: none;
+	display: block;
+	position: relative;
+	margin: 0;
+	padding: 0;
+  // Demonstrates positioning of actual list elements
+  //border: 5px solid rgba(black,0.1); // Remove
+  //  margin: 10;
+ 	//padding: 10;
+
+    &.hide {
+      display: none;
+    }
+	.nav-list-item {
+        display: block;
+        float: left;
+        clear: both;
+        width: 100%;
+		list-style-type: none;
+		margin: 0;
+		padding: 0;
+
+		&:before {
+			display: none;
+		}
+
+		.nav-list-span {
+			display: block;
+			width: 100%;
+			position: relative;
+			border-bottom: 1px solid rgba(black,0.1);
+			@include rem(padding,0.7rem);
+			@include rem(font-size, 1.1rem);
+
+			&:hover {
+                cursor: pointer;
+  				background: rgba($gray,0.175);
+
+              	.type-icon {
+					@include opacity(1);
+				}
+			}
+
+            &.droppable {
+              background: $light-blue;
+            }
+			&.active {
+				background: rgba($gray,0.4);
+
+				.type-icon {
+					@include opacity(1);
+				}
+			}
+
+			.type-icon {
+				@include rem(font-size,0.85rem);
+				vertical-align: top;
+				margin-right: 8px;
+				@include opacity(0.8);
+				margin-top: 1px;
+			}
+
+			&.level-1 {
+
+			}
+			&.level-2 {
+                padding-left: 30px;
+			}
+			&.level-3 {
+				padding-left: 60px;
+
+			}
+			&.level-4 {
+				padding-left: 90px;
+			}
+			&.level-5 {
+				padding-left: 120px;
+			}
+			&.level-6 {
+				padding-left: 150px;
+			}
+			&.level-7 {
+				padding-left: 180px;
+			}
+			&.level-8 {
+				padding-left: 210px;
+			}
+			&.level-9 {
+				padding-left: 240px;
+			}
+			&.level-10 {
+				padding-left: 270px;
+			}
+
+			&.last-item {
+				border-bottom: 0;
+			}
+		}
+	}
+}
+
+.edit-group {
+	height: 70%;
+	position: absolute;
+	top: 0;
+	//left: 45%;
+	right: 15%;
+	@include opacity(0);
+	@include transition(0.15s);
+	list-style-type: none;
+	@include border-radius(2px);
+
+	&:hover {
+		background: rgba($primary,0.65);
+	}
+
+	li {
+		display: block;
+		float: left;
+		height: 100%;
+		list-style-type: none;
+		padding: 0;
+		margin: 0;
+		background: rgba($primary,0.7);
+		border-top: 1px solid rgba(black,0.1);
+		border-bottom: 1px solid rgba(black,0.1);
+		border-right: 1px solid rgba(black,0.1);
+		@include transition(background 0.2s);
+
+		&:first-child {
+			@include border-radius(2px 0 0 2px);
+			border-left: 1px solid rgba(black,0.1);
+		}
+		&:last-child {
+			@include border-radius(0 2px 2px 0);
+		}
+
+		&:before {
+			display: none;
+		}
+
+		&:hover {
+			background: darken($primary,3%);
+		}
+
+		.add-link {
+			display: block;
+			margin: 0;
+			padding: 0 20px;
+			height: 100%;
+			line-height: 25px;
+			margin-left: 0;
+			color: white;
+			-webkit-font-smoothing: antialiased;
+			border: 0;
+		}
+	}
+
+	.nav-list-span:hover &,
+	.nav-list-span:active & {
+		@include opacity(1);
+	}
+}
+
+.permission-group {
+	float: right;
+	display: inline-block;
+	cursor: default;
+
+	.draft {
+		color: white;
+		text-transform: uppercase;
+		background: $danger;
+		font-weight: 700;
+		padding: 2px 5px;
+		@include border-radius(2px);
+		@include rem(font-size,0.875rem);
+		-webkit-font-smoothing: antialiased;
+		display: inline-block;
+		vertical-align: top;
+	}
+
+	.permission-icon {
+		color: $danger;
+		@include rem(font-size,0.875rem);
+		vertical-align: top;
+		margin-left: 10px;
+	}
+}

data/app/assets/stylesheets/cms/_submenu.scss

@@ -0,0 +1,48 @@
+/* SUBMENU */
+#submenu {
+	background: darken(white,2%);
+	border-bottom: 1px solid rgba(black,0.3);
+	@include rem(padding,0.75rem 0);
+
+	.status {
+		margin-top: 0.25em;
+		color: white;
+		text-transform: uppercase;
+		font-weight: 700;
+		padding: 6px 12px 8px;
+		@include border-radius(4px);
+		@include rem(font-size,1rem);
+		-webkit-font-smoothing: antialiased;
+		display: inline-block;
+		vertical-align: top;
+		font-family: 'Source Sans Pro', sans-serif;
+
+		&.draft {
+			background: $danger;
+		}
+		&.published {
+			background: $success;
+		}
+	}
+
+	.last-saved {
+		display: inline-block;
+		margin-top: 0.25em;
+		margin-left: 2.5em;
+		text-transform: uppercase;
+		padding: 8px 0 10px;
+		color: $dark;
+		font-family: 'Source Sans Pro', sans-serif;
+		font-weight: 400;
+		@include rem(font-size,0.875rem);
+		@include opacity(0.8);
+	}
+
+	.btn,
+	.btn-group {
+		margin-bottom: 0;
+	}
+	.primary-cta {
+		@include rem(margin-left,0.75rem);
+	}
+}

data/app/assets/stylesheets/cms/application.scss

@@ -0,0 +1,49 @@
+@charset "utf-8";
+
+$experimental-support-for-khtml: false;
+@import "compass/reset";
+@import "compass/css3";
+@import "compass/typography";
+@import "compass/css3/box";
+
+// Basic items for making modals work
+@import "bootstrap/mixins";
+@import "bootstrap/variables";
+// @import "bootstrap/modals";
+
+@import 'core';
+
+@import "cms/includes/_rem";
+@import "cms/includes/_animation";
+
+
+/* IMPORTING STYLES */
+@import 'cms/styles/_base-grid';
+@import 'cms/styles/_text';
+@import 'cms/styles/_images';
+@import 'cms/styles/_lists';
+@import 'cms/styles/_buttons';
+@import 'cms/styles/_tables';
+@import 'cms/styles/_forms';
+@import 'cms/styles/_dropdown';
+@import 'cms/styles/_progress';
+@import 'cms/styles/_alerts';
+@import 'cms/styles/_modal';
+@import 'cms/styles/_glyph';
+
+
+
+
+/* PAGE STYLE & LAYOUT IMPORTS */
+@import 'cms/_base';
+
+@import 'cms/_colors';
+@import 'cms/_cms-buttons';
+@import 'cms/_cms-forms';
+@import 'cms/_nav';
+@import 'cms/_submenu';
+@import 'cms/_main-area';
+@import 'cms/_sitemap';
+@import 'cms/_assets';
+@import 'cms/_dashboard';
+@import 'cms/_sidebar';

data/app/assets/stylesheets/cms/core.scss

@@ -0,0 +1,96 @@
+/* COLORS & MIX-INS */
+@mixin breakpoint($point) {
+	@if $point == large {
+		@media only screen and (min-width : 1401px) { @content; }
+	}
+	@else if $point == landscape {
+		@media only screen and (min-width : 802px) and (max-width : 1025px) { @content; }
+	}
+	@else if $point == portrait {
+		@media only screen and (min-width : 642px) and (max-width : 801px) { @content; }
+	}
+	@else if $point == mobile {
+		@media only screen and (max-width : 641px) { @content; }
+	}
+}
+
+$main-blue: #095aa6;
+$light-blue: #0079c1;
+
+$primary: $main-blue;
+$secondary: $light-blue;
+
+$light: darken(white,6%);
+$gray: #9a9999;
+$dark: #505050;
+
+$success: #2ecc71;
+$warning: #f1c40f;
+$danger: #e74c3c;
+
+
+/* RESET */
+html {
+	min-height: 100%;
+	height: 100%;
+	-webkit-text-size-adjust: 100%;
+	-ms-text-size-adjust: 100%;
+
+	background: $light;
+
+	@include breakpoint(landscape) {
+		font-size: 95%;
+	}
+}
+
+body {
+	height: 100%;
+	width: 100%;
+	position: relative;
+	overflow-x: hidden;
+}
+* {
+   	@include box-sizing(border-box);
+
+   	&:after,
+   	&:before {
+   		@include box-sizing(border-box);
+   	}
+}
+
+/* CLEAR & FLOATS */
+.clear {
+	clear: both !important;
+}
+.left {
+	float: left !important;
+}
+.right {
+	float: right !important;
+}
+.clear {
+	clear: both;
+	display: block;
+	overflow: hidden;
+	visibility: hidden;
+	width: 0;
+	height: 0;
+}
+* html .clearfix {
+	height: 1%;
+}
+.clearfix {
+	display: block;
+	*zoom: 1;
+
+	&:after {
+		clear: both;
+		content: "";
+		display: block;
+		font-size: 0;
+		line-height: 0;
+		visibility: hidden;
+		width: 0;
+		height: 0;
+	}
+}

data/app/assets/stylesheets/cms/default-forms.scss

@@ -0,0 +1,3 @@
+// Default styles for public CMS Forms (built via the forms module.
+
+@import "bootstrap";

data/app/assets/stylesheets/cms/includes/_animation.scss

@@ -0,0 +1,2 @@
+// Core imported by default. You can also import 'animate' for predefined animations.
+@import "animation/core";

data/app/assets/stylesheets/cms/includes/_rem.scss

@@ -0,0 +1,120 @@
+// @private Default font-size for all browsers
+$browser-default-font-size: 16px;
+
+// Base font size in pixels, if not already defined.
+// Should be the same as the font-size of the html element.
+$base-font-size: 16px !default;
+
+// Whether to output fallback values in px when outputting rems.
+$rem-with-px-fallback: true !default;
+
+// Convert any CSS <length> or <percentage> value to any other.
+@function convert-length($length, $to-unit, $from-context: $base-font-size, $to-context: $from-context) {
+	$from-unit: unit($length);
+
+	// Optimize for cases where from and to may accidentally be the same.
+	@if $from-unit == $to-unit { @return $length; }
+	@if unit($from-context) != 'px' { @warn "Paremeter $from-context must resolve to a value in pixel units."; }
+	@if unit($to-context) != 'px' { @warn "Parameter $to-context must resolve to a value in pixel units."; }
+
+	// Fixed ratios
+	// https://developer.mozilla.org/en/CSS/length
+	// http://dev.w3.org/csswg/css3-values/#absolute-lengths
+	$px-per-in: 96px / 1in;
+	$px-per-mm: 96px / 25.4mm;
+	$px-per-cm: 96px / 2.54cm;
+	$px-per-pt: 4px / 3pt;
+	$px-per-pc: 16px / 1pc;
+
+	// Variables to store actual convesion ratios
+	$px-per-from-unit: 1;
+	$px-per-to-unit: 1;
+
+	@if $from-unit != 'px' {
+		@if      $from-unit == 'em'  { $px-per-from-unit: $from-context / 1em }
+		@else if $from-unit == 'rem' { $px-per-from-unit: $base-font-size / 1rem }
+		@else if $from-unit == '%'   { $px-per-from-unit: $from-context / 100% }
+		@else if $from-unit == 'ex'  { $px-per-from-unit: $from-context / 2ex }
+		@else if $from-unit == 'in'  { $px-per-from-unit: $px-per-in }
+		@else if $from-unit == 'mm'  { $px-per-from-unit: $px-per-mm }
+		@else if $from-unit == 'cm'  { $px-per-from-unit: $px-per-cm }
+		@else if $from-unit == 'pt'  { $px-per-from-unit: $px-per-pt }
+		@else if $from-unit == 'pc'  { $px-per-from-unit: $px-per-pc }
+		@else if $to-unit == 'ch' or $to-unit == 'vw' or $to-unit == 'vh' or $to-unit == 'vmin' {
+			@warn "#{$from-unit} units can't be reliably converted; Returning original value.";
+			@return $length;
+		}
+		@else {
+			@warn "#{$from-unit} is an unknown length unit. Returning original value.";
+			@return $length;
+		}
+	}
+
+	@if $to-unit != 'px' {
+		@if      $to-unit == 'em'  { $px-per-to-unit: $to-context / 1em }
+		@else if $to-unit == 'rem' { $px-per-to-unit: $base-font-size / 1rem }
+		@else if $to-unit == '%'   { $px-per-to-unit: $to-context / 100% }
+		@else if $to-unit == 'ex'  { $px-per-to-unit: $to-context / 2ex }
+		@else if $to-unit == 'in'  { $px-per-to-unit: $px-per-in }
+		@else if $to-unit == 'mm'  { $px-per-to-unit: $px-per-mm }
+		@else if $to-unit == 'cm'  { $px-per-to-unit: $px-per-cm }
+		@else if $to-unit == 'pt'  { $px-per-to-unit: $px-per-pt }
+		@else if $to-unit == 'pc'  { $px-per-to-unit: $px-per-px }
+		@else if $to-unit == 'ch' or $to-unit == 'vw' or $to-unit == 'vh' or $to-unit == 'vmin' {
+			@warn "#{$to-unit} units can't be reliably converted; Returning original value.";
+			@return $length;
+		}
+		@else {
+			@warn "#{$to-unit} is an unknown length unit. Returning original value.";
+			@return $length;
+		}
+	}
+	@return $length * $px-per-from-unit / $px-per-to-unit;
+}
+
+// For the given property, use rem units with px as a fallback value for older
+// browsers.
+//
+// $property - The css property name.
+// $values - The value (or space-separated list of values) for the property.
+// $use-px-fallback - Boolean, default: true; whether to use pixel fallback values
+//
+@mixin rem($property, $values, $use-px-fallback: $rem-with-px-fallback) {
+	// Create a couple of empty lists as output buffers.
+	$px-values: ();
+	$rem-values: ();
+
+	// Ensure $values is a list.
+	@if type-of($values) != 'list' {
+		$values: join((), $values);
+	}
+
+	// Loop through the $values list
+	@each $value in $values {
+		// For each property value, if it's in rem or px, derive both rem and
+		// px values for it and add those to the end of the appropriate buffer.
+		// Ensure all pixel values are rounded to the nearest pixel.
+		@if type-of($value) == number and not unitless($value) and (unit($value) == px or unit($value) == rem) {
+			@if unit($value) == px {
+				$px-values: join($px-values, round($value));
+				$rem-values: join($rem-values, convert-length($value, rem));
+			}
+			@else {
+				$px-values: join($px-values, round(convert-length($value, px)));
+				$rem-values: join($rem-values, $value);
+			}
+		}
+		@else {
+			$px-values: join($px-values, $value);
+			$rem-values: join($rem-values, $value);
+		}
+	}
+
+	// Use pixel fallback for browsers that don't understand rem units.
+	@if $use-px-fallback {
+		#{$property}: $px-values;
+	}
+
+	// Use rem values for everyone else (overrides pixel values).
+	#{$property}: $rem-values;
+}

data/app/assets/stylesheets/cms/includes/animation/_animate.scss

@@ -0,0 +1,31 @@
+// ---------------------------------------------------------------------------
+// Animations from Animate.css
+// Author : Dan Eden
+// URL    : http://daneden.me/animate/
+//
+// Attention seekers
+//  - flash bounce shake tada swing wobble pulse
+// Fading entrances
+//  - fadeIn fadeInUp fadeInDown fadeInLeft fadeInRight fadeInUpBig fadeInDownBig fadeInLeftBig fadeInRightBig
+// Fading exits
+//  - fadeOut fadeOutUp fadeOutDown fadeOutLeft fadeOutRight fadeOutUpBig fadeOutDownBig fadeOutLeftBig fadeOutRightBig
+// Bouncing entrances
+//  - bounceIn bounceInDown bounceInUp bounceInLeft bounceInRight
+// Bouncing exits
+//  - bounceOut bounceOutDown bounceOutUp bounceOutLeft bounceOutRight
+// Rotating entrances
+//  - rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft rotateInUpRight
+// Rotating exits
+//  - rotateOut rotateOutDownLeft rotateOutDownRight rotateOutUpLeft rotateOutUpRight
+// Lightspeed
+//  - lightSpeedIn lightSpeedOut
+// Specials
+//  - hinge rollIn rollOut
+// ---------------------------------------------------------------------------
+@import "animate/attention-seekers";
+@import "animate/bouncing";
+@import "animate/fading";
+@import "animate/flippers";
+@import "animate/lightspeed";
+@import "animate/rotating";
+@import "animate/specials";

data/app/assets/stylesheets/cms/includes/animation/_core.scss

@@ -0,0 +1,127 @@
+@import "shared";
+
+// CSS Animations.
+
+// Apply an animation property and value with the correct browser support
+@mixin animation-support($property, $value) {
+  @include experimental($property, $value, -moz, -webkit, -o, -ms, not -khtml, official); }
+
+// Name of any animation as a string.
+$default-animation-name             : false !default;
+
+// Duration of the entire animation in seconds.
+$default-animation-duration         : false !default;
+
+// Delay for start of animation in seconds.
+$default-animation-delay            : false !default;
+
+// The timing function(s) to be used between keyframes. [ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier($number, $number, $number, $number)]
+$default-animation-timing-function  : false !default;
+
+// The number of times an animation cycle is played. [infinite | $number]
+$default-animation-iteration-count  : false !default;
+
+// Whether or not the animation should play in reverse on alternate cycles. [normal | alternate]
+$default-animation-direction        : false !default;
+
+// What values are applied by the animation outside the time it is executing. [none | forwards | backwards | both]
+$default-animation-fill-mode        : false !default;
+
+// Whether the animation is running or paused. [running | paused]
+$default-animation-play-state       : false !default;
+
+// Create a named animation sequence that can be applied to elements later.
+//
+//     $name    - The name of your animation.
+//     @content - The keyframes of the animation.
+@mixin keyframes(
+  $name,
+  $moz: $experimental-support-for-mozilla,
+  $webkit: $experimental-support-for-webkit,
+  $o: $experimental-support-for-opera,
+  $ms: $experimental-support-for-microsoft,
+  $khtml: $experimental-support-for-khtml,
+  $official: true
+) {
+  @if $moz {
+    @include with-only-support-for($moz: true) {
+      @-moz-keyframes #{$name} { @content; }
+    }
+  }
+  @if $webkit {
+    @include with-only-support-for($webkit: true) {
+      @-webkit-keyframes #{$name} { @content; }
+    }
+  }
+  @if $o {
+    @include with-only-support-for($o: true) {
+      @-o-keyframes #{$name} { @content; }
+    }
+  }
+  @if $ms {
+    @include with-only-support-for($ms: true) {
+      @-ms-keyframes #{$name} { @content; }
+    }
+  }
+  @if $khtml {
+    @include with-only-support-for($khtml: true) {
+      @-khtml-keyframes #{$name} { @content; }
+    }
+  }
+  @if $official {
+    @include with-only-support-for {
+      @keyframes #{$name} { @content; }
+    }
+  }
+}
+
+// Apply 1-10 animation names.
+@mixin animation-name($name-1: $default-animation-name, $name-2: false, $name-3: false, $name-4: false, $name-5: false, $name-6: false, $name-7: false, $name-8: false, $name-9: false, $name-10: false) {
+  $name: compact($name-1, $name-2, $name-3, $name-4, $name-5, $name-6, $name-7, $name-8, $name-9, $name-10);
+  @include animation-support(animation-name, $name); }
+
+// Apply 1-10 animation durations.
+@mixin animation-duration($duration-1: $default-animation-duration, $duration-2: false, $duration-3: false, $duration-4: false, $duration-5: false, $duration-6: false, $duration-7: false, $duration-8: false, $duration-9: false, $duration-10: false) {
+  $duration: compact($duration-1, $duration-2, $duration-3, $duration-4, $duration-5, $duration-6, $duration-7, $duration-8, $duration-9, $duration-10);
+  @include animation-support(animation-duration, $duration); }
+
+// Apply 1-10 animation delays.
+@mixin animation-delay($delay-1: $default-animation-delay, $delay-2: false, $delay-3: false, $delay-4: false, $delay-5: false, $delay-6: false, $delay-7: false, $delay-8: false, $delay-9: false, $delay-10: false) {
+  $delay: compact($delay-1, $delay-2, $delay-3, $delay-4, $delay-5, $delay-6, $delay-7, $delay-8, $delay-9, $delay-10);
+  @include animation-support(animation-delay, $delay); }
+
+// Apply 1-10 animation timing functions.
+@mixin animation-timing-function($function-1: $default-animation-timing-function, $function-2: false, $function-3: false, $function-4: false, $function-5: false, $function-6: false, $function-7: false, $function-8: false, $function-9: false, $function-10: false) {
+  $function: compact($function-1, $function-2, $function-3, $function-4, $function-5, $function-6, $function-7, $function-8, $function-9, $function-10);
+  @include animation-support(animation-timing-function, $function); }
+
+// Apply 1-10 animation iteration counts.
+@mixin animation-iteration-count($count-1: $default-animation-iteration-count, $count-2: false, $count-3: false, $count-4: false, $count-5: false, $count-6: false, $count-7: false, $count-8: false, $count-9: false, $count-10: false) {
+  $count: compact($count-1, $count-2, $count-3, $count-4, $count-5, $count-6, $count-7, $count-8, $count-9, $count-10);
+  @include animation-support(animation-iteration-count, $count); }
+
+// Apply 1-10 animation directions.
+@mixin animation-direction($direction-1: $default-animation-direction, $direction-2: false, $direction-3: false, $direction-4: false, $direction-5: false, $direction-6: false, $direction-7: false, $direction-8: false, $direction-9: false, $direction-10: false) {
+  $direction: compact($direction-1, $direction-2, $direction-3, $direction-4, $direction-5, $direction-6, $direction-7, $direction-8, $direction-9, $direction-10);
+  @include animation-support(animation-direction, $direction); }
+
+// Apply 1-10 animation fill modes.
+@mixin animation-fill-mode($mode-1: $default-animation-fill-mode, $mode-2: false, $mode-3: false, $mode-4: false, $mode-5: false, $mode-6: false, $mode-7: false, $mode-8: false, $mode-9: false, $mode-10: false) {
+  $mode: compact($mode-1, $mode-2, $mode-3, $mode-4, $mode-5, $mode-6, $mode-7, $mode-8, $mode-9, $mode-10);
+  @include animation-support(animation-fill-mode, $mode); }
+
+// Apply 1-10 animation play states.
+@mixin animation-play-state($state-1: $default-animation-play-state, $state-2: false, $state-3: false, $state-4: false, $state-5: false, $state-6: false, $state-7: false, $state-8: false, $state-9: false, $state-10: false) {
+  $state: compact($state-1, $state-2, $state-3, $state-4, $state-5, $state-6, $state-7, $state-8, $state-9, $state-10);
+  @include animation-support(animation-play-state, $state); }
+
+// Shortcut to apply a named animation to an element, with all the settings.
+//
+//     $animation-1   : Name and settings for the first animation. [<values> | default]
+//     ...
+//     $animation-10  : Name and settings for the tenth animation. <values>
+@mixin animation($animation-1: default, $animation-2: false, $animation-3: false, $animation-4: false, $animation-5: false, $animation-6: false, $animation-7: false, $animation-8: false, $animation-9: false, $animation-10: false) {
+  @if $animation-1 == default {
+    $animation-1: -compass-space-list(compact($default-animation-name, $default-animation-duration, $default-animation-timing-function, $default-animation-delay, $default-animation-iteration-count, $default-animation-direction, $default-animation-fill-mode, $default-animation-play-state)); }
+  $animation: compact($animation-1, $animation-2, $animation-3, $animation-4, $animation-5, $animation-6, $animation-7, $animation-8, $animation-9, $animation-10);
+  @include animation-support(animation, $animation); }