browsercms 3.5.7 → 4.0.0.alpha

data/app/assets/stylesheets/cms/includes/animation/animate/fading/_fading-entrances.css.scss

@@ -0,0 +1,86 @@
+// ---------------------------------------------------------------------------
+@include keyframes(fadeIn) {
+  0% {
+    opacity: 0; }
+  100% {
+    opacity: 1; } }
+
+
+// ---------------------------------------------------------------------------
+@include keyframes(fadeInUp) {
+  0% {
+    @include translateY(20px);
+    opacity: 0; }
+  100% {
+    @include translateY(0);
+    opacity: 1; } }
+
+
+// ---------------------------------------------------------------------------
+@include keyframes(fadeInDown) {
+  0% {
+    @include translateY(-20px);
+    opacity: 0; }
+  100% {
+    @include translateY(0);
+    opacity: 1; } }
+
+
+// ---------------------------------------------------------------------------
+@include keyframes(fadeInRight) {
+  0% {
+    @include translateX(20px);
+    opacity: 0; }
+  100% {
+    @include translateX(0);
+    opacity: 1; } }
+
+
+// ---------------------------------------------------------------------------
+@include keyframes(fadeInLeft) {
+  0% {
+    @include translateX(-20px);
+    opacity: 0; }
+  100% {
+    @include translateX(0);
+    opacity: 1; } }
+
+
+// ---------------------------------------------------------------------------
+@include keyframes(fadeInUpBig) {
+  0% {
+    @include translateY(2000px);
+    opacity: 0; }
+  100% {
+    @include translateY(0);
+    opacity: 1; } }
+
+
+// ---------------------------------------------------------------------------
+@include keyframes(fadeInDownBig) {
+  0% {
+    opacity: 0;
+    @include translateY(-2000px); }
+  100% {
+    opacity: 1;
+    @include translateY(0); } }
+
+
+// ---------------------------------------------------------------------------
+@include keyframes(fadeInRightBig) {
+  0% {
+    opacity: 0;
+    @include translateX(2000px); }
+  100% {
+    opacity: 1;
+    @include translateX(0); } }
+
+
+// ---------------------------------------------------------------------------
+@include keyframes(fadeInLeftBig) {
+  0% {
+    opacity: 0;
+    @include translateX(-2000px); }
+  100% {
+    opacity: 1;
+    @include translateX(0); } }

data/app/assets/stylesheets/cms/includes/animation/animate/fading/_fading-exits.css.scss

@@ -0,0 +1,86 @@
+// ---------------------------------------------------------------------------
+@include keyframes(fadeOut) {
+  0% {
+    opacity: 1; }
+  100% {
+    opacity: 0; } }
+
+
+// ---------------------------------------------------------------------------
+@include keyframes(fadeOutUp) {
+  0% {
+    @include translateY(0);
+    opacity: 1; }
+  100% {
+    @include translateY(-20px);
+    opacity: 0; } }
+
+
+// ---------------------------------------------------------------------------
+@include keyframes(fadeOutDown) {
+  0% {
+    @include translateY(0);
+    opacity: 1; }
+  100% {
+    @include translateY(20px);
+    opacity: 0; } }
+
+
+// ---------------------------------------------------------------------------
+@include keyframes(fadeOutRight) {
+  0% {
+    @include translateX(0);
+    opacity: 1; }
+  100% {
+    @include translateX(20px);
+    opacity: 0; } }
+
+
+// ---------------------------------------------------------------------------
+@include keyframes(fadeOutLeft) {
+  0% {
+    @include translateX(0);
+    opacity: 1; }
+  100% {
+    @include translateX(-20px);
+    opacity: 0; } }
+
+
+// ---------------------------------------------------------------------------
+@include keyframes(fadeOutUpBig) {
+  0% {
+    @include translateY(0);
+    opacity: 1; }
+  100% {
+    @include translateY(-2000px);
+    opacity: 0; } }
+
+
+// ---------------------------------------------------------------------------
+@include keyframes(fadeOutDownBig) {
+  0% {
+    opacity: 1;
+    @include translateY(0); }
+  100% {
+    opacity: 0;
+    @include translateY(2000px); } }
+
+
+// ---------------------------------------------------------------------------
+@include keyframes(fadeOutRightBig) {
+  0% {
+    opacity: 1;
+    @include translateX(0); }
+  100% {
+    opacity: 0;
+    @include translateX(2000px); } }
+
+
+// ---------------------------------------------------------------------------
+@include keyframes(fadeOutLeftBig) {
+  0% {
+    opacity: 1;
+    @include translateX(0); }
+  100% {
+    opacity: 0;
+    @include translateX(-2000px); } }

data/app/assets/stylesheets/cms/includes/animation/animate/rotating/_rotating-entrances.css.scss

@@ -0,0 +1,58 @@
+// ---------------------------------------------------------------------------
+@include keyframes(rotateIn) {
+  0% {
+    @include transform-origin(center center);
+    @include rotate(-200deg);
+    opacity: 0; }
+  100% {
+    @include transform-origin(center center);
+    @include rotate(0);
+    opacity: 1; } }
+
+
+// ---------------------------------------------------------------------------
+@include keyframes(rotateInDownLeft) {
+  0% {
+    @include transform-origin(left bottom);
+    @include rotate(-90deg);
+    opacity: 0; }
+  100% {
+    @include transform-origin(left bottom);
+    @include rotate(0);
+    opacity: 1; } }
+
+
+// ---------------------------------------------------------------------------
+@include keyframes(rotateInUpLeft) {
+  0% {
+    @include transform-origin(left bottom);
+    @include rotate(90deg);
+    opacity: 0; }
+  100% {
+    @include transform-origin(left bottom);
+    @include rotate(0);
+    opacity: 1; } }
+
+
+// ---------------------------------------------------------------------------
+@include keyframes(rotateInUpRight) {
+  0% {
+    @include transform-origin(right bottom);
+    @include rotate(-90deg);
+    opacity: 0; }
+  100% {
+    @include transform-origin(right bottom);
+    @include rotate(0);
+    opacity: 1; } }
+
+
+// ---------------------------------------------------------------------------
+@include keyframes(rotateInDownRight) {
+  0% {
+    @include transform-origin(right bottom);
+    @include rotate(90deg);
+    opacity: 0; }
+  100% {
+    @include transform-origin(right bottom);
+    @include rotate(0);
+    opacity: 1; } }

data/app/assets/stylesheets/cms/includes/animation/animate/rotating/_rotating-exits.css.scss

@@ -0,0 +1,58 @@
+// ---------------------------------------------------------------------------
+@include keyframes(rotateOut) {
+  0% {
+    @include transform-origin(center center);
+    @include rotate(0);
+    opacity: 1; }
+  100% {
+    @include transform-origin(center center);
+    @include rotate(200deg);
+    opacity: 0; } }
+
+
+// ---------------------------------------------------------------------------
+@include keyframes(rotateOutDownLeft) {
+  0% {
+    @include transform-origin(left bottom);
+    @include rotate(0);
+    opacity: 1; }
+  100% {
+    @include transform-origin(left bottom);
+    @include rotate(90deg);
+    opacity: 0; } }
+
+
+// ---------------------------------------------------------------------------
+@include keyframes(rotateOutUpLeft) {
+  0% {
+    @include transform-origin(left bottom);
+    @include rotate(0);
+    opacity: 1; }
+  100% {
+    @include transform-origin(left bottom);
+    @include rotate(-90deg);
+    opacity: 0; } }
+
+
+// ---------------------------------------------------------------------------
+@include keyframes(rotateOutDownRight) {
+  0% {
+    @include transform-origin(right bottom);
+    @include rotate(0);
+    opacity: 1; }
+  100% {
+    @include transform-origin(right bottom);
+    @include rotate(-90deg);
+    opacity: 0; } }
+
+
+// ---------------------------------------------------------------------------
+@include keyframes(rotateOutUpRight) {
+  0% {
+    @include transform-origin(right bottom);
+    @include rotate(0);
+    opacity: 1; }
+  100% {
+    @include transform-origin(right bottom);
+    @include rotate(90deg);
+    opacity: 0; } }

data/app/assets/stylesheets/cms/page_content_editing.css.scss

@@ -0,0 +1,4 @@
+// Minimalist styles for page editing controls that are added to CMS pages in edit mode.
+
+// Need to style 'EDIT'/Pencil button so it floats right and over elements for a content block
+// Need to style 'PLUS' so it fits in the center of a space.

data/app/assets/stylesheets/cms/page_editor.css.scss

@@ -0,0 +1,4 @@
+// Added to the page editing frame
+html, body {
+  height: 100%
+}

data/app/assets/stylesheets/cms/style.css.scss

@@ -0,0 +1,138 @@
+@charset "utf-8";
+
+$experimental-support-for-khtml: false;
+@import "compass/reset";
+@import "compass/css3";
+@import "compass/typography";
+@import "compass/css3/box";
+
+@import "includes/_rem.scss";
+@import "includes/_animation.scss";
+
+
+/* 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;
+	}
+}
+
+
+
+
+/* IMPORTING STYLES */
+@import 'styles/_base-grid.scss';
+@import 'styles/_text.scss';
+@import 'styles/_images.scss';
+@import 'styles/_lists.scss';
+@import 'styles/_buttons.scss';
+@import 'styles/_tables.scss';
+@import 'styles/_forms.scss';
+@import 'styles/_dropdown.scss';
+@import 'styles/_progress.scss';
+@import 'styles/_alerts.scss';
+@import 'styles/_glyph.scss';
+
+
+
+
+/* PAGE STYLE & LAYOUT IMPORTS */
+@import '_base.scss';
+
+@import '_colors.scss';
+@import '_buttons.scss';
+@import '_forms.scss';
+
+@import '_nav.scss';
+@import '_main-area.scss';
+@import '_sitemap.scss';
+@import '_sidebar.scss';

data/app/assets/stylesheets/cms/styles/_alerts.css.scss

@@ -0,0 +1,150 @@
+/* ALERT STYLES */
+.alert {
+    @include rem(padding, 1rem 1.5rem 1.25rem 1.5rem);
+    @include rem(margin-bottom,1.5rem);
+    background: rgba($warning,0.5);
+    border: 1px solid rgba(black,0.05);
+    @include border-radius(5px);
+    color: darken($warning,15%);
+    font-family: 'Source Sans Pro', sans-serif;
+    @include rem(font-size, 1.1rem);
+    line-height: 1.3;
+    font-weight: 400;
+
+    h4 {
+        color: darken($warning,15%);
+        margin: 0;
+    }
+
+    .close {
+        background: none;
+        border: 0;
+        z-index: 5;
+        position: absolute;
+        top: 2px;
+        right: 2px;
+        @include rem(font-size,1.35rem);
+        color: rgba(black,0.25);
+
+        &:hover,
+        &:active {
+            color: rgba(black,0.5);
+        }
+        &:focus {
+            outline: none;
+        }
+    }
+}
+
+.alert-success {
+    color: darken($success,15%);
+    background: rgba($success,0.35);
+
+    h4 {
+        color: darken($success,15%);
+    }
+}
+
+.alert-danger,
+.alert-error {
+    color: darken($danger,15%);
+    background: rgba($danger,0.3);
+
+    h4 {
+        color: darken($danger,15%);
+    }
+}
+
+.alert-info {
+    color: darken($secondary,10%);
+    background: rgba($secondary,0.25);
+
+    h4 {
+        color: darken($secondary,10%);
+    }
+}
+
+.alert-primary {
+    color: white;
+    background: $primary;
+    -webkit-font-smoothing: antialiased;
+
+    h4 {
+        color: white;
+    }
+
+    & .close {
+        color: rgba(white,0.75);
+        -webkit-font-smoothing: antialiased;
+
+        &:hover {
+            color: white;
+        }
+    }
+}
+
+.alert-inverse {
+    color: white;
+    background: $dark;
+    -webkit-font-smoothing: antialiased;
+
+    h4 {
+        color: white;
+    }
+
+    & .close {
+        color: rgba(white,0.75);
+        -webkit-font-smoothing: antialiased;
+
+        &:hover {
+            color: white;
+        }
+    }
+}
+
+.alert-block {
+    @include rem(padding-top,1.5rem);
+    @include rem(padding-bottom,1.75rem);
+
+    h4 {
+        @include rem(margin-bottom,0.4rem);
+    }
+    p, ul {
+        margin-bottom: 0;
+    }
+    p + p {
+        @include rem(margin-top,0.75rem);
+    }
+}
+
+.alert-small {
+    @include rem(padding, 0.35rem 0.75rem 0.5rem 0.75rem);
+    @include rem(margin-bottom,0.65rem);
+    @include rem(font-size, 1rem);
+    @include rem(line-height,1.1);
+    font-weight: 600;
+
+    & .close {
+        top: 0;
+        line-height: 1;
+        right: 2px;
+        color: #FFF;
+        font-weight: bold;
+        opacity: .8;
+        font-size: 1.35rem;
+        text-shadow: none;
+        padding: 0px 6px 3px;
+
+    }
+}
+
+.flash-message {
+  @extend .alert;
+  @extend .alert-info;
+  @extend .alert-small;
+  @extend .container;
+  @extend .center-column;
+  margin-top: 10px;
+  margin-bottom: -43px;
+
+}