acklen-keystone/admin/public/styles/keystone.less

Web Application Framework and Admin GUI / Content Management System built on Express.js and Mongoose

/*!
 * Keystone JS
 *
 * Copyright 2016 Jed Watson
 * Licensed under the MIT License
 * http://opensource.org/licenses/MIT
 */

 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
 del, dfn, em, img, ins, kbd, q, s, samp,
 small, strike, strong, sub, sup, tt, var,
 b, u, i, center,
 dl, dt, dd, ol, ul, li,
 fieldset, form, label, legend,
 table, caption, tbody, tfoot, thead, tr, th, td,
 article, aside, canvas, details, embed,
 figure, figcaption, footer, header, hgroup,
 menu, nav, output, ruby, section, summary,
 time, mark, audio, video {
	 margin: 0;
	 padding: 0;
	 border: 0;
	 font-size: 100%;
	 font: inherit;
	 vertical-align: baseline;
 }
 body {
	 overflow: hidden;
 }
 /* HTML5 display-role reset for older browsers */
 article, aside, details, figcaption, figure,
 footer, header, hgroup, menu, nav, section {
	 display: block;
 }
 body {
	 line-height: 1;
 }
 ol, ul {
	 list-style: none;
 }
 blockquote, q {
	 quotes: none;
 }
 blockquote:before, blockquote:after,
 q:before, q:after {
	 content: '';
	 content: none;
 }
 table {
	 border-collapse: collapse;
	 border-spacing: 0;
 }

// Elemental
// ------------------------------

@import "@{elementalPath}/less/elemental.less";

// KEYSTONE VARIABLES
@import "variables.less";

// KEYSTONE AUTH
@import "auth.less";

// KEYSTONE SETUP
@import "keystone/animation.less";
@import "keystone/base.less";
@import "keystone/dashboard.less";
@import "keystone/forms.less";
@import "keystone/navigation.less";
@import "keystone/tables.less";
@import "keystone/utils.less";

@import "keystone/list.less";
@import "keystone/list-dropzone.less";
@import "keystone/item.less";
@import "keystone/toolbar.less";

// COMPONENTS
@import "keystone/wysiwyg.less";
@import "keystone/popout.less";


// REACT FIELDS
@import "react/react.less";


// DayPicker styles
// ------------------------------

.DayPicker {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	outline: none;
	padding: 1rem;
	position: relative;
	user-select: none;

	&:focus .DayPicker-Caption {
		text-decoration: underline;
	}
}

// wrap the calendar in chrome
.DayPicker--chrome {
	background-color: #fafafa;
	border-radius: @border-radius-base;
	border: 1px solid @input-border-color;
}

.DayPicker-Month {
	border-collapse: collapse;
	border-spacing: 0;
	display: table;
	// margin: 0 1rem;
	table-layout: fixed;
	user-select: none;
	width: 100%;
}

.DayPicker-NavBar {
	left: 0;
	padding: 0 .5rem;
	position: absolute;
	right: 0;
}

.DayPicker-NavButton {
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	cursor: pointer;
	height: 1.5rem;
	position: absolute;
	width: 1.5rem;
}

.DayPicker-NavButton--prev {
	left: 1rem;
	background-image: url("../images/datepicker-prev.svg");
}

.DayPicker-NavButton--next {
	right: 1rem;
	background-image: url("../images/datepicker-next.svg");
}


.DayPicker-Caption {
	display: table-caption;
	height: 1.5rem;
	text-align: center;
}

.DayPicker-Weekdays {
	display: table-header-group;
	// > div {
	//	 display: table-row;
	// }
}

.DayPicker-Weekday {
	display: table-cell;
	font-size: .875em;
	font-weight: 500;
	padding: .5rem;
	text-align: center;
}

.DayPicker-Body {
	display: table-row-group;
}

.DayPicker-Week {
	display: table-row;
}

.DayPicker-Day {
	background-color: @dropdown-bg;
	border: 1px solid @input-border-color;
	cursor: pointer;
	display: table-cell;
	padding: .5rem 0;
	text-align: center;
	vertical-align: middle;

	&:hover,
	&:focus {
		background-color: mix(@link-color, @dropdown-bg, 10%);
		color: @link-color;
		outline: none;
	}
}

.DayPicker--interactionDisabled .DayPicker-Day {
	cursor: default;
}


// Modifiers

.DayPicker-Day--today {
	color: #FF4981; // pink
	font-weight: 500;
}

.DayPicker-Day--disabled {
	color: @gray;
	cursor: default;
	background-color: lighten(@gray, 7);
}

.DayPicker-Day--sunday {
	color: @gray;
	background-color: lighten(@gray, 10);
}

.DayPicker-Day--outside {
	background-color: rgba(0, 0, 0, 0.05);
	cursor: default;
	color: @gray;
}

.DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside) {
	color: white;
	background-color: @app-primary;
}

// Locales

.DayPicker--ar {
	direction: rtl;
}

// Custom

@daypicker-indicator-size: 7px;

.DayPicker-Indicator {
	left: 1rem;
	position: absolute;
	top: -(@daypicker-indicator-size - 1);
}
.DayPicker-Indicator__bg,
.DayPicker-Indicator__border {
	border: @daypicker-indicator-size solid transparent;
	border-top-width: 0;
	display: inline-block;
	left: 0;
	top: 0;
	height: 0;
	position: absolute;
	width: 0;
}

.DayPicker-Indicator__border {
	border-bottom-color: darken(@input-border-color, 10%);
	top: -1px;
}
.DayPicker-Indicator__bg {
	border-bottom-color: #fafafa;
}

.hide-field {
	display: none !important;
}

.disabled-field {
	pointer-events: none;
	.Select-control {
		border: none;
	}
	.Select-clear-zone, .Select-arrow-zone {
		visibility: hidden;
	}
}

// CUSTOM ADMIN APPLICATION STYLES
@import (optional) "@{customStylesPath}";

// isomorphic
// ------------------------------

@import "isomorphic/styles.less";

li.ant-menu-item-selected.ant-menu-item {
    background-color: rgba(0, 0, 0, 0.4) !important;
}

.rst__rowToolbar button {
	padding: 0 5px;
}

#dialog-portal > div > div {
	z-index: 1000;
}

.tree-pages button,
.tree-pages .tree-1 .rst__row.rst__rowLandingPad {
	display: none;
}
.tree-pages .rst__toolbarButton button {
	display: block;
}
.tree-pages div::after {
	width: 0px;
}

.tree-pages .rst__lineHalfHorizontalRight::before,
.tree-pages .rst__lineFullVertical::after,
.tree-pages .rst__lineHalfVerticalTop::after,
.tree-pages .rst__lineHalfVerticalBottom::after {
	background-color:#fff;
}

.tree-pages .rst__tree {
    max-width: 100%;
    overflow: hidden;
}
.tree-pages .rst__toolbarButton button {
	margin: 18px 0px 0px 5px;
}
.tree-pages .tree-2 .ReactVirtualized__Grid__innerScrollContainer {
	margin-bottom: 200px;
}
.tree-pages .field-type-relationship {
	width: auto !important;
	> label {
		display: none;
	}
	.field-size-full {
		width: 100%;
		min-width: 200px;
		margin-top: 12px;
	}
	.Select-control {
		border: none;
	}
}

.tree-pages .tree-2 .ReactVirtualized__Grid__innerScrollContainer {
	width: 100% !important;
}
.tree-pages .tree-2 .rst__placeholder {
	max-width: 100%;
    z-index: 1;
}

.tree-pages .tree-2 .rst__placeholder::before,
.tree-pages .tree-2 .ReactVirtualized__Grid__innerScrollContainer {
	min-height: 48px;
	border: 1px dashed #d9d9d9;
}

.tree-pages .tree-2 .rst__moveHandle {
	min-width: 44px;
}

.EditForm-container.page-builder > div > div {
	width: 100%;
}
.EditForm-container.page-builder > div > div > div#edit-form > div {
	width: 75%;
}
.EditForm-container.page-builder > div > div > div#edit-form .tree-container {
	width: 100%;
}

.ant-btn.ant-btn-success {
    background-color: #449d44;
	border-color: #398439;
	color: #fff;
}

.ant-btn.ant-btn-success:hover,
.ant-btn.ant-btn-success:focus,
.ant-btn.ant-btn-success:active {
    background-color: #5cb85c;
	border-color: #4cae4c;
	color: #fff;
}
.versions-label {
	color: #4481ff;
    width: 80px;
    height: 28px;
    padding: 0px 8px;
    font-weight: bold;
    font-size: 16px;
}