browsercms-artirix 4.0.0.rc1.art4

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

@@ -0,0 +1,60 @@
+/* ASSETS PAGE */
+@mixin status-icon($background) {
+  color: white;
+  text-transform: uppercase;
+  background: $background;
+  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;
+  float: right;
+}
+
+.assets {
+	input[type=checkbox] {
+		margin-right: 0;
+	}
+
+	.check-cell {
+		@include rem(width,2rem);
+	}
+
+
+	.draft {
+		@include status-icon($danger);
+	}
+
+    .published {
+        @include status-icon($success);
+    }
+
+	.caret {
+		margin-left: 10px;
+		color: $dark;
+		@include opacity(0.6);
+
+		&:hover {
+			text-decoration: none;
+			@include opacity(0.8);
+		}
+	}
+
+	tbody {
+		tr {
+			position: relative;
+
+			&:hover {
+				background: rgba($gray,0.175);
+				cursor: pointer;
+			}
+		}
+	}
+}
+
+// Iframe for attachments
+#asset_add_uploader {
+  display: none;
+}

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

@@ -0,0 +1,42 @@
+/* BLOCKING OUT ELEMENTS */
+article, aside, div, details, figcaption, figure, footer, header, hgroup, nav, section {
+  	display: block;
+  	position: relative;
+}
+audio, canvas, video {
+  	display: inline-block;
+  	*display: inline;
+  	*zoom: 1;
+}
+audio:not([controls]) {
+  display: none;
+}
+
+/* CONTAINER SIZING */
+.center-column {
+	width: 80%;
+	min-width: 960px;
+
+	@include breakpoint(landscape) {
+		width: 960px;
+	}
+}
+.main-container {
+	margin-top: 50px;
+	margin-bottom: 50px;
+	background: white;
+	@include rem(padding,1.5rem 0 2.5rem 0);
+
+	@include border-radius(8px);
+	border: 1px solid rgba(black,0.15);
+
+	&.no-bottom {
+		@include rem(padding,1.5rem 0 0 0);
+	}
+}
+
+.padded {
+	width: 100%;
+	padding: 0 2.127659574468085%;
+	*padding: 0 2.074468085106383%;
+}

data/app/assets/stylesheets/cms/_cms-buttons.scss

@@ -0,0 +1,73 @@
+/* PRIMARY ACTION BUTTONS */
+.top-buttons {
+	@include rem(padding-top,0.3rem);
+
+	h4 {
+		@include rem(margin-right,3rem);
+		@include rem(line-height,2.5rem);
+	}
+
+	.btn-primary,
+	.btn-group {
+		@include rem(margin-left,0.5rem);
+
+		&.dropdown-toggle {
+			margin-left: 0;
+		}
+	}
+
+	.form-inline {
+		margin-bottom: 0;
+
+		label,
+		select {
+			display: inline-block;
+			float: left;
+		}
+
+		.show-sort {
+			@include rem(width,9rem);
+			@include rem(margin-right,1rem);
+			@include rem(margin-left,0.65rem);
+		}
+	}
+
+	.pull-right {
+	    &:after {
+	        left: auto;
+	        right: 16px;
+	    }
+	}
+}
+
+.form-actions {
+	margin-bottom: 0;
+	margin-top: 30px;
+
+	.btn-primary {
+		@include rem(margin-left,0.75rem);
+	}
+
+	button,
+	.btn,
+	.btn-group {
+		margin-bottom: 0;
+	}
+}
+
+.bottom-form-btn {
+	padding-bottom: 0;
+}
+
+.btn-group {
+  .btn-primary {
+    font-size: 1.2rem;
+  }
+  .dropdown-toggle {
+    padding: 0 1.75rem !important;
+  }
+}
+
+.btn-bottom-margin {
+	@include rem(margin-bottom,1rem);
+}

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

@@ -0,0 +1,70 @@
+/* INLINE FORM LABELS */
+.infield-label {
+  display: block;
+  position: relative;
+
+  label {
+    bottom: 0;
+    color: rgba($dark, 0.65);
+    display: block;
+    left: 0;
+    @include rem(line-height, 1.5rem);
+    margin: 0;
+    right: 0;
+    top: 0;
+    cursor: text;
+    @include rem(font-size, 1rem);
+    @include rem(padding, 0.5rem 0.65rem);
+    position: absolute;
+    white-space: nowrap;
+
+    &.label-xxlarge {
+      @include rem(font-size, 1.2rem);
+      @include rem(line-height, 2.1rem);
+    }
+  }
+}
+
+.placeholder-focus {
+  label {
+    background: $secondary;
+    border: 1px solid rgba(black, 0.05);
+    @include rem(font-size, 0.875rem);
+    bottom: auto;
+    color: #fff;
+    right: auto;
+    @include rem(top,-3rem);
+
+    &:after {
+      display: block;
+      @include rem(height, 1rem);
+      @include rem(width, 1rem);
+      position: absolute;
+      background: $secondary;
+      @include rotate(45deg);
+      @include rem(left, 0.75rem);
+      bottom: 0;
+      border-right: 1px solid rgba(black, 0.05);
+      border-bottom: 1px solid rgba(black, 0.05);
+      @include rem(margin-bottom,-0.5rem);
+      content: "";
+    }
+  }
+}
+
+// Making manual corrections to forms.
+.control-group {
+  div.editor {
+    @include rem(margin-top, 3rem);
+    textarea {
+       height: 400px;
+       // Should match CKEditor.
+     }
+  }
+
+
+}
+
+.group_filter {
+  @include rem(width, 15rem);
+}

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

@@ -0,0 +1,20 @@
+/* COLORS */
+.color-block {
+	@include rem(height,9rem);
+	@include border-radius(4px);
+}
+.primary-back {
+	background-color: $primary;
+}
+.secondary-back {
+	background-color: $secondary;
+}
+.dark-back {
+	background-color: $dark;
+}
+.gray-back {
+	background-color: $gray;
+}
+.light-back {
+	background-color: $light;
+}

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

@@ -0,0 +1,25 @@
+/* DASHBOARD */
+.dashboard {
+	.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;
+		float: right;
+	}
+
+	tbody {
+		tr {
+			&:hover {
+				background: rgba($gray,0.175);
+				cursor:pointer;
+			}
+		}
+	}
+}

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

@@ -0,0 +1,60 @@
+@font-face {
+	font-family: 'icomoon';
+	src:url('../FONTS/icomoon.eot');
+	src:url('../FONTS/icomoon.eot?#iefix') format('embedded-opentype'),
+		url('../FONTS/icomoon.woff') format('woff'),
+		url('../FONTS/icomoon.ttf') format('truetype'),
+		url('../FONTS/icomoon.svg#icomoon') format('svg');
+	font-weight: normal;
+	font-style: normal;
+}
+
+/* Use the following CSS code if you want to use data attributes for inserting your icons */
+[data-icon]:before {
+	font-family: 'icomoon';
+	content: attr(data-icon);
+	speak: none;
+	font-weight: normal;
+	font-variant: normal;
+	text-transform: none;
+	line-height: 1;
+	-webkit-font-smoothing: antialiased;
+}
+
+/* Use the following CSS code if you want to have a class per icon */
+/*
+Instead of a list of all class selectors,
+you can use the generic selector below, but it's slower:
+[class*="icon-"] {
+*/
+.icon-search, .icon-cog, .icon-home, .icon-radio-checked, .icon-radio-unchecked, .icon-checkbox-checked, .icon-checkbox-unchecked {
+	font-family: 'icomoon';
+	speak: none;
+	font-style: normal;
+	font-weight: normal;
+	font-variant: normal;
+	text-transform: none;
+	line-height: 1;
+	-webkit-font-smoothing: antialiased;
+}
+.icon-search:before {
+	content: "\e000";
+}
+.icon-cog:before {
+	content: "\e001";
+}
+.icon-home:before {
+	content: "\e002";
+}
+.icon-radio-checked:before {
+	content: "\e003";
+}
+.icon-radio-unchecked:before {
+	content: "\e004";
+}
+.icon-checkbox-checked:before {
+	content: "\e005";
+}
+.icon-checkbox-unchecked:before {
+	content: "\e006";
+}

data/app/assets/stylesheets/cms/_main-area.scss

@@ -0,0 +1,62 @@
+/* MAIN FORM AREA */
+.main-content, .modal-body {
+	@include rem(margin-top,1rem);
+
+	.add-link {
+		@include rem(margin-top,0.75rem);
+		margin-left: 25px;
+	}
+
+
+
+	label {
+		width: 23.404255319148934%;
+		*width: 23.351063829787233%;
+		margin-left: 0;
+		display: block;
+		float: left;
+
+		& + textarea {
+			width: 100%;
+			float: none;
+		}
+
+		&.checkbox {
+			width: 100%;
+			float: none;
+		}
+	}
+	input[type=text],
+	input[type=email],
+	input[type=password],
+	input[type=file],
+	input[type=tag_list],
+	input[type=number],
+	select {
+		display: block;
+		float: left;
+		width: 74.46808510638297%;
+		*width: 74.41489361702126%;
+		margin-left: 2.127659574468085%;
+		*margin-left: 2.074468085106383%;
+
+		&[disabled] {
+			display: block;
+			float: left;
+			width: 65.95744680851064%;
+			*width: 65.90425531914893%;
+			margin-left: 2.127659574468085%;
+			*margin-left: 2.074468085106383%;
+		}
+
+		&.input-block-level {
+			width: 100%;
+			margin-left: 0;
+			float: none;
+		}
+	}
+	textarea {
+		width: 100%;
+		float: none;
+	}
+}

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

@@ -0,0 +1,197 @@
+/* MAIN NAV */
+#main-nav {
+	background: white;
+	@include rem(height,7rem);
+	border-bottom: 1px solid rgba(black,0.15);
+
+	.logged-in {
+		@include rem(height,2rem);
+		width: 100%;
+		background: darken($dark,5%);
+		border-bottom: 1px solid rgba(black,0.15);
+	}
+	.primary-nav {
+		@include rem(height,5rem);
+		width: 100%;
+	}
+
+	.container {
+		padding: 0;
+		height: 100%;
+	}
+
+	.main-logo {
+		height: 100%;
+		width: auto;
+		float: left;
+		@include rem(padding, 2.15rem 0 1.35rem 0);
+		@include rem(margin-right,3.5rem);
+	}
+
+	.subnav {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+		height: 100%;
+		border-right: 1px solid rgba(black,0.075);
+
+		li {
+			float: left;
+			height: 100%;
+			border-left: 1px solid rgba(black,0.075);
+			color: white;
+			font-weight: 300;
+			@include rem(font-size,0.875rem);
+			@include rem(line-height,1.875rem);
+
+			&:first-child {
+				border-left: 0;
+				@include rem(padding,0 1.5rem);
+			}
+
+			a {
+				color: white;
+				@include rem(padding,0 1.5rem);
+				@include rem(height,100%);
+				display: block;
+
+				&:hover {
+					background: rgba(white,0.04);
+				}
+			}
+
+			&:before {
+				display: none;
+			}
+		}
+	}
+
+	.mainnav {
+		list-style: none;
+		float: left;
+		margin: 0;
+		padding: 0;
+
+		li {
+			float: left;
+			font-family: 'Roboto', sans-serif;
+			font-weight: 400;
+			@include rem(font-size,1.05rem);
+			@include rem(margin-right,2.75rem);
+			position: relative;
+			@include rem(padding, 2.65rem 0 0 0);
+
+			&:last-child {
+				margin-right: 0;
+			}
+
+			a {
+				&:hover {
+					text-decoration: none;
+					border-bottom: 1px solid $secondary;
+				}
+			}
+
+			&.active {
+				a {
+					color: $secondary;
+					border-bottom: 1px dotted $secondary;
+
+					&:hover {
+						text-decoration: none;
+					}
+				}
+				a.caret {
+					border-bottom: 0;
+				}
+			}
+
+			.caret {
+				display: inline-block;
+				@include rem(height,1.1rem);
+				@include rem(width,1.1rem);
+				@include rem(margin-left,0.5rem);
+				background: $light;
+				@include rem(line-height,1rem);
+				@include rem(font-size,0.875rem);
+				vertical-align: top;
+				margin-top: 1px;
+				text-align: center;
+				@include border-radius(50%);
+				@include transition(background 0.1s);
+
+				&:hover {
+					background: $secondary;
+					border: 0;
+					text-decoration: none;
+					color: white;
+				}
+				&:focus {
+					outline: none;
+				}
+			}
+
+			&.open {
+				& .caret {
+					background: $primary;
+					text-decoration: none;
+					color: white;
+				}
+			}
+
+			.dropdown-menu {
+				top: 100%;
+				margin-top: 25px;
+				margin-right: -15px;
+
+				li {
+					font-family: 'Source Sans Pro', sans-serif;
+					@include rem(font-size, 1.1rem);
+					font-weight: 400;
+					color: $dark;
+					width: 100%;
+					padding: 0;
+
+					a {
+						&:hover {
+							border-bottom: 0;
+						}
+					}
+				}
+
+				&:after {
+					right: 15px;
+				}
+			}
+
+			&:before {
+				display: none;
+			}
+		}
+	}
+
+	.btn-group {
+		position: absolute;
+		right: 0;
+		bottom: 0;
+		z-index: 999;
+
+		.btn {
+			margin-bottom: 0;
+          box-shadow: none;
+			@include rem(height,3.75rem);
+
+			&:first-child {
+				@include border-radius(5px 0 0 0);
+              line-height: 60px;
+			}
+			&:nth-child(2) {
+				@include border-radius(0 5px 0 0);
+			}
+		}
+
+		.dropdown-menu {
+			width: 125%;
+		}
+	}
+}

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

@@ -0,0 +1,64 @@
+/* SIDEBAR BLOCK */
+.sidebar-block {
+	@include border-radius(5px);
+	background: rgba(black,0.02);
+	border: 1px solid rgba(black,0.05);
+	@include rem(padding,1rem 1.25rem 1.25rem 1.25rem);
+	@include rem(margin-top,1rem);
+
+	h4 {
+		&.label {
+			@include rem(margin-bottom,0.25rem);
+		}
+	}
+
+    .draft {
+      @include status-icon($danger);
+    }
+    .published {
+      @include status-icon($success);
+    }
+
+	label {
+		color: $gray;
+	}
+	select {
+		@include rem(margin-top,0.35rem);
+	}
+
+	div,
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6,
+	p {
+		&:last-child {
+			margin-bottom: 0;
+			border-bottom: 0;
+		}
+	}
+	input,
+	label,
+	select,
+	textarea,
+	& .row-fluid {
+		&:last-child {
+			margin-bottom: 0;
+		}
+	}
+}
+.add-link {
+	text-transform: uppercase;
+	font-family: 'Source Sans Pro', sans-serif;
+	@include rem(font-size, 0.9rem);
+	font-weight: 600;
+	border-bottom: 1px dotted $primary;
+	@include rem(margin-top,0.25rem);
+
+	&:hover {
+		text-decoration: none;
+		border-bottom: 1px solid $secondary;
+	}
+}