admin/app/assets/stylesheets/push_type/admin.scss
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any styles
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new
* file per style scope.
*
*= require selectize
*= require pickadate/classic
*= require pickadate/classic.date
*= require pickadate/classic.time
*= require codemirror
*= require codemirror/themes/base16-light
*= require codemirror/themes/material
*= require froala_editor.min
*= require froala_style.min
*= require plugins/code_view.min
*= require plugins/file.min
*= require plugins/fullscreen.min
*= require plugins/image.min
*= require plugins/image_manager.min
*= require plugins/table.min
*= require plugins/video.min
*= require themes/gray.min
*= require font-awesome
*= require_self
*/
@import "foundation_and_overrides";
.turbolinks-progress-bar {
background-color: $primary-color !important;
height: 3px !important;
z-index: 9;
}
/* Overrides and extensions to Foundation */
[class^="fi-"], [class~=" fi-"] {
&:before {
font-size: 1.25em;
}
}
.top-bar {
.logo {
margin-top: -3px;
}
.active a {
font-weight: $font-weight-bold;
}
.has-dropdown > a, .has-dropdown > a:hover {
background: $white !important;
}
.dropdown {
border: 1px solid $silver;
border-top: none;
}
}
.button i {
margin-right: rem-calc(5);
}
.reveal-modal-bg {
z-index: 1005;
}
.reveal-modal, dialog {
z-index: 1006;
}
table {
width: 100%;
td p:last-child {
margin-bottom: 0;
}
}
/* Custom styles */
%block-link-bg {
display: block;
@include single-transition(background-color, 200ms);
&:hover {
background-color: scale-color($primary-color, $lightness: 95%);
}
}
.header {
position: fixed;
top: 0;
left: 0;
z-index: 5;
width: 100%;
height: rem-calc(60);
background-color: $white;
border-bottom: 1px solid $silver;
}
.main {
padding-top: rem-calc(80);
}
.container {
position: relative;
margin-bottom: rem-calc(20);
background-color: $white;
border: 1px solid $crumb-border-color;
@include radius($global-radius);
.head {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: rem-calc(40);
background-color: $white;
border-bottom: 1px solid $crumb-border-color;
@include radius($global-radius $global-radius 0 0);
overflow: hidden;
.btn {
height: 100%;
width: rem-calc(40);
line-height: rem-calc(40);
text-align: center;
a {
@extend %block-link-bg;
}
&.left {
border-right: 1px solid $crumb-border-color;
}
&.right {
border-left: 1px solid $crumb-border-color;
}
}
.title {
display: inline;
padding: rem-calc(0 15);
font-size: rem-calc(14);
line-height: rem-calc(40);
color: $oil;
}
.right .button {
margin: rem-calc(6 10 0 0)
}
}
.body {
height: calc(100% - 40px);
margin-top: rem-calc(40);
}
.padded {
padding: rem-calc(20 15);
}
.headless {
margin-top: 0;
}
}
.node-list {
@extend .no-bullet;
margin: 0;
.sortable-placeholder {
background-color: scale-color($warning-color, $lightness: 95%);
border-bottom: 1px solid $crumb-border-color;
&:last-child {
border-bottom: none;
}
}
}
.node-list-item {
position: relative;
border-bottom: 1px solid $crumb-border-color;
&:last-child {
border-bottom: none;
}
> a {
display: block;
@include single-transition(background-color, 200ms);
&:hover {
background-color: scale-color($primary-color, $lightness: 97.5%);
.title {
color: scale-color($primary-color, $lightness: -12%);
}
}
}
.title {
height: rem-calc(40);
padding: rem-calc(10 15 6);
line-height: rem-calc(24);
font-size: rem-calc(18);
color: $tuatara;
overflow: hidden;
white-space: nowrap;
}
.meta {
height: rem-calc(40);
padding: rem-calc(0 15 0);
line-height: rem-calc(40);
font-size: rem-calc(13);
color: $aluminum;
.label {
margin-right: rem-calc(10);
}
}
.buttons, .descendants {
position: absolute;
top: 0;
right: 0;
bottom: 0;
line-height: rem-calc(40);
text-align: center;
border-left: 1px solid $crumb-border-color;
a {
@extend %block-link-bg;
color: $primary-color;
}
}
.buttons {
width: rem-calc(40);
a, span {
display: block;
width: 100%;
height: rem-calc(40);
color: $gainsboro;
&:first-child {
border-bottom: 1px solid $crumb-border-color;
}
}
a.alert {
color: $alert-color;
}
a.success {
color: $success-color;
}
}
.descendants {
width: rem-calc(90);
.icon {
height: rem-calc(40);
padding-top: rem-calc(10);
font-size: rem-calc(24);
}
.meta {
padding: 0 !important;
}
}
&.actionable {
padding-right: rem-calc(40);
}
&.descendable {
padding-right: rem-calc(90);
}
.handle {
position: absolute;
top: 6px;
left: 6px;
bottom: 6px;
width: rem-calc(19);
background-color: $white-smoke;
cursor: move;
@include single-transition(background-color, 200ms);
&:hover {
background-color: $gainsboro;
}
}
.sortable & {
.title, .meta {
padding-left: rem-calc(40);
}
&.sortable-dragging {
background-color: $white;
border: 1px solid $primary-color;
box-shadow: 10px 10px 10px #000 !important;
.handle {
background-color: $primary-color;
}
}
}
}
.taxonomies-list-item {
position: relative;
background-color: $white;
border: 1px solid $crumb-border-color;
@include radius($global-radius);
> a {
display: block;
@include single-transition(background-color, 200ms);
&:hover {
background-color: scale-color($primary-color, $lightness: 97.5%);
.title {
color: scale-color($primary-color, $lightness: -12%);
}
}
}
.title {
padding: rem-calc(20 15);
line-height: rem-calc(28);
font-size: rem-calc(18);
color: $tuatara;
overflow: hidden;
white-space: nowrap;
}
.meta {
height: rem-calc(40);
padding: rem-calc(0 15 0);
line-height: rem-calc(40);
font-size: rem-calc(13);
color: $aluminum;
border-top: 1px solid $crumb-border-color;
.label {
margin-right: rem-calc(10);
}
}
}
.taxonomy-term-list, .nested-taxonomy-term-list {
margin: 0;
list-style: none;
}
.nested-taxonomy-term-list {
border-top: 1px solid $crumb-border-color;
padding-left: rem-calc(40);
&:empty {
border-top: none;
}
.taxonomy-term-item {
.show, form {
border-left: 1px solid $crumb-border-color;
}
}
.taxonomy-term-item, .angular-ui-tree-placeholder {
&:before, &:after {
position: absolute;
right: 100%;
top: 0;
content: ' ';
display: block;
width: rem-calc(23);
border-left: 6px solid $crumb-border-color;
}
&:before {
height: rem-calc(43);
border-bottom: 6px solid $crumb-border-color;
}
&:after {
bottom: -1px;
}
&:last-child:after {
display: none;
}
}
}
.taxonomy-term-item {
position: relative;
border-bottom: 1px solid $crumb-border-color;
&:last-child {
border-bottom: none;
}
.show {
position: relative;
}
.title {
height: rem-calc(40);
padding: rem-calc(10 15 6 40);
line-height: rem-calc(24);
font-size: rem-calc(18);
color: $tuatara;
overflow: hidden;
white-space: nowrap;
}
.meta {
height: rem-calc(40);
padding: rem-calc(0 15 0 40);
line-height: rem-calc(40);
font-size: rem-calc(13);
color: $aluminum;
.label {
margin-right: rem-calc(10);
}
}
.buttons, .edit {
position: absolute;
top: 0;
right: 0;
bottom: 0;
line-height: rem-calc(40);
text-align: center;
border-left: 1px solid $crumb-border-color;
a {
@extend %block-link-bg;
color: $primary-color;
}
}
.buttons {
width: rem-calc(40);
a, span {
display: block;
width: 100%;
height: rem-calc(40);
color: $gainsboro;
&:first-child {
border-bottom: 1px solid $crumb-border-color;
}
}
a.alert {
color: $alert-color;
}
a.success {
color: $success-color;
}
}
.edit {
width: rem-calc(90);
.icon {
height: rem-calc(40);
padding-top: rem-calc(10);
font-size: rem-calc(24);
}
.meta {
padding: 0 !important;
}
}
.handle {
position: absolute;
top: 6px;
left: 6px;
height: rem-calc(68);
width: rem-calc(19);
background-color: $white-smoke;
cursor: move;
@include single-transition(background-color, 200ms);
&:hover {
background-color: $gainsboro;
}
}
form {
overflow: auto;
padding-top: rem-calc(16);
}
}
.angular-ui-tree-empty, .angular-ui-tree-hidden {
display: none;
}
.angular-ui-tree-placeholder {
position: relative;
width: auto !important;
border-bottom: 1px solid $crumb-border-color;
background-color: scale-color($warning-color, $lightness: 95%);
&:last-child {
border-bottom: none;
}
}
.angular-ui-tree-drag {
position: absolute;
background-color: $white;
border: 1px solid $primary-color;
box-shadow: 10px 10px 10px #000 !important;
pointer-events: none;
opacity: .9;
> li > div > .show .handle {
background-color: $primary-color;
}
}
.user-list-item {
position: relative;
background-color: $white;
border: 1px solid $crumb-border-color;
@include radius($global-radius);
> a {
display: block;
@include single-transition(background-color, 200ms);
&:hover {
background-color: scale-color($primary-color, $lightness: 97.5%);
.title {
color: scale-color($primary-color, $lightness: -12%);
}
}
}
.avatar {
position: absolute;
top: rem-calc(10);
left: rem-calc(10);
width: 48px;
height: 48px;
font-size: rem-calc(22);
line-height: 46px;
text-align: center;
color: $success-color;
background-color: $white;
border: 1px solid $info-color;
@include radius(24px);
}
.title {
height: rem-calc(60);
padding: rem-calc(20 15 0 70);
line-height: rem-calc(28);
font-size: rem-calc(18);
color: $tuatara;
overflow: hidden;
white-space: nowrap;
}
.meta {
height: rem-calc(40);
padding: rem-calc(0 15 0);
line-height: rem-calc(40);
font-size: rem-calc(13);
color: $aluminum;
.label {
margin-right: rem-calc(10);
}
}
}
.asset-list-item {
background-color: $white;
border: 1px solid $crumb-border-color;
> a {
display: block;
@include single-transition(background-color, 200ms);
&:hover {
background-color: scale-color($primary-color, $lightness: 97.5%);
.title {
color: scale-color($primary-color, $lightness: -12%);
}
}
}
.preview img {
border-bottom: 1px solid $crumb-border-color;
}
.title {
height: rem-calc(64);
padding: rem-calc(8 15);
font-size: rem-calc(16);
line-height: rem-calc(24);
color: $tuatara;
overflow: hidden;
}
}
.panel {
@include radius($global-radius);
.submit, .cta {
.button:last-of-type {
margin: 0;
}
}
}
.side-panel {
background-color: $panel-bg;
border: 1px solid $crumb-border-color;
@include radius($global-radius);
.padded, .cta, .submit {
padding: $panel-padding;
}
.cta, .submit {
background-color: $white;
@include radius(0 0 $global-radius $global-radius);
.button {
margin: 0;
}
}
.text-button {
text-align: center;
margin-top: rem-calc(20);
color: $aluminum;
a {
color: $primary-color;
}
&.success a {
color: $success-color;
}
&.alert a {
color: $alert-color;
}
}
.asset-upload {
margin-top: rem-calc(20);
}
.side-nav {
padding: rem-calc(24 0);
.heading {
padding: rem-calc(0 14);
}
}
}
.meta-table {
display: table;
width: 100%;
font-size: rem-calc(14);
border-spacing: 0 3px;
color: $oil;
.meta-row {
display: table-row;
}
.key, .value {
display: table-cell;
}
.key {
width: 25%;
padding-right: rem-calc(10);
}
.value {
padding: rem-calc(3 9);
background: $vapor;
color: $jumbo;
border: 1px dotted $gainsboro;
@include radius($global-radius);
.button {
margin: 0;
}
}
.editable {
color: $oil;
cursor: pointer;
&:hover {
color: $primary-color;
background: $ghost;
}
}
}
.pagination-stats {
margin-bottom: rem-calc(9);
font-size: rem-calc(12);
text-transform: uppercase;
color: $oil;
}
.dashboard {
margin-top: rem-calc(40);
padding: rem-calc(80 0);
border: 6px dashed $gainsboro;
h1 {
font-family: $code-font-family;
text-align: center;
color: $gainsboro;
}
}
.empty-default {
padding: rem-calc(38 50);
border: 1px solid $crumb-border-color;
color: $oil;
background-color: $white;
.container & {
padding: rem-calc(14 50 10);
border: none;
}
}
/* Form stuff */
input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input[type="color"], textarea {
font-weight: 300;
line-height: 1.5em;
}
textarea {
min-height: 7.5em;
}
form .title {
input[type="text"] {
margin-bottom: rem-calc(8);
font-size: rem-calc(23);
font-weight: 700;
}
.error input[type="text"] {
margin-bottom: 0;
}
}
form .permalink {
.columns {
opacity: 0;
}
.visible {
opacity: 1 !important;
@include single-transition(opacity, 500ms);
}
.key, .value {
margin-right: 8px;
color: $form-label-font-color;
}
.key {
font-size: $form-label-font-size;
line-height: rem-calc(30);
font-weight: $font-weight-bold;
}
.value {
display: inline-block;
min-width: 50%;
padding: rem-calc(0 8);
font-size: 0;
line-height: 0;
background-color: $ghost;
border: 1px dashed $silver;
@include radius($global-radius);
span {
font-size: rem-calc(14);
line-height: rem-calc(30);
}
}
}
.error-icon {
display: inline;
font-size: $form-label-font-size;
color: $alert-color;
i {
font-size: rem-calc(18);
vertical-align: middle;
}
}
#publish-date-fields {
max-width: 360px;
}
form .publish-date {
select {
display: inline;
width: auto;
padding-right: rem-calc(20);
font-size: rem-calc(12);
}
}
form .asset-upload {
margin-bottom: rem-calc(20) !important;
}
.asset-upload {
.dropzone {
height: 175px;
padding: $panel-padding;
border: 4px dashed $crumb-border-color;
@include single-transition(border-color, 200ms);
.prompt, .icon {
text-align: center;
}
.prompt {
color: $aluminum;
font-style: italic;
}
.icon {
margin-top: rem-calc(24px);
font-size: rem-calc(48px);
color: $gainsboro;
@include single-transition(color, 200ms);
}
&.hover {
background-color: scale-color($primary-color, $lightness: 97.5%);
border-color: $primary-color;
.icon {
color: $primary-color;
}
}
}
.preview {
border: 1px solid $table-border-color;
}
}
%field-module {
margin: rem-calc(0 0 16);
border: 1px solid $input-border-color;
.error small.error, &.error {
margin-bottom: 0;
}
label {
color: $form-label-font-color;
}
.error label {
color: $alert-color;
}
}
.asset-field {
@extend %field-module;
padding: rem-calc(8);
box-shadow: $input-box-shadow;
.preview {
border: 1px solid $table-border-color;
}
.button {
margin-top: 0;
margin-bottom: 0;
}
}
.repeater-field {
@extend %field-module;
table {
margin: 0;
border: none;
}
.remove {
width: rem-calc(40);
text-align: center;
a {
color: $alert-color;
}
}
.plus {
padding: 0.5625rem 0.625rem;
}
.button, input, select, textarea, label, .selectize-control, %field-module {
margin: 0;
}
textarea {
min-height: 4em;
}
}
.markdown textarea {
height: 400px;
font-family: $font-family-monospace;
}
.date, .time {
input[readonly] {
background: white;
cursor: pointer;
&.picker__input--active {
background-color: $input-focus-bg-color;
border-color: $input-focus-border-color;
}
}
.picker {
margin-top: -#{ rem-calc(17) };
}
.error .picker, .repeater-field & .picker {
margin-top: 0;
}
.picker__footer {
padding-bottom: 0.75em;
button {
margin-bottom: 0;
border-bottom: none;
&:before {
margin-right: rem-calc(8);
}
}
}
.picker__button--today {
color: $primary-color;
&:hover {
background-color: scale-color($primary-color, $lightness: 85%);
}
}
.picker__button--clear {
color: $alert-color;
&:hover {
background-color: scale-color($alert-color, $lightness: 85%);
}
}
.picker__button--close {
color: $monsoon;
&:hover {
background-color: scale-color($monsoon, $lightness: 85%);
}
}
.picker__list {
padding-bottom: 0.75em;
}
.picker__list-item {
small {
float: right;
line-height: 2.75em;
color: $aluminum;
}
}
}
.selectize-input {
min-height: 42px;
font-size: $input-font-size;
line-height: 1.5em;
color: $input-font-color;
background-color: $input-bg-color;
border-color: $input-border-color;
@include radius(0);
&.focus {
background-color: #fff;
border-color: $input-focus-border-color;
@include radius(0);
}
&.dropdown-active {
background-color: #fff;
}
&.dropdown-active::before {
background: $input-border-color;
}
input {
border: 0;
height: auto;
}
}
.selectize-control {
margin-bottom: 1rem;
&.multi {
.item {
padding-left: 10px !important;
padding-right: 10px !important;
background-color: $secondary-color;
@include radius($label-radius);
}
&.plugin-remove_button .item {
padding-right: 35px !important;
}
&.plugin-remove_button .remove {
width: 25px !important;
font-size: 16px !important;
font-weight: 600 !important;
color: $base !important;
border-left-color: $input-border-color !important;
}
}
.error & {
margin-bottom: 0;
line-height: 0.5em;
}
}
.selectize-dropdown {
font-size: 1em;
line-height: 1.5em;
border-color: $input-focus-border-color;
@include radius(0);
.option {
padding: 0.5rem;
font-style: italic;
}
.option.selected {
color: $base;
}
}
.tabs {
border: 1px solid $silver;
border-bottom: none;
background-color: $silver;
}
.fr-box {
margin-bottom: rem-calc(16);
}
.fr-toolbar {
border-radius: 0 !important;
}
.fr-wrapper {
border: 1px solid $input-border-color !important;
border-radius: 0 !important;
box-shadow: $input-box-shadow !important;
.focus & {
background: $input-focus-bg-color !important;
border-color: $input-focus-border-color !important;
}
}
.fr-view .fr-file:after {
display: none;
}
.fr-view .fr-file:before {
position: relative;
content: "\1F4CE";
padding-right: 6px;
font-weight: 400;
}
.markdown .CodeMirror {
margin-bottom: rem-calc(16);
height: 400px;
font-family: $font-family-monospace;
background: $input-bg-color !important;
border: 1px solid $input-border-color;
box-shadow: $input-box-shadow;
&.CodeMirror-focused {
background: $input-focus-bg-color !important;
border-color: $input-focus-border-color;
}
}
@import "foundation-icons";