browsercms-artirix 4.0.0.rc1.art4

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

@@ -0,0 +1,86 @@
+@font-face {
+	font-family: 'icomoon';
+	src:font-url('icomoon.eot');
+	src:font-url('icomoon.eot?#iefix') format('embedded-opentype'),
+		font-url('icomoon.svg#icomoon') format('svg'),
+		font-url('icomoon.woff') format('woff'),
+		font-url('icomoon.ttf') format('truetype');
+	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-house, .icon-link, .icon-radio-checked, .icon-radio-unchecked, .icon-checkbox-checked, .icon-checkbox-unchecked, .icon-file, .icon-folder, .icon-folder-open, .icon-earth, .icon-list, .icon-eye-blocked, .icon-locked {
+	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-link:before {
+    // Replace with correct value (Current is Cog)
+    content: "\e004";
+}
+.icon-search:before {
+	content: "\e003";
+}
+.icon-cog:before {
+	content: "\e004";
+}
+.icon-house:before {
+	content: "\e006";
+}
+.icon-radio-checked:before {
+	content: "\e007";
+}
+.icon-radio-unchecked:before {
+	content: "\e008";
+}
+.icon-checkbox-checked:before {
+	content: "\e009";
+}
+.icon-checkbox-unchecked:before {
+	content: "\e00a";
+}
+.icon-file:before {
+	content: "\e00b";
+}
+.icon-folder:before {
+	content: "\e00c";
+}
+.icon-folder-open:before {
+	content: "\e00e";
+}
+.icon-earth:before {
+	content: "\e00f";
+}
+.icon-list:before {
+	content: "\e010";
+}
+.icon-eye-blocked:before {
+	content: "\e000";
+}
+.icon-locked:before {
+	content: "\e001";
+}

data/app/assets/stylesheets/cms/styles/_images.scss

@@ -0,0 +1,86 @@
+/* IMAGE STYLES */
+img {
+	width: 100%;
+	height: auto;
+	display: inline-block;
+}
+
+// Image blocks viewed within the CMS shouldn't be 100% width.
+img[data-type="image_block"] {
+  width: auto;
+  max-width: 100%;
+}
+
+// For multiple attachments in the table
+img[data-purpose='attachment'] {
+  width:60px;
+}
+.img-rounded {
+	@include border-radius(6px);
+}
+.img-circle {
+	@include border-radius(50%);
+}
+.img-polaroid {
+	border: 1px solid rgba(black,0.1);
+	background: $light;
+	@include rem(padding,0.3rem);
+}
+
+
+.thumbnails {
+  	list-style: none;
+  	*zoom: 1;
+
+  	&:before,
+  	&:after {
+  		display: table;
+  		line-height: 0;
+  		content: "";
+  	}
+
+  	&:after {
+  		clear: both;
+  	}
+
+  	.row-fluid & {
+  		margin-left: 0;
+  	}
+
+  	& > li {
+  		float: left;
+  		@include rem(margin-bottom,1.5rem);
+
+  		&:before {
+  			display: none;
+  			content: "";
+  		}
+  	}
+}
+
+.thumbnail {
+	display: block;
+	@include rem(padding,0.3rem);
+	line-height: 20px;
+	border: 1px solid rgba(black,0.1);
+	background: $light;
+	@include border-radius(2px);
+	@include transition(background 0.25s);
+
+	img {
+		@include border-radius(1px);
+		display: block;
+		margin-right: auto;
+		margin-left: auto;
+	}
+
+	&:hover,
+	&:focus {
+		background: rgba($primary,0.9);
+	}
+
+	.caption {
+		padding: 9px;
+		color: $dark;
+	}
+}

data/app/assets/stylesheets/cms/styles/_lists.scss

@@ -0,0 +1,115 @@
+/* LIST STYLES */
+ul {
+	@include rem(margin-bottom,1.5rem);
+	padding: 0;
+	list-style-type: none;
+	*list-style-type: disc;
+
+	li {
+		font-family: 'Source Sans Pro', sans-serif;
+		@include rem(font-size, 1.1rem);
+		font-weight: 400;
+		@include rem(margin-bottom, 0.4rem);
+		color: $dark;
+
+		&:before {
+			content: '\25CF';
+			color: $primary;
+			@include rem(font-size,0.8rem);
+			vertical-align: top;
+			display: inline-block;
+			padding-top: 2px;
+			@include rem(margin,0 1rem 0 0);
+		}
+
+		ul {
+			*list-style-type: circle;
+			@include rem(margin, 0.4rem 0 0.5rem 1.5rem);
+
+			li {
+				@include rem(font-size, 1rem);
+
+				&:before {
+					content: '\25CB';
+				}
+			}
+		}
+	}
+
+	&.unstyled {
+		li {
+			&:before {
+				display: none;
+			}
+
+			ul {
+				*list-style-type: circle;
+
+				li {
+					&:before {
+						content: '\25CB';
+						color: $primary;
+						@include rem(font-size,0.8rem);
+						vertical-align: top;
+						display: inline-block;
+						padding-top: 2px;
+						@include rem(margin,0 1rem 0 0);
+					}
+				}
+			}
+		}
+	}
+}
+
+ol {
+	@include rem(margin-bottom,1.5rem);
+	padding: 0;
+	list-style-type: decimal;
+	@include rem(margin-left,1.5rem);
+
+	li {
+		font-family: 'Source Sans Pro', sans-serif;
+		@include rem(font-size, 1.1rem);
+		color: $dark;
+		font-weight: 400;
+		@include rem(margin-bottom, 0.4rem);
+	}
+}
+
+dl {
+	font-family: 'Source Sans Pro', sans-serif;
+	font-weight: 400;
+	color: $dark;
+	@include rem(font-size, 1.1rem);
+	@include rem(margin-bottom,1.5rem);
+
+	dt {
+		font-weight: 600;
+		display: block;
+		width: 30%;
+		float: left;
+		text-align: right;
+		@include rem(padding-right,1.35rem);
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	dd {
+		@include rem(margin-bottom, 0.75rem);
+		display: block;
+		width: 70%;
+		float: left;
+	}
+
+	&:after {
+		clear: both;
+		content: "";
+		display: block;
+		font-size: 0;
+		line-height: 0;
+		visibility: hidden;
+		width: 0;
+		height: 0;
+	}
+}

data/app/assets/stylesheets/cms/styles/_modal.scss

@@ -0,0 +1,174 @@
+/* MODAL STYLES */
+.modal-open {
+    overflow: hidden;
+}
+
+.modal {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1050;
+    -webkit-overflow-scrolling: touch;
+    display: none;
+    //overflow: auto;
+    //overflow-y: scroll;
+    outline: 0;
+
+    &.fade {
+        .modal-dialog {
+            @include transition(opacity 0.3s ease-out);
+            @include opacity(0);
+        }
+    }
+
+    &.in {
+        .modal-dialog {
+            @include opacity(1);
+        }
+    }
+}
+
+.modal-dialog {
+    position: relative;
+    width: auto;
+    margin: 10px;
+}
+
+.modal-content {
+    //position: relative;
+    //display: block; // Should not display by default
+    background: white;
+    background-clip: padding-box;
+    @include border-radius(8px);
+    border: 1px solid rgba(black,0.15);
+    outline: none;
+
+    position: fixed;
+    width: 40%;
+    left: 30%;
+    height: auto;
+    top: 20%;
+    bottom: auto;
+    overflow: hidden;
+}
+
+.modal-header {
+    //min-height: 16.428571429px;
+    padding: 15px 20px;
+    background: rgba($light,0.2);
+    border-bottom: 1px solid rgba(black,0.05);
+
+    h3 {
+        margin-bottom: 0;
+    }
+
+    .close {
+        background: none;
+        border: 0;
+        z-index: 5;
+        position: absolute;
+        top: 5px;
+        right: 5px;
+        @include rem(font-size,1.35rem);
+        color: rgba(black,0.25);
+
+        &:hover,
+        &:active {
+            color: rgba(black,0.5);
+        }
+        &:focus {
+            outline: none;
+        }
+    }
+
+    &.modal-success {
+        background: rgba($success,0.35);
+    }
+    &.modal-danger,
+    &.modal-error {
+        background: rgba($danger,0.3);
+    }
+    &.modal-info {
+        background: rgba($secondary,0.25);
+    }
+    &.modal-primary {
+        background: $primary;
+
+        h3 {
+            color: white;
+            -webkit-font-smoothing: antialiased;
+        }
+    }
+}
+
+.modal-title {
+    margin: 0;
+    //line-height: 1.428571429;
+}
+
+.modal-body {
+    position: relative;
+    padding: 20px 20px 25px;
+    overflow-y: auto;
+    max-height: 300px;
+
+    p {
+        &:only-child,
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+}
+
+.modal-footer {
+    padding: 20px 20px;
+    text-align: right;
+    background: rgba($light,0.2);
+    border-top: 1px solid rgba(black,0.05);
+
+    button,
+    .btn,
+    .btn-group {
+        margin-bottom: 0;
+    }
+
+    .btn + .btn {
+        margin-bottom: 0;
+        margin-left: 5px;
+    }
+    .btn-group .btn + .btn {
+        margin-left: -1px;
+    }
+    .btn-block + .btn-block {
+        margin-left: 0;
+    }
+
+    &:before,
+    &:after {
+        display: table;
+        content: " ";
+    }
+    &:after {
+        clear: both;
+    }
+}
+
+.modal-backdrop {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1040;
+    background-color: #000;
+
+    &.fade {
+        @include opacity(0);
+    }
+
+    &.in {
+        @include opacity(0.5);
+    }
+}

data/app/assets/stylesheets/cms/styles/_progress.scss

@@ -0,0 +1,43 @@
+/* PROGRESS BAR STYLES */
+.progress {
+    @include rem(height,1.75rem);
+    @include rem(margin-bottom,1.5rem);
+    overflow: hidden;
+    background: $light;
+    @include border-radius(4px);
+    border: 1px solid rgba(black,0.1);
+
+    .bar {
+        float: left;
+        width: 0;
+        height: 100%;
+        @include rem(font-size,0.75rem);
+        border-right: 1px solid rgba(black,0.05);
+        color: white;
+        -webkit-font-smoothing: antialiased;
+        text-align: center;
+        background: $primary;
+        @include transition(width 0.6s);
+    }
+
+    &.progress-info {
+        .bar {
+            background: $secondary;
+        }
+    }
+    &.progress-success {
+        .bar {
+            background: $success;
+        }
+    }
+    &.progress-warning {
+        .bar {
+            background: $warning;
+        }
+    }
+    &.progress-danger {
+        .bar {
+            background: $danger;
+        }
+    }
+}

data/app/assets/stylesheets/cms/styles/_tables.scss

@@ -0,0 +1,141 @@
+/* TABLE STYLES */
+.table {
+	width: 100%;
+	font-family: 'Source Sans Pro', sans-serif;
+	font-weight: 400;
+	@include rem(font-size, 1.1rem);
+	color: $dark;
+	@include rem(margin-bottom,1.5rem);
+	border-spacing: 0;
+	display: table;
+
+	thead {
+		display: table-header-group;
+		background: $light;
+		border-bottom: 1px solid rgba(black,0.07);
+
+		th {
+			display: table-cell;
+			font-weight: 600;
+			@include rem(padding,0.7rem);
+		}
+	}
+
+	tr {
+		display: table-row;
+		border-bottom: 1px solid rgba(black,0.05);
+
+		&:last-child {
+			border: 0;
+		}
+	}
+
+	td {
+		display: table-cell;
+		@include rem(padding,0.7rem);
+	}
+}
+
+.table-striped {
+	thead {
+		border-bottom: 1px solid rgba(black,0.05);
+	}
+	tbody {
+		tr {
+			border-bottom: 1px solid rgba(black,0.035);
+
+			&:nth-child(odd) {
+				background: rgba($light,0.25);
+			}
+			&:last-child {
+				border-bottom: 0;
+			}
+		}
+	}
+}
+
+.table-bordered {
+	border: 1px solid rgba(black,0.1);
+	border-collapse: separate;
+	*border-collapse: collapse;
+	@include border-radius(5px);
+
+	thead {
+		display: table-header-group;
+		@include border-radius(5px 5px 0 0);
+
+		th {
+			border-bottom: 1px solid rgba(black,0.07);
+			border-right: 1px solid rgba(black,0.07);
+
+			&:first-child {
+				@include border-radius(5px 0 0 0);
+			}
+			&:last-child {
+				@include border-radius(0 5px 0 0);
+				border-right: 0;
+			}
+
+			&:only-child {
+				@include border-radius(5px 5px 0 0);
+			}
+		}
+	}
+	tbody {
+		tr {
+			td {
+				border-bottom: 1px solid rgba(black,0.07);
+				border-right: 1px solid rgba(black,0.07);
+
+				&:last-child {
+					border-right: 0;
+				}
+			}
+
+			&:last-child {
+				td {
+					border-bottom: 0;
+
+					&:first-child {
+						@include border-radius(0 0 0 5px);
+					}
+					&:last-child {
+						@include border-radius(0 0 5px 0);
+					}
+
+					&:only-child {
+						@include border-radius(0 0 5px 5px);
+					}
+				}
+			}
+		}
+	}
+}
+
+.table-hover {
+	tbody {
+		tr {
+			&:hover {
+				background: rgba($light,0.65);
+			}
+		}
+	}
+}
+
+.table-condensed {
+	@include rem(font-size,1rem);
+
+	thead th, td {
+		@include rem(padding,0.35rem 0.7rem);
+	}
+}
+
+.success {
+	background: rgba($success,0.3);
+}
+.error {
+	background: rgba($danger,0.3);
+}
+.warning {
+	background: rgba($warning,0.3);
+}