leaflet map - path not working
This commit is contained in:
Sander Roosendaal
332
static/suit/less/djangocms.less
Normal file
332
static/suit/less/djangocms.less
Normal file
@@ -0,0 +1,332 @@
|
||||
@import 'mixins';
|
||||
@import 'variables';
|
||||
@import 'djangocms/list';
|
||||
|
||||
.hide-text { text-indent: 100%; white-space: nowrap; overflow: hidden; }
|
||||
.bs-icon {
|
||||
display: inline-block;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background-image: url("../bootstrap/img/glyphicons-halflings.png");
|
||||
background-position: 0 -96px;
|
||||
// text-indent: -9999px;
|
||||
text-indent: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
opacity: .6;
|
||||
margin: 0;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.delete-translation {
|
||||
margin-top: 7px;
|
||||
display: inline-block;
|
||||
}
|
||||
.confirm-delete {
|
||||
padding-right: 15px;
|
||||
.btn-info {
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
.datetime {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Fieldset */
|
||||
body.cms-page {
|
||||
.form-horizontal {
|
||||
.control-label {
|
||||
width: 140px;
|
||||
}
|
||||
.controls {
|
||||
margin-left: 160px;
|
||||
}
|
||||
fieldset.plugin-holder {
|
||||
display: block;
|
||||
background: @bgcolor;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
padding-right: 0;
|
||||
padding-bottom: 10px;
|
||||
margin: 30px 0 -35px (-@left-column-width - @padding);
|
||||
width: auto;
|
||||
>.legend {
|
||||
margin-bottom: -5px;
|
||||
margin-left: 10px;
|
||||
margin-top: 0;
|
||||
position: static;
|
||||
}
|
||||
.control-group {
|
||||
background: transparent;
|
||||
display: block;
|
||||
width: 100%;
|
||||
&.form-row {
|
||||
padding: 0;
|
||||
}
|
||||
> div {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.control-label {
|
||||
display: none;
|
||||
}
|
||||
.controls {
|
||||
display: block;
|
||||
margin-left: 0;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
overflow: auto;
|
||||
background: transparent;
|
||||
overflow: visible;
|
||||
}
|
||||
.plugin-select-holder {
|
||||
padding-right: 0;
|
||||
select {
|
||||
height: 26px;
|
||||
padding: 2px;
|
||||
width: 157px;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
.add-plugin, .copy-plugins {
|
||||
.bs-icon;
|
||||
padding: 2px;
|
||||
margin-left: 10px;
|
||||
.hide-text;
|
||||
}
|
||||
.copy-plugins {
|
||||
background-position: -240px -143px;
|
||||
}
|
||||
}
|
||||
.control-group:first-child .controls, .control-group:first-of-type .controls {
|
||||
padding: 0;
|
||||
}
|
||||
&:before {
|
||||
content: '';
|
||||
display: block;
|
||||
height: 10px;
|
||||
margin-bottom: 5px;
|
||||
background: #dfe1e4;
|
||||
border-left: 200px solid #dfe1e4;
|
||||
}
|
||||
}
|
||||
}
|
||||
.plugin-holder-separator {
|
||||
display: none;
|
||||
&:last-of-type {
|
||||
display: block;
|
||||
height: 10px;
|
||||
border: 0;
|
||||
background: #dfe1e4;
|
||||
border-left: 200px solid #dfe1e4;
|
||||
margin: 35px 0 40px (-@left-column-width - @padding);
|
||||
}
|
||||
}
|
||||
}
|
||||
.plugin-editor {
|
||||
position: relative;
|
||||
margin-left: (@left-column-width + 1px);
|
||||
iframe {
|
||||
margin: -25px 0 -10px;
|
||||
visibility: hidden;
|
||||
}
|
||||
&> p {
|
||||
margin: 0 0 0 @padding;
|
||||
.color-grey;
|
||||
.white-shadow;
|
||||
// font-style: italic;
|
||||
}
|
||||
}
|
||||
.plugin-list-holder {
|
||||
width: @left-column-width;
|
||||
}
|
||||
ul.plugin-list {
|
||||
border-top: 1px solid @border-color-light;
|
||||
/* Reset */
|
||||
li, li.active, li:hover {
|
||||
background: transparent; // border: 0;
|
||||
margin-right: -1px;
|
||||
}
|
||||
li {
|
||||
margin-left: 2px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
.vertical-gradient(#fff, #f9f9f9);
|
||||
.border-radius(@border-radius);
|
||||
border: 1px solid @border-color;
|
||||
margin-bottom: -1px;
|
||||
.white-shadow;
|
||||
.white-inset;
|
||||
|
||||
&:hover {
|
||||
background: white;
|
||||
border-color: #ccc;
|
||||
color: @text-color;
|
||||
z-index: 2;
|
||||
.delete {
|
||||
display: block;
|
||||
}
|
||||
span.text {
|
||||
color: #666;
|
||||
width: (@left-column-width - 53px);
|
||||
}
|
||||
}
|
||||
&.active, &.active:hover {
|
||||
box-shadow: none;
|
||||
z-index: 3;
|
||||
text-shadow: none;
|
||||
.blue-gradient;
|
||||
border-color: #6BA4BA;
|
||||
.text {
|
||||
color: #ffffff;
|
||||
}
|
||||
.descr {
|
||||
color: #c3dee8;
|
||||
}
|
||||
}
|
||||
.text {
|
||||
color: #666;
|
||||
width: (@left-column-width - 30px);
|
||||
white-space: nowrap;
|
||||
strong {
|
||||
display: block;
|
||||
float: left;
|
||||
min-width: 50px;
|
||||
}
|
||||
}
|
||||
.descr {
|
||||
color: #aaa;
|
||||
}
|
||||
.delete {
|
||||
.bs-icon;
|
||||
opacity: .2;
|
||||
padding: 2px;
|
||||
margin: 7px 0 0 6px;
|
||||
display: none;
|
||||
}
|
||||
.delete, .delete:hover, &:hover span.delete {
|
||||
background-position: -312px 0;
|
||||
}
|
||||
.drag {
|
||||
background: transparent;
|
||||
cursor: hand;
|
||||
cursor: grab;
|
||||
cursor: -moz-grab;
|
||||
cursor: -webkit-grab;
|
||||
&:hover {
|
||||
}
|
||||
&:active {
|
||||
cursor: grabbing;
|
||||
cursor: -moz-grabbing;
|
||||
cursor: -webkit-grabbing;
|
||||
}
|
||||
}
|
||||
&:hover span.drag, &.active:hover span.drag {
|
||||
background: url('../img/drag-handle.png') center center no-repeat;
|
||||
}
|
||||
/*.drag {
|
||||
.bs-icon;
|
||||
padding: 2px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.drag, .drag:hover, &:hover span.drag {
|
||||
background-position: 0 -48px;
|
||||
}*/
|
||||
}
|
||||
}
|
||||
|
||||
/* Popup related */
|
||||
body.popup {
|
||||
height: auto;
|
||||
.suit-column {
|
||||
float: none;
|
||||
position: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
/* Iframe related styling */
|
||||
body.plugin-change-form {
|
||||
#suit-center {
|
||||
padding-top: 1px;
|
||||
padding-right: 1px;
|
||||
}
|
||||
.plugin-submit-row {
|
||||
display: block;
|
||||
margin: 10px 0 0 200px;
|
||||
.btn {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
.btn-info {
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.plugin-preview {
|
||||
display: inline-block;
|
||||
// Hide preview box
|
||||
display: none;
|
||||
.grey-box-shadow;
|
||||
background: @bgcolor-light;
|
||||
padding: 5px;
|
||||
.border-radius(@border-radius);
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
margin-bottom: 5px;
|
||||
img {
|
||||
max-width: 100px;
|
||||
max-height: 100px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.control-group {
|
||||
&.form-row {
|
||||
padding: 0;
|
||||
}
|
||||
.control-label label {
|
||||
width: auto;
|
||||
float: none;
|
||||
text-align: right;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Specific plugin fields */
|
||||
#text_form {
|
||||
fieldset {
|
||||
box-shadow: none;
|
||||
}
|
||||
.control-group {
|
||||
.border-radius(0);
|
||||
width: 100%;
|
||||
display: block;
|
||||
> div {
|
||||
display: block;
|
||||
}
|
||||
.control-label {
|
||||
display: none;
|
||||
width: 0;
|
||||
}
|
||||
.controls {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
.border-radius(@border-radius);
|
||||
.html-widget {
|
||||
display: inline-block;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
#suit-loading-icon {
|
||||
display: none;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-image: url("../img/ajax-loader.gif");
|
||||
}
|
||||
345
static/suit/less/djangocms/list.less
Normal file
345
static/suit/less/djangocms/list.less
Normal file
@@ -0,0 +1,345 @@
|
||||
.change-list .filtered {
|
||||
background: inherit !important;
|
||||
}
|
||||
|
||||
.white-inset-light { box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .6); }
|
||||
#changelist #sitemap {
|
||||
.grey-box-shadow;
|
||||
// overflow: auto;
|
||||
|
||||
/* Custom styles */
|
||||
.border-radius(@border-radius, @border-radius, 0, 0);
|
||||
ul.header {
|
||||
background: transparent;
|
||||
color: @text-color;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
.grey-gradient;
|
||||
.white-shadow;
|
||||
font-weight: bold;
|
||||
height: auto;
|
||||
.border-radius(@border-radius, @border-radius, 0, 0);
|
||||
|
||||
/* Override jstree style.css */
|
||||
li {
|
||||
margin: 0;
|
||||
display: block;
|
||||
.cont {
|
||||
display: block;
|
||||
border: 0;
|
||||
white-space: nowrap;
|
||||
height: auto;
|
||||
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .3);
|
||||
// border-bottom: 1px solid #ddd;
|
||||
// border-top: 1px solid #ddd;
|
||||
.white-shadow;
|
||||
}
|
||||
.col1, .col2 > div {
|
||||
padding: 7px 5px 7px;
|
||||
text-align: center;
|
||||
border-right: 1px solid #EDEDED;
|
||||
vertical-align: top;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
.col1 {
|
||||
padding-left: 10px;
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
li {
|
||||
.col1 {
|
||||
float: left;
|
||||
display: inline;
|
||||
padding: 6px 0 0 10px;
|
||||
}
|
||||
.col2 {
|
||||
// text-align: right;
|
||||
}
|
||||
.col2 > div, .col2 > span {
|
||||
padding: 5px 5px 7px;
|
||||
text-align: center;
|
||||
width: auto;
|
||||
height: auto;
|
||||
float: left;
|
||||
display: block;
|
||||
min-height: 18px;
|
||||
}
|
||||
.col2 > div.col-view-perms { width: 55px; text-align: center; }
|
||||
.col2 > div.col-actions, .col2 > div.col-draft {
|
||||
padding-left: 7px;
|
||||
padding-right: 7px;
|
||||
}
|
||||
}
|
||||
.tree {
|
||||
border-top: 1px solid #ddd;
|
||||
.tree-default {
|
||||
display: block;
|
||||
div.context {
|
||||
display: none !important;
|
||||
}
|
||||
li {
|
||||
display: block;
|
||||
line-height: 16px;
|
||||
&.last {
|
||||
background-color: inherit !important;
|
||||
}
|
||||
a.title {
|
||||
background: none;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
.col1 {
|
||||
padding-left: 0;
|
||||
.changelink {
|
||||
display: none;
|
||||
}
|
||||
a.title {
|
||||
padding: 6px 0;
|
||||
background: transparent;
|
||||
&:active {
|
||||
cursor: grabbing;
|
||||
cursor: -moz-grabbing;
|
||||
cursor: -webkit-grabbing;
|
||||
}
|
||||
&:before {
|
||||
cursor: hand;
|
||||
cursor: grab;
|
||||
cursor: -moz-grab;
|
||||
cursor: -webkit-grab;
|
||||
content: '';
|
||||
display: inline-block;
|
||||
background: url('../img/drag-handle.png') 8px center no-repeat;
|
||||
width: 26px;
|
||||
height: 18px;
|
||||
vertical-align: middle;
|
||||
opacity: .4;
|
||||
}
|
||||
&:hover:before {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.col2 > div {
|
||||
display: block;
|
||||
border-left: 1px solid #eee;
|
||||
&.col-softroot, &.col-language {
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
.col-language {
|
||||
color: #ddd !important;
|
||||
text-transform: uppercase;
|
||||
padding-right: 10px;
|
||||
font-size: 11px;
|
||||
}
|
||||
.col-published, .col-navigation {
|
||||
label img {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.col-draft {
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
min-width: 32px;
|
||||
a {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
.col-lastchange {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.col-actions {
|
||||
a {
|
||||
.bs-icon;
|
||||
margin-left: 4px;
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
&.deletelink {
|
||||
background-position: -312px 0;
|
||||
}
|
||||
&.move {
|
||||
background-position: -120px -72px;
|
||||
}
|
||||
&.copy {
|
||||
background-position: -336px -96px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.viewpage, .publish {
|
||||
.bs-icon;
|
||||
padding: 0;
|
||||
margin-left: 4px;
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
.viewpage {
|
||||
background-position: -96px -120px;
|
||||
}
|
||||
.publish {
|
||||
background-position: -288px 0;
|
||||
}
|
||||
.col-draft {
|
||||
.viewpage {
|
||||
background-position: -96px -120px;
|
||||
}
|
||||
}
|
||||
.col-lastchange {
|
||||
.icon {
|
||||
.bs-icon;
|
||||
opacity: .3;
|
||||
background-position: 0 -72px;
|
||||
&:hover {
|
||||
opacity: .3;
|
||||
}
|
||||
&.add { background-position: -408px -96px; }
|
||||
&.pub { background-position: -96px -120px; }
|
||||
&.unp { background-position: -120px -120px; }
|
||||
&.mov { background-position: -168px -72px; }
|
||||
&.del { background-position: -312px 0; }
|
||||
&.app { background-position: -288px 0; }
|
||||
&.publish {
|
||||
opacity: .7;
|
||||
background-position: -72px -96px;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.selected {
|
||||
>.cont {
|
||||
border: 1px solid rgba(0, 0, 0, .2) !important;
|
||||
}
|
||||
>.cont:hover {
|
||||
border: 1px solid rgba(0, 0, 0, .3) !important;
|
||||
}
|
||||
}
|
||||
.cont {
|
||||
background: #fff;
|
||||
border-color: #e5e5e5;
|
||||
.white-inset;
|
||||
.white-shadow;
|
||||
&:hover {
|
||||
background-color: #f3f3f3;
|
||||
}
|
||||
&.publisher_draft {
|
||||
a, * {
|
||||
color: #999;
|
||||
}
|
||||
.white-inset-light;
|
||||
background-color: #f7f7f7;
|
||||
&:hover {
|
||||
background-color: darken(#f7f7f7, 3%);
|
||||
}
|
||||
}
|
||||
&.publisher_dirty {
|
||||
.col1 a {
|
||||
&:after {
|
||||
content: '*';
|
||||
color: #aaa;
|
||||
display: inline-block;
|
||||
margin-left: 3px;
|
||||
}
|
||||
}
|
||||
.white-inset-light;
|
||||
background-color: darken(#FCF8E3, 2%);
|
||||
&:hover {
|
||||
background-color: darken(#FCF8E3, 5%);
|
||||
}
|
||||
}
|
||||
&.publisher_delete_requested {
|
||||
.col1 a {
|
||||
color: @red;
|
||||
font-weight: bold;
|
||||
}
|
||||
.white-inset-light;
|
||||
background-color: darken(#fcf0f0, 2%);
|
||||
&:hover {
|
||||
background-color: darken(#fcf0f0, 4%);
|
||||
}
|
||||
}
|
||||
}
|
||||
.messagelist li {
|
||||
color: #666;
|
||||
padding: 10px 0 8px 20px;
|
||||
.white-shadow;
|
||||
}
|
||||
.softroot-icon {
|
||||
.bs-icon;
|
||||
&:hover {
|
||||
opacity: .6;
|
||||
}
|
||||
background-position: 0 -24px;
|
||||
}
|
||||
}
|
||||
li.last.closed > .cont, &>li.last.leaf > .cont {
|
||||
border-bottom: 0;
|
||||
}
|
||||
label {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
}
|
||||
input { margin-top: 0; }
|
||||
img { vertical-align: inherit; }
|
||||
|
||||
.move-target-container {
|
||||
display: none;
|
||||
a {
|
||||
display: inline-block;
|
||||
text-transform: uppercase;
|
||||
font-size: 10px;
|
||||
.border-radius(3px);
|
||||
background: #fff;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
margin-left: 1px;
|
||||
border: 1px solid #ddd;
|
||||
.grey-gradient;
|
||||
.white-inset-light;
|
||||
font-size: 14px;
|
||||
line-height: 10px;
|
||||
vertical-align: middle;
|
||||
width: 20px;
|
||||
height: 16px;
|
||||
padding-top: 3px;
|
||||
margin-top: -1px;
|
||||
&:hover {
|
||||
box-shadow: none;
|
||||
background: #fff;
|
||||
color: #000;
|
||||
// color: white !important;
|
||||
text-shadow: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#changelist {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
#loader-message {
|
||||
display: none;
|
||||
position: absolute;
|
||||
padding: 6px 15px 6px 30px;
|
||||
.greyer-box-shadow;
|
||||
.border-radius(@border-radius);
|
||||
margin-top: -47px;
|
||||
font-weight: bold;
|
||||
right: 20px;
|
||||
background: #fff url("../img/ajax-loader.gif") 7px center no-repeat;
|
||||
}
|
||||
152
static/suit/less/filer.less
Normal file
152
static/suit/less/filer.less
Normal file
@@ -0,0 +1,152 @@
|
||||
@import 'mixins';
|
||||
@clipboard-width: 260px;
|
||||
.filebrowser {
|
||||
.inner-two-columns {
|
||||
.inner-center-column {
|
||||
margin-right: (@clipboard-width + 20px);
|
||||
}
|
||||
.inner-right-column {
|
||||
width: @clipboard-width;
|
||||
}
|
||||
}
|
||||
|
||||
.thumbHeader {
|
||||
width: 48px;
|
||||
}
|
||||
.module {
|
||||
// overflow: auto;
|
||||
}
|
||||
.content-related {
|
||||
// margin-top: 20px;
|
||||
}
|
||||
table.clipboard {
|
||||
border: 0 !important;
|
||||
width: @clipboard-width!important;
|
||||
margin-right: 20px;
|
||||
border-collapse: collapse;
|
||||
tr.clipboardItem {
|
||||
td.thumbnail {
|
||||
width: 32px !important;
|
||||
padding: 0px;
|
||||
border-top: 0;
|
||||
border-right: 0;
|
||||
border-bottom-color: #eee;
|
||||
}
|
||||
td.label, td.thumbnail {
|
||||
font-size: 11px;
|
||||
overflow: hidden;
|
||||
color: #333;
|
||||
display: table-cell;
|
||||
border-radius: 0;
|
||||
white-space: normal;
|
||||
line-height: normal;
|
||||
}
|
||||
td.buttons {
|
||||
display: none;
|
||||
}
|
||||
td.label {
|
||||
max-width: 200px;
|
||||
}
|
||||
}
|
||||
tr:first-child td.thumbnail {
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
tr.noItemsRow td, tfoot tr td, td.label {
|
||||
border-right: 1px solid #ddd;
|
||||
}
|
||||
tfoot tr td {
|
||||
border-bottom: 1px solid darken(#ddd, 3%);
|
||||
padding: 6px 8px;
|
||||
.vertical-gradient(#f3f3f3, #e5e5e5);
|
||||
form {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.loadingThumb {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background-position: center center;
|
||||
background-image: url(../img/ajax-loader.gif);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
@anim: progress-bar-stripes 2s linear infinite;
|
||||
.fileUploadQueueItem .fileUploadProgress .fileUploadProgressBar {
|
||||
background-color: #2F96B4;
|
||||
width: 50px;
|
||||
height: 4px !important;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
}
|
||||
.clipboard-header {
|
||||
margin-top: 47px;
|
||||
}
|
||||
.clipboard-root {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.toolbar-content label.checkbox {
|
||||
color: #666;
|
||||
font-size: 11px;
|
||||
margin-left: 5px;
|
||||
input[type="checkbox"] {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
.folder_header {
|
||||
img {
|
||||
display: inline-block;
|
||||
max-width: 32px;
|
||||
margin: -5px 5px 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
span:last-child a {
|
||||
margin-right: 5px;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tiny {
|
||||
font-size: 11px;
|
||||
}
|
||||
.small {
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
}
|
||||
.file-size {
|
||||
color: #666;
|
||||
}
|
||||
.file-info {
|
||||
line-height: normal;
|
||||
font-size: 11px;
|
||||
}
|
||||
.this-page {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
a.insertlinkButton {
|
||||
background-image: none;
|
||||
padding: 2px 10px;
|
||||
width: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
/* Siderbar */
|
||||
#navcontainer {
|
||||
text-align: center;
|
||||
}
|
||||
#image_container {
|
||||
position: relative;
|
||||
margin-bottom: 5px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.filebrowser #changelist {
|
||||
padding-top: 5px;
|
||||
}
|
||||
30
static/suit/less/footer.less
Normal file
30
static/suit/less/footer.less
Normal file
@@ -0,0 +1,30 @@
|
||||
.footer {
|
||||
|
||||
color: #666;
|
||||
background-color: @footer-bgcolor;
|
||||
font-size: 11px;
|
||||
line-height: 1.5em;
|
||||
.white-shadow;
|
||||
|
||||
.content {
|
||||
border-top: 5px solid #E1E3E5;
|
||||
|
||||
.tools {
|
||||
float: left;
|
||||
padding: 15px 0 0 20px;
|
||||
}
|
||||
|
||||
.branding {
|
||||
padding: 15px 0 0 0;
|
||||
margin: 0px auto;
|
||||
width: 200px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.copyright {
|
||||
padding: 9px 20px 0 0;
|
||||
float: right;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
89
static/suit/less/header.less
Normal file
89
static/suit/less/header.less
Normal file
@@ -0,0 +1,89 @@
|
||||
.header { // border-top: 1px solid #494d4f;
|
||||
color: #d4d4d4;
|
||||
height: @header-height;
|
||||
overflow: hidden;
|
||||
text-shadow: 0 -1px #121414;
|
||||
|
||||
.header-content {
|
||||
float: left;
|
||||
height: @header-height;
|
||||
overflow: hidden;
|
||||
padding: 7px 0 0 30px;
|
||||
line-height: normal;
|
||||
overflow: hidden;
|
||||
|
||||
&.header-content-first {
|
||||
border-left: 1px solid #45494c;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.header-column {
|
||||
float: left;
|
||||
i {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#branding {
|
||||
height: @header-height;
|
||||
float: left;
|
||||
min-width: @left-column-width;
|
||||
border-right: 1px solid #2f3334;
|
||||
|
||||
h1 {
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
margin: 4px 15px 0 13px;
|
||||
padding: 0;
|
||||
text-shadow: 0 -1px #121414;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
h1 {
|
||||
text-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
|
||||
// text-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: #92D1EE;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
&.grey {
|
||||
color: #d4d4d4;
|
||||
}
|
||||
}
|
||||
|
||||
#user-tools {
|
||||
padding: 12px 20px 0 0;
|
||||
float: right;
|
||||
.user-links {
|
||||
display: inline-block;
|
||||
margin-left: 15px;
|
||||
}
|
||||
.separator {
|
||||
color: #999;
|
||||
display: inline-block;
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
|
||||
i { // Switch to inverse icons
|
||||
background-image: url(../img/glyphicons-halflings-white-nav.png);
|
||||
}
|
||||
|
||||
.horizontal-gradient(@header-bgcolor-1, @header-bgcolor-2);
|
||||
}
|
||||
21
static/suit/less/left-column.less
Normal file
21
static/suit/less/left-column.less
Normal file
@@ -0,0 +1,21 @@
|
||||
|
||||
.nav-quick-search {
|
||||
margin: 20px 0 2px 15px;
|
||||
position: relative;
|
||||
.search-query {
|
||||
border-radius: 15px;
|
||||
width: 150px;
|
||||
padding: 3px 10px;
|
||||
background: #f6f7f8;
|
||||
}
|
||||
.submit {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
right: 20px;
|
||||
top: 3px;
|
||||
}
|
||||
}
|
||||
147
static/suit/less/mixins.less
Normal file
147
static/suit/less/mixins.less
Normal file
@@ -0,0 +1,147 @@
|
||||
.clearfix() {
|
||||
*zoom: 1;
|
||||
&:before,
|
||||
&:after {
|
||||
display: table;
|
||||
content: "";
|
||||
}
|
||||
&:after {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
.horizontal-list(@li-margin-right: 0) {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
display: block;
|
||||
position: relative;
|
||||
float: left;
|
||||
margin-right: @li-margin-right;
|
||||
}
|
||||
|
||||
.clearfix();
|
||||
}
|
||||
|
||||
.selection(@color: #FFF, @background: rgba(0, 0, 0, 1)) {
|
||||
::selection {
|
||||
background: @background;
|
||||
color: @color;
|
||||
}
|
||||
::-moz-selection {
|
||||
background: @background;
|
||||
color: @color;
|
||||
}
|
||||
|
||||
img::selection {
|
||||
background: transparent;
|
||||
}
|
||||
img::-moz-selection {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.horizontal-gradient(@startColor: #555, @endColor: #333) {
|
||||
background-color: @endColor;
|
||||
background-repeat: no-repeat;
|
||||
background-image: -webkit-gradient(linear, left top, right top, from(@startColor), to(@endColor));
|
||||
background-image: -webkit-linear-gradient(right center, @startColor, @endColor);
|
||||
background-image: -moz-linear-gradient(right center, @startColor, @endColor);
|
||||
background-image: -o-linear-gradient(left, @startColor, @endColor);
|
||||
background-image: -khtml-gradient(linear, left top, right top, from(@startColor), to(@endColor));
|
||||
filter: e(%("progid:DXImageTransform.Microsoft.Gradient(StartColorStr='%d', EndColorStr='%d', GradientType=1)",@startColor,@endColor));
|
||||
-ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorStr='%d', EndColorStr='%d', GradientType=1))",@startColor,@endColor);
|
||||
}
|
||||
|
||||
.vertical-gradient(@startColor: #555, @endColor: #333) {
|
||||
background-color: @endColor;
|
||||
background-repeat: no-repeat;
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
|
||||
background-image: -webkit-linear-gradient(@startColor, @endColor);
|
||||
background-image: -moz-linear-gradient(@startColor, @endColor);
|
||||
background-image: -o-linear-gradient(top, @startColor, @endColor);
|
||||
background-image: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
|
||||
filter: e(%("progid:DXImageTransform.Microsoft.Gradient(StartColorStr='%d', EndColorStr='%d', GradientType=0)",@startColor,@endColor));
|
||||
-ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorStr='%d', EndColorStr='%d', GradientType=0))",@startColor,@endColor);
|
||||
}
|
||||
|
||||
.box-sizing(@mode) {
|
||||
-moz-box-sizing: @mode;
|
||||
-webkit-box-sizing: @mode;
|
||||
box-sizing: @mode;
|
||||
}
|
||||
|
||||
.border-box() {
|
||||
.box-sizing( border-box );
|
||||
}
|
||||
|
||||
.background-size(@mode) {
|
||||
-webkit-background-size: @mode;
|
||||
-moz-background-size: @mode;
|
||||
-o-background-size: @mode;
|
||||
background-size: @mode;
|
||||
}
|
||||
|
||||
.inner-shadow(@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) {
|
||||
-webkit-box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
|
||||
-moz-box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
|
||||
box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
|
||||
}
|
||||
|
||||
.box-shadow(@string) {
|
||||
-webkit-box-shadow: @string;
|
||||
-moz-box-shadow: @string;
|
||||
box-shadow: @string;
|
||||
}
|
||||
|
||||
.drop-shadow(@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) {
|
||||
-webkit-box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha);
|
||||
-moz-box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha);
|
||||
box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha);
|
||||
}
|
||||
|
||||
.opacity(@opacity: 0.5) {
|
||||
-webkit-opacity: @opacity;
|
||||
-moz-opacity: @opacity;
|
||||
opacity: @opacity;
|
||||
}
|
||||
|
||||
.border-radius(@top_left, @top_right, @bottom_right, @bottom_left) {
|
||||
-moz-background-clip: padding;
|
||||
-webkit-background-clip: padding-box;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
.border-radius(@top_left, @top_right, @bottom_right, @bottom_left)when not (@top_left = null) {
|
||||
-webkit-border-top-left-radius: @top_left;
|
||||
-moz-border-radius-topleft: @top_left;
|
||||
border-top-left-radius: @top_left;
|
||||
}
|
||||
|
||||
.border-radius(@top_left, @top_right, @bottom_right, @bottom_left)when not (@top_right = null) {
|
||||
-webkit-border-top-right-radius: @top_right;
|
||||
-moz-border-radius-topright: @top_right;
|
||||
border-top-right-radius: @top_right;
|
||||
}
|
||||
|
||||
.border-radius(@top_left, @top_right, @bottom_right, @bottom_left)when not (@bottom_left = null) {
|
||||
-webkit-border-bottom-left-radius: @bottom_left;
|
||||
-moz-border-radius-bottomleft: @bottom_left;
|
||||
border-bottom-left-radius: @bottom_left;
|
||||
}
|
||||
|
||||
.border-radius(@top_left, @top_right, @bottom_right, @bottom_left)when not (@bottom_right = null) {
|
||||
-webkit-border-bottom-right-radius: @bottom_right;
|
||||
-moz-border-radius-bottomright: @bottom_right;
|
||||
border-bottom-right-radius: @bottom_right;
|
||||
}
|
||||
|
||||
.border-radius(@top, @bottom) {
|
||||
.border-radius(@top, @top, @bottom, @bottom);
|
||||
}
|
||||
|
||||
.border-radius(@radius) {
|
||||
.border-radius(@radius, @radius);
|
||||
}
|
||||
32
static/suit/less/print.less
Normal file
32
static/suit/less/print.less
Normal file
@@ -0,0 +1,32 @@
|
||||
/* Print styles */
|
||||
@media print {
|
||||
html, body {
|
||||
-webkit-print-color-adjust: exact;
|
||||
}
|
||||
a[href]:after { content: "" !important; }
|
||||
|
||||
select {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
#header, .left-column, #footer, #push, #suit-left, .actions,
|
||||
.inner-right-column, .add-row {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#wrap, body {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.suit-columns {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.two-columns .center-column {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.inner-two-columns .inner-center-column {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
37
static/suit/less/sticky-footer.less
Normal file
37
static/suit/less/sticky-footer.less
Normal file
@@ -0,0 +1,37 @@
|
||||
/* Sticky footer styles
|
||||
-------------------------------------------------- */
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
/* The html and body elements cannot have any padding or margin. */
|
||||
}
|
||||
|
||||
/* Wrapper for page content to push down footer */
|
||||
#wrap {
|
||||
min-height: 100%;
|
||||
height: auto !important;
|
||||
height: 100%;
|
||||
/* Negative indent footer by it's height */
|
||||
margin: 0 auto -60px;
|
||||
}
|
||||
|
||||
/* Set the fixed height of the footer here */
|
||||
#push,
|
||||
#footer {
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
#footer {
|
||||
// background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
/* Lastly, apply responsive CSS fixes as necessary */
|
||||
@media (max-width: 767px) {
|
||||
#footer {
|
||||
margin-left: -20px;
|
||||
margin-right: -20px;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
}
|
||||
206
static/suit/less/suit.less
Normal file
206
static/suit/less/suit.less
Normal file
@@ -0,0 +1,206 @@
|
||||
/*!
|
||||
* DjangoSuit
|
||||
* http://djangosuit.com
|
||||
*
|
||||
* Copyright 2013 DjangoSuit.com
|
||||
* Licensed under the Creative Commons Attribution-NonCommercial 3.0
|
||||
* http://creativecommons.org/licenses/by-nc/3.0/
|
||||
*
|
||||
*/
|
||||
@import 'variables';
|
||||
@import 'sticky-footer';
|
||||
@import 'mixins';
|
||||
@import 'header';
|
||||
@import 'footer';
|
||||
@import 'left-column';
|
||||
@import 'ui/breadcrumb';
|
||||
@import 'ui/table';
|
||||
@import 'ui/actionlist';
|
||||
@import 'ui/list';
|
||||
@import 'ui/pagination';
|
||||
@import 'ui/form';
|
||||
@import 'ui/box';
|
||||
@import 'ui/login';
|
||||
@import 'ui/left-nav';
|
||||
@import 'ui/calendar';
|
||||
@import 'ui/datepicker';
|
||||
@import 'ui/tabs';
|
||||
|
||||
body {
|
||||
background-color: @bgcolor;
|
||||
min-width: 960px;
|
||||
&.popup {
|
||||
min-width: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
#wrap {
|
||||
background: url(../img/bg_left_white.gif) top left repeat-y;
|
||||
.popup & {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a.icon {
|
||||
i {
|
||||
margin-right: 5px;
|
||||
}
|
||||
margin-right: 10px;
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
a.btn {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// White shadow
|
||||
#content {
|
||||
h1, h2, h3, h4, alert {
|
||||
.white-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
// todo refactor this class to some h5 or h6 tag
|
||||
.italic-title { // font-style: italic;
|
||||
font-size: 17px;
|
||||
font-weight: normal;
|
||||
margin: 0 0 5px 5px;
|
||||
}
|
||||
|
||||
.inner-two-columns {
|
||||
.inner-right-column {
|
||||
float: right;
|
||||
width: @right-column-width;
|
||||
&.fixed {
|
||||
position: fixed;
|
||||
right: 20px;
|
||||
top: 10px;
|
||||
}
|
||||
}
|
||||
.inner-center-column {
|
||||
margin-right: (@right-column-width + 20px);
|
||||
.tab-content {
|
||||
overflow: inherit;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon-alpha5 {
|
||||
opacity: 0.5;
|
||||
}
|
||||
.icon-alpha75 {
|
||||
opacity: 0.75;
|
||||
}
|
||||
a:hover .icon-alpha5, a:hover .icon-alpha75 {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.input-icon {
|
||||
position: relative;
|
||||
opacity: 0.2;
|
||||
margin-top: 2px;
|
||||
margin-left: -25px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.dashboard {
|
||||
#content {
|
||||
#content-main {
|
||||
float: left;
|
||||
}
|
||||
#content-related {
|
||||
margin-left: 20px;
|
||||
float: left;
|
||||
.actionlist {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.colM {
|
||||
h1 {
|
||||
font-size: 20px;
|
||||
margin: 0 0 30px 5px;
|
||||
}
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
.white-shadow;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
margin: 0 0 0 10px;
|
||||
}
|
||||
|
||||
a.append-icon i {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
// Hide content-title from regular lists and forms
|
||||
.content-title {
|
||||
display: none;
|
||||
}
|
||||
.popup .content-title {
|
||||
display: block;
|
||||
margin: 0 0 10px 10px;
|
||||
}
|
||||
|
||||
.errorlist {
|
||||
color: @red;
|
||||
}
|
||||
|
||||
/* Column layout */
|
||||
@cc-padding: (@padding * 2);
|
||||
.suit-columns {
|
||||
padding-left: @left-column-width; /* LC fullwidth */
|
||||
.suit-column {
|
||||
position: relative;
|
||||
float: left;
|
||||
}
|
||||
.popup & {
|
||||
padding: 0;
|
||||
}
|
||||
padding-right: @cc-padding; /* RC fullwidth + CC padding */
|
||||
&.three-columns {
|
||||
|
||||
}
|
||||
}
|
||||
#suit-center {
|
||||
padding: @padding; /* CC padding */
|
||||
width: 100%;
|
||||
.popup & {
|
||||
width: 94.9%;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
#suit-left {
|
||||
width: @left-column-width; /* LC width */
|
||||
right: (@left-column-width + @cc-padding); /* LC fullwidth + CC padding */
|
||||
margin-left: -100%;
|
||||
}
|
||||
#suit-right {
|
||||
width: 130px; /* RC width */
|
||||
padding: 0 10px; /* RC padding */
|
||||
margin-right: -190px; /* RC fullwidth + CC padding */
|
||||
}
|
||||
|
||||
#push {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
@import 'print';
|
||||
38
static/suit/less/ui/actionlist.less
Normal file
38
static/suit/less/ui/actionlist.less
Normal file
@@ -0,0 +1,38 @@
|
||||
.actionlist {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
.border-radius(@border-radius);
|
||||
.grey-box-shadow;
|
||||
background: white;
|
||||
min-width: 200px;
|
||||
li {
|
||||
font-size: 11px;
|
||||
list-style: none;
|
||||
border-bottom: 1px solid lighten(@border-color-light, 3%);
|
||||
padding: 3px 10px;
|
||||
&:nth-child(2n) {
|
||||
background-color: @bgcolor-light;
|
||||
}
|
||||
&:first-child {
|
||||
padding-top: 5px;
|
||||
}
|
||||
&:last-child {
|
||||
padding-bottom: 5px;
|
||||
border: 0;
|
||||
.border-radius(null, null, @border-radius, @border-radius)
|
||||
}
|
||||
i {
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
}
|
||||
&.deletelink {
|
||||
.color-grey;
|
||||
}
|
||||
.deleted-entry {
|
||||
color: @text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.applist td:last-child {
|
||||
min-width: 40px;
|
||||
}
|
||||
70
static/suit/less/ui/box.less
Normal file
70
static/suit/less/ui/box.less
Normal file
@@ -0,0 +1,70 @@
|
||||
.box, .well {
|
||||
.grey-box-shadow;
|
||||
.border-radius(@border-radius);
|
||||
background: @bgcolor-light;
|
||||
padding: 10px 12px;
|
||||
border: 0;
|
||||
}
|
||||
.menu-box {
|
||||
margin: 0 0 10px 0;
|
||||
padding: 5px 0;
|
||||
background-color: white;
|
||||
li {
|
||||
list-style: none;
|
||||
line-height: 18px;
|
||||
a {
|
||||
text-decoration: none;
|
||||
line-height: 18px;
|
||||
display: block;
|
||||
padding: 5px 10px 5px 13px;
|
||||
color: #666;
|
||||
border-bottom: 1px solid #ededed;
|
||||
&:hover {
|
||||
background-color: @bgcolor-light;
|
||||
&:first-child {
|
||||
.border-radius(@border-radius, @border-radius, null, null)
|
||||
}
|
||||
&:last-child {
|
||||
.border-radius(null, null, @border-radius, @border-radius)
|
||||
}
|
||||
}
|
||||
i {
|
||||
margin-right: 7px;
|
||||
}
|
||||
}
|
||||
&.active a {
|
||||
.blue-gradient;
|
||||
color: #fff;
|
||||
}
|
||||
&:last-child a {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.menu-box-compact li a {
|
||||
padding-top: 2px;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.save-box {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
padding: 10px;
|
||||
.btn {
|
||||
width: (@right-column-width - 30px);
|
||||
margin-bottom: 10px;
|
||||
&:last-of-type {
|
||||
// margin-bottom: 20px;
|
||||
}
|
||||
&.btn-high {
|
||||
// margin-bottom: 20px;
|
||||
width: (@right-column-width - 30px);
|
||||
min-height: 40px;
|
||||
}
|
||||
}
|
||||
a.text-error:hover {
|
||||
color: white;
|
||||
background-color: @red;
|
||||
}
|
||||
}
|
||||
54
static/suit/less/ui/breadcrumb.less
Normal file
54
static/suit/less/ui/breadcrumb.less
Normal file
@@ -0,0 +1,54 @@
|
||||
/* Django admin original class - support for Admin original html structure */
|
||||
.breadcrumbs {
|
||||
font-size: 14px;
|
||||
padding: 8px 15px 8px 10px;
|
||||
margin: -5px 0 15px;
|
||||
background-color: #f5f5f5;
|
||||
.border-radius(4px);
|
||||
.white-shadow;
|
||||
color: #666;
|
||||
&>a {
|
||||
display: inline-block;
|
||||
padding: 0 3px;
|
||||
text-shadow: 0 1px 0 #ffffff;
|
||||
font-weight: normal;
|
||||
&>.divider {
|
||||
padding: 0 5px;
|
||||
color: #ccc;
|
||||
}
|
||||
&>.active {
|
||||
font-weight: bold;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumbs > a > .divider {
|
||||
}
|
||||
|
||||
.breadcrumbs > .active {
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
/* NEW CLASS based on BS */
|
||||
.breadcrumb {
|
||||
margin: -5px 0 15px;
|
||||
font-size: 14px;
|
||||
.white-shadow;
|
||||
li {
|
||||
a {
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
&.active, &.active a {
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
&.toplinks {
|
||||
font-size: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
172
static/suit/less/ui/calendar.less
Normal file
172
static/suit/less/ui/calendar.less
Normal file
@@ -0,0 +1,172 @@
|
||||
/* CALENDARS & CLOCKS */
|
||||
|
||||
.calendarbox, .clockbox {
|
||||
margin: 5px auto;
|
||||
font-size: 11px;
|
||||
width: 16em;
|
||||
text-align: center;
|
||||
background: white;
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
.greyer-box-shadow;
|
||||
.border-radius(@border-radius);
|
||||
h2, caption {
|
||||
.border-radius(@border-radius, @border-radius, null, null);
|
||||
.vertical-gradient(#f3f3f3, #e5e5e5);
|
||||
.white-inset;
|
||||
.white-shadow;
|
||||
border-bottom: 1px solid #ddd;
|
||||
margin: 0;
|
||||
padding: 3px 15px;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.clockbox {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.calendar {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.calendar table {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-collapse: collapse;
|
||||
background: white;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.calendar th {
|
||||
font-size: 10px;
|
||||
color: #666;
|
||||
padding: 2px 3px;
|
||||
text-align: center;
|
||||
.vertical-gradient(#f3f3f3, #e5e5e5);
|
||||
border-bottom: 1px solid #ddd;
|
||||
.white-shadow;
|
||||
}
|
||||
|
||||
.calendar td {
|
||||
font-size: 11px;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
border-top: 1px solid #eee;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.calendar td.selected a {
|
||||
background: #C9DBED;
|
||||
}
|
||||
|
||||
.calendar td.nonday {
|
||||
background: #efefef;
|
||||
}
|
||||
|
||||
.calendar td.today a {
|
||||
background: #ffffaa;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.calendar td a, .timelist a {
|
||||
display: block;
|
||||
padding: 2px 4px;
|
||||
text-decoration: none;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.calendar td a:hover, .timelist a:hover {
|
||||
.vertical-gradient(#83b3c3, #5295b0);
|
||||
text-shadow: 0 1px #4f7f92;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.calendar td a:active, .timelist a:active {
|
||||
background: #5295b0;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.calendarnav {
|
||||
font-size: 10px;
|
||||
text-align: center;
|
||||
color: #ccc;
|
||||
margin: 0;
|
||||
padding: 1px 3px;
|
||||
}
|
||||
|
||||
.calendarnav a:link, #calendarnav a:visited, #calendarnav a:hover {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.calendar-shortcuts {
|
||||
background: white;
|
||||
font-size: 11px;
|
||||
line-height: 11px;
|
||||
border-top: 1px solid #eee;
|
||||
padding: 3px 0 4px;
|
||||
color: #ccc;
|
||||
a {
|
||||
display: inline-block;
|
||||
padding: 2px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.calendarbox .calendarnav-previous, .calendarbox .calendarnav-next {
|
||||
display: block;
|
||||
position: absolute;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
text-decoration: none;
|
||||
padding: 3px 8px 4px;
|
||||
.vertical-gradient(#83b3c3, #5295b0);
|
||||
text-shadow: 0 1px #4f7f92;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.calendarnav-previous:hover, .calendarnav-next:hover {
|
||||
background: #5295b0;
|
||||
}
|
||||
|
||||
.calendarnav-previous {
|
||||
top: 0;
|
||||
left: 0;
|
||||
.border-radius(@border-radius, 0, 0, 0);
|
||||
}
|
||||
|
||||
.calendarnav-next {
|
||||
top: 0;
|
||||
right: 0;
|
||||
.border-radius(0, @border-radius, 0, 0);
|
||||
}
|
||||
|
||||
.calendar-cancel {
|
||||
margin: 0 !important;
|
||||
padding: 2px 0 !important;
|
||||
font-size: 11px;
|
||||
.vertical-gradient(#efefef, #e2e2e2);
|
||||
.white-shadow;
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.calendar-cancel:hover {
|
||||
// background: #e1e1e1 url(../img/nav-bg-reverse.gif) 0 50% repeat-x;
|
||||
}
|
||||
|
||||
.calendar-cancel a {
|
||||
color: black;
|
||||
display: block;
|
||||
}
|
||||
|
||||
ul.timelist, .timelist li {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.timelist a {
|
||||
padding: 2px;
|
||||
}
|
||||
17
static/suit/less/ui/datepicker.less
Normal file
17
static/suit/less/ui/datepicker.less
Normal file
@@ -0,0 +1,17 @@
|
||||
.datepicker {
|
||||
div & {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
th, td {
|
||||
height: 16px !important;
|
||||
}
|
||||
input.input-small {
|
||||
width: 70px;
|
||||
}
|
||||
}
|
||||
.input-append.date .add-on i, .input-prepend.date .add-on i {
|
||||
width: 14px !important;
|
||||
height: 14px !important;
|
||||
display: inline-block !important;
|
||||
}
|
||||
704
static/suit/less/ui/form.less
Normal file
704
static/suit/less/ui/form.less
Normal file
@@ -0,0 +1,704 @@
|
||||
h2.legend, .form-horizontal fieldset .legend {
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
line-height: 36px;
|
||||
.white-shadow;
|
||||
padding-left: 10px;
|
||||
}
|
||||
.form-horizontal {
|
||||
fieldset {
|
||||
display: table;
|
||||
width: 100%;
|
||||
margin-top: 35px;
|
||||
position: relative;
|
||||
.grey-box-shadow;
|
||||
.border-radius(@border-radius); // margin-bottom: 35px;
|
||||
&.first, .popup &:first-of-type {
|
||||
margin-top: 0;
|
||||
}
|
||||
&.first:not(:first-of-type) {
|
||||
margin-top: 5px;
|
||||
}
|
||||
.legend {
|
||||
border: 0;
|
||||
margin: -30px 0 0 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 98%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
margin-right: (@right-column-width + (@padding * 2));
|
||||
.description {
|
||||
font-weight: normal;
|
||||
font-size: 12px;
|
||||
display: inline-block;
|
||||
margin-left: 20px;
|
||||
.color-grey;
|
||||
}
|
||||
}
|
||||
|
||||
/* BS collapse override */
|
||||
&.collapse {
|
||||
overflow: visible;
|
||||
height: auto;
|
||||
}
|
||||
/* Position attr change for collapsed */
|
||||
&.collapsed {
|
||||
background-color: @bgcolor-light;
|
||||
.legend {
|
||||
position: static;
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
&.full-width {
|
||||
box-shadow: none;
|
||||
.control-group {
|
||||
.border-radius(0);
|
||||
width: 100%;
|
||||
display: block;
|
||||
> div {
|
||||
display: block;
|
||||
}
|
||||
.control-label {
|
||||
display: none;
|
||||
width: 0;
|
||||
}
|
||||
.controls {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
.border-radius(@border-radius);
|
||||
.html-widget {
|
||||
display: inline-block;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
&.wide .control-label {
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
/* COLLAPSE LOGIC */
|
||||
&.collapsed * {
|
||||
display: none;
|
||||
}
|
||||
&.collapsed .legend, &.collapsed .legend *, &.collapsed {
|
||||
display: block !important;
|
||||
}
|
||||
&.collapsed .collapse-toggle {
|
||||
background: transparent;
|
||||
display: inline !important;
|
||||
}
|
||||
}
|
||||
.submit-row-bottom {
|
||||
margin: 20px 0 0 200px;
|
||||
}
|
||||
.control-group {
|
||||
display: table-header-group;
|
||||
margin: 0;
|
||||
> div {
|
||||
display: table-row;
|
||||
width: 100%;
|
||||
}
|
||||
.control-label {
|
||||
background: white;
|
||||
display: table-cell;
|
||||
min-width: 150px;
|
||||
float: none;
|
||||
padding: 10px 20px 5px 10px;
|
||||
border-bottom: 1px solid @border-color-light;
|
||||
width: auto;
|
||||
label {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.controls {
|
||||
display: table-cell;
|
||||
vertical-align: top;
|
||||
float: none;
|
||||
background-color: @bgcolor-light;
|
||||
border-left: 1px solid #ecedee;
|
||||
padding: 5px 15px;
|
||||
width: 100%;
|
||||
line-height: 26px;
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.readonly {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child, &:first-of-type {
|
||||
.control-label {
|
||||
padding-top: 15px;
|
||||
.border-radius(@border-radius, null, null, null);
|
||||
}
|
||||
.controls {
|
||||
padding-top: 10px;
|
||||
.border-radius(null, @border-radius, null, null);
|
||||
}
|
||||
}
|
||||
&:last-child, &:last-of-type {
|
||||
.control-label {
|
||||
padding-bottom: 10px;
|
||||
border: 0;
|
||||
.border-radius(null, null, null, @border-radius);
|
||||
}
|
||||
.controls {
|
||||
padding-bottom: 10px;
|
||||
.border-radius(null, null, @border-radius, null);
|
||||
}
|
||||
}
|
||||
|
||||
/* Some BS form global overrides */
|
||||
.help-block, .help-inline {
|
||||
font-size: 11px;
|
||||
color: #999;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.help-inline ul, .radiolist {
|
||||
margin: 0;
|
||||
li {
|
||||
list-style: none;
|
||||
padding: 0 10px 0 0;
|
||||
}
|
||||
}
|
||||
.help-icon {
|
||||
margin: 1px 0 0 5px;
|
||||
}
|
||||
|
||||
/* Inline forms fields */
|
||||
.field-box .controls {
|
||||
label {
|
||||
float: left;
|
||||
display: inline-block;
|
||||
margin: 5px 10px 0 0;
|
||||
&.required {
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
.multi-field-box {
|
||||
margin-top: 5px;
|
||||
float: left;
|
||||
margin-right: 15px;
|
||||
.multi-field-controls {
|
||||
float: left;
|
||||
}
|
||||
.help-block {
|
||||
display: block;
|
||||
margin: 3px 0 0 5px;
|
||||
}
|
||||
}
|
||||
.error {
|
||||
.control-label, .help-block, .help-inline, .help-inline ul li, &.multi-field-box label {
|
||||
color: @red;
|
||||
}
|
||||
input, select, textarea {
|
||||
border-color: @red;
|
||||
color: @red;
|
||||
}
|
||||
}
|
||||
&:not(:first-child) {
|
||||
.control-label {
|
||||
width: auto;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.controls {
|
||||
float: left;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.first-error .control-label {
|
||||
color: @red;
|
||||
}
|
||||
&.multi-field-row {
|
||||
.controls {
|
||||
padding-top: 0px;
|
||||
}
|
||||
&:first-child, &:first-of-type {
|
||||
.controls {
|
||||
padding-top: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.popup {
|
||||
.form-horizontal {
|
||||
}
|
||||
.one-column {
|
||||
padding-top: 10px;
|
||||
}
|
||||
}
|
||||
.control-group, .inline-group {
|
||||
// Django < 1.8
|
||||
.add-another {
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
padding: 0 0 0 8px;
|
||||
}
|
||||
// Django 1.8+
|
||||
.related-widget-wrapper-link.change-related {
|
||||
&, &:hover {
|
||||
opacity: .2;
|
||||
}
|
||||
&:link {
|
||||
opacity: .6;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.add-related, .related-lookup, .change-related {
|
||||
.bs-icon;
|
||||
display: inline-block;
|
||||
padding: 4px;
|
||||
border: 1px solid transparent;
|
||||
padding-left: 6px;
|
||||
vertical-align: middle;
|
||||
img {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.add-related {
|
||||
background-position: 1px -92px;
|
||||
}
|
||||
.related-lookup {
|
||||
background-position: -42px 4px;
|
||||
}
|
||||
.change-related {
|
||||
background-position: 7px -68px;
|
||||
}
|
||||
.vForeignKeyRawIdAdminField {
|
||||
width: 90px;
|
||||
}
|
||||
}
|
||||
.alert {
|
||||
> ul {
|
||||
margin-top: 10px;
|
||||
ul {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* Stacked & Tabular */
|
||||
.empty-form, tr.empty-form {
|
||||
display: none;
|
||||
}
|
||||
h3 {
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
line-height: 36px;
|
||||
.white-shadow;
|
||||
padding-left: 10px;
|
||||
margin: 0;
|
||||
}
|
||||
/* STACKED */
|
||||
.form-horizontal {
|
||||
.inline-group {
|
||||
& > h2 {
|
||||
margin-top: 11px;
|
||||
}
|
||||
fieldset:first-of-type {
|
||||
margin: 0px;
|
||||
}
|
||||
.inline-related {
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.add-row {
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
padding: 6px 0 4px 15px;
|
||||
margin: -1px -1px 0 -1px;
|
||||
.white-inset;
|
||||
.vertical-gradient(#efefef, #e2e2e2);
|
||||
.border-radius(0, 0, @border-radius, @border-radius);
|
||||
border: 1px solid #ddd;
|
||||
a {
|
||||
.white-shadow;
|
||||
}
|
||||
}
|
||||
}
|
||||
.inline-related {
|
||||
fieldset {
|
||||
.border-radius(0, 0, null, null);
|
||||
margin: 40px 0 0 0; // Remove rounded corners for first fieldset
|
||||
// First inline fieldset will always have grey header row
|
||||
&:first-of-type {
|
||||
.control-group {
|
||||
&:first-child, &:first-of-type {
|
||||
.border-radius(0);
|
||||
.control-label {
|
||||
.border-radius(0, null, null, null);
|
||||
}
|
||||
.controls {
|
||||
.border-radius(null, 0, null, null);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.first {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
h3 {
|
||||
font-size: 12px;
|
||||
overflow: auto;
|
||||
.grey-box-shadow;
|
||||
line-height: 34px;
|
||||
.vertical-gradient(#f3f3f3, #e5e5e5);
|
||||
.border-radius(@border-radius, @border-radius, 0, 0);
|
||||
b {
|
||||
display: inline-block;
|
||||
min-width: 180px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
span {
|
||||
display: inline-block; // margin-left: 20px;
|
||||
&.delete, &:last-child {
|
||||
float: right;
|
||||
margin-right: 10px;
|
||||
font-weight: normal;
|
||||
}
|
||||
&.delete {
|
||||
input {
|
||||
margin: 0;
|
||||
}
|
||||
label {
|
||||
padding: 7px 0 0 5px;
|
||||
vertical-align: middle;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:not(:first-of-type) {
|
||||
h3 {
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
&.tabular {
|
||||
margin-top: 15px;
|
||||
fieldset {
|
||||
.box-shadow(none);
|
||||
& > h2 {
|
||||
margin-top: -4px;
|
||||
}
|
||||
}
|
||||
table {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
table td .errorlist {
|
||||
margin-bottom: 5px;
|
||||
font-size: 11px;
|
||||
}
|
||||
table td.control-group {
|
||||
display: table-cell;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.form-horizontal .control-group .controls .selector {
|
||||
overflow: auto;
|
||||
.selector-available, .selector-chooser, .selector-chosen {
|
||||
float: left;
|
||||
h2 {
|
||||
margin-left: 5px;
|
||||
font-size: 12px;
|
||||
}
|
||||
> a {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
&.stacked {
|
||||
// Filter vertical
|
||||
.selector-available, .selector-chosen {
|
||||
width: 100%;
|
||||
min-width: 150px;
|
||||
max-width: 100%;
|
||||
select, input {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
.selector-available, .selector-chosen {
|
||||
width: 45%;
|
||||
min-width: 150px;
|
||||
max-width: 300px;
|
||||
select, input {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.selector-chooser {
|
||||
list-style: none;
|
||||
margin: 70px 10px 0 10px;
|
||||
li {
|
||||
a {
|
||||
.bs-icon;
|
||||
display: block;
|
||||
padding: 4px;
|
||||
border: 1px solid transparent;
|
||||
background-position: -236px -92px;
|
||||
&:hover {
|
||||
background-color: white;
|
||||
.border-radius(@border-radius);
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
}
|
||||
&:first-child {
|
||||
a {
|
||||
background-position: -260px -92px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.stacked {
|
||||
// Filter vertical
|
||||
.selector-chooser {
|
||||
list-style: none;
|
||||
margin: 5px 0 0 0;
|
||||
width: 100%;
|
||||
li {
|
||||
display: inline-block;
|
||||
a {
|
||||
background-position: -284px -92px;
|
||||
}
|
||||
&:first-child {
|
||||
a {
|
||||
background-position: -308px -92px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.selector-available, .selector-chosen {
|
||||
a:not(.active) {
|
||||
.color-grey;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
.selector-available select {
|
||||
.border-radius(0, 0, null, null);
|
||||
}
|
||||
.selector-filter {
|
||||
margin-right: 14px;
|
||||
position: relative;
|
||||
margin-bottom: -1px;
|
||||
input {
|
||||
.border-radius(null, null, 0, 0);
|
||||
}
|
||||
label {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 4px;
|
||||
margin-right: -10px;
|
||||
opacity: .2;
|
||||
}
|
||||
}
|
||||
}
|
||||
.controls {
|
||||
/* Special styles for django auth app */
|
||||
#id_groups_from { min-height: 80px }
|
||||
#id_user_permissions_from { min-height: 184px }
|
||||
|
||||
/* File upload styles */
|
||||
.file-upload {
|
||||
.clearable-file-input {
|
||||
display: inline-block;
|
||||
margin: 0 0 0 30px;
|
||||
input {
|
||||
margin: 5px 7px 0 0;
|
||||
vertical-align: middle;
|
||||
float: left;
|
||||
}
|
||||
label {
|
||||
font-size: 11px;
|
||||
margin-top: 2px;
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
color: @grey;
|
||||
&:hover {
|
||||
color: @red;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/* SELECT2 OVERRIDE */
|
||||
.select2-container-multi .select2-choices {
|
||||
.border-radius(4px);
|
||||
}
|
||||
/* Set close on right size */
|
||||
.select2-container-multi .select2-choices .select2-search-choice {
|
||||
padding: 3px 20px 3px 5px !important;
|
||||
line-height: normal;
|
||||
}
|
||||
.select2-container-multi .select2-search-choice-close {
|
||||
top: 3px;
|
||||
left: auto !important;
|
||||
}
|
||||
.select2-search-choice .s2-size {
|
||||
float: right;
|
||||
}
|
||||
.select2-search-choice .s2-size em {
|
||||
font-style: normal;
|
||||
color: grey;
|
||||
font-size: 9px;
|
||||
text-shadow: 0 1px 0 #fff;
|
||||
}
|
||||
.datetimeshortcuts {
|
||||
font-size: 11px;
|
||||
margin-left: 5px;
|
||||
vertical-align: middle;
|
||||
color: transparent;
|
||||
a:first-child {
|
||||
margin-right: 4px;
|
||||
}
|
||||
a:last-child {
|
||||
margin-left: -6px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
// Original date widgets for Django 1.9+
|
||||
.datetime > div:not(.input-append) .datetimeshortcuts,
|
||||
.controls > .datetimeshortcuts,
|
||||
.controls > .datetime > .datetimeshortcuts {
|
||||
.date-icon, .clock-icon {
|
||||
.bs-icon;
|
||||
background-color: @bgcolor-light;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.date-icon {
|
||||
background-position: -192px -120px;
|
||||
}
|
||||
.clock-icon {
|
||||
.bs-icon;
|
||||
background-position: -48px -24px;
|
||||
}
|
||||
}
|
||||
/* Fix original date/time fields */
|
||||
.vDateField, .vTimeField {
|
||||
width: auto;
|
||||
vertical-align: top;
|
||||
}
|
||||
/* DATETIME IMPROVEMENTS */
|
||||
@date-input-width: 80px;
|
||||
@time-input-width: 60px;
|
||||
@date-icon-offset: 20px;
|
||||
@date-input-offset: 14px;
|
||||
.suit-date {
|
||||
position: relative;
|
||||
.datetimeshortcuts {
|
||||
margin-left: 32px;
|
||||
color: #f6f7f8;
|
||||
a:last-child {
|
||||
padding: 0 5px;
|
||||
position: absolute;
|
||||
left: (@date-input-width + @date-icon-offset);
|
||||
z-index: 2;
|
||||
img {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
// Original date widgets for Django 1.9+
|
||||
.date-icon, .clock-icon {
|
||||
display: inline-block;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
margin: 1px 0 0 -5px;
|
||||
}
|
||||
}
|
||||
input {
|
||||
vertical-align: middle;
|
||||
&.vDateField {
|
||||
width: @date-input-width;
|
||||
}
|
||||
&.vTimeField {
|
||||
width: @time-input-width;
|
||||
}
|
||||
}
|
||||
.add-on {
|
||||
position: absolute;
|
||||
left: (@date-input-width + @date-input-offset);
|
||||
}
|
||||
|
||||
&.suit-time {
|
||||
.add-on {
|
||||
left: (@time-input-width + @date-input-offset);
|
||||
}
|
||||
.datetimeshortcuts {
|
||||
a:last-child {
|
||||
position: absolute;
|
||||
left: (@time-input-width + @date-icon-offset);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.autosize {
|
||||
max-height: 150px;
|
||||
}
|
||||
.legend, h2 {
|
||||
.description {
|
||||
font-weight: normal;
|
||||
font-size: 12px;
|
||||
display: inline-block;
|
||||
margin-left: 20px;
|
||||
line-height: normal;
|
||||
.color-grey;
|
||||
}
|
||||
}
|
||||
/* Legend/H2 for suit_form_includes */
|
||||
.form-horizontal .suit-tab {
|
||||
visibility: hidden;
|
||||
&.show {
|
||||
visibility: inherit;
|
||||
}
|
||||
&.collapsed.hide {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
.suit-tab, .form-horizontal .suit-include {
|
||||
> h2 {
|
||||
margin-top: -10px;
|
||||
margin-bottom: -6px;
|
||||
line-height: 36px;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
.linked-select-link {
|
||||
font-size: 11px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
/* StackedInline sortables */
|
||||
.stacked-inline-sortable {
|
||||
float: right;
|
||||
:first-child {
|
||||
padding-right: 1px;
|
||||
}
|
||||
&:nth-last-child(2) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
.inline-group > div:first-of-type .stacked-inline-sortable .sortable-up,
|
||||
.inline-group > div:nth-last-child(3) .stacked-inline-sortable .sortable-down {
|
||||
opacity: .15 !important;
|
||||
cursor: default;
|
||||
}
|
||||
140
static/suit/less/ui/left-nav.less
Normal file
140
static/suit/less/ui/left-nav.less
Normal file
@@ -0,0 +1,140 @@
|
||||
.left-nav {
|
||||
margin-top: 10px;
|
||||
&>ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 5px 0;
|
||||
&>li {
|
||||
&>a {
|
||||
border-bottom: 1px solid #ededed;
|
||||
display: block;
|
||||
padding: 5px 10px 5px 13px;
|
||||
color: #666;
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
i {
|
||||
margin-right: 10px;
|
||||
opacity: .8;
|
||||
}
|
||||
em {
|
||||
float: right;
|
||||
font-style: normal;
|
||||
font-size: 11px;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
&:last-child > a {
|
||||
border: 0;
|
||||
}
|
||||
&.active {
|
||||
&>a {
|
||||
color: #fff;
|
||||
text-shadow: 0 1px #4f7f92;
|
||||
.vertical-gradient(#83b3c3, #5295b0);
|
||||
border-bottom-color: #ccc;
|
||||
i {
|
||||
background-image: url(../img/glyphicons-halflings-white-shadow.png);
|
||||
opacity: 1;
|
||||
}
|
||||
&:after {
|
||||
content: url('../img/cc_active_nav.png');
|
||||
display: inline-block;
|
||||
margin-right: -21px;
|
||||
float: right;
|
||||
margin-top: -5px;
|
||||
}
|
||||
}
|
||||
ul {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
&.separator, &.separator:hover {
|
||||
background: #f0f0f0 !important;
|
||||
height: 7px;
|
||||
display: block;
|
||||
}
|
||||
ul {
|
||||
display: none;
|
||||
border-bottom: 1px solid #ededed;
|
||||
background-color: #f6f7f8;
|
||||
margin: -1px 0 0 0;
|
||||
padding: 7px 0 7px 0;
|
||||
.box-shadow(inset 0px 3px 3px -2px rgba(0, 0, 0, 0.2));
|
||||
list-style: none;
|
||||
li {
|
||||
a {
|
||||
display: block;
|
||||
padding: 3px 0 4px 27px;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
background-color: #f1f1f1;
|
||||
.white-shadow-max;
|
||||
}
|
||||
&.add { // margin-bottom: 5px;
|
||||
padding: 4px 0 4px 13px;
|
||||
i {
|
||||
margin-right: 5px;
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
i {
|
||||
margin-left: -20px;
|
||||
margin-right: 5px;
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
&.active a { // background-color: white;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:not(.active):hover {
|
||||
background: #f5f5f5;
|
||||
>ul {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 180px;
|
||||
padding: 0;
|
||||
margin-top: -30px;
|
||||
margin-right: -250px; // offset out of left column
|
||||
.border-radius(@border-radius);
|
||||
.box-shadow(none);
|
||||
.greyer-box-shadow;
|
||||
z-index: 10;
|
||||
> li {
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
border-top: 1px solid white;
|
||||
background-color: transparent;
|
||||
a {
|
||||
padding: 3px 25px 3px 15px;
|
||||
&:hover { // background-color: transparent;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
border-bottom: 1px solid #f1f1f1;
|
||||
border-top: 1px solid #f1f1f1;
|
||||
}
|
||||
&:first-child {
|
||||
border-top: 0;
|
||||
a {
|
||||
.border-radius(@border-radius, @border-radius, null, null);
|
||||
padding-top: 4px;
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
a {
|
||||
.border-radius(null, null, @border-radius, @border-radius);
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
66
static/suit/less/ui/list.less
Normal file
66
static/suit/less/ui/list.less
Normal file
@@ -0,0 +1,66 @@
|
||||
.object-tools {
|
||||
float: right;
|
||||
margin-bottom: 10px;
|
||||
.btn {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.actions {
|
||||
margin-bottom: 5px;
|
||||
label {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
.below-actions .changelist-save {
|
||||
margin-top: -43px;
|
||||
}
|
||||
|
||||
/* CHANGELISTS */
|
||||
|
||||
.change-list .hiddenfields {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ACTIONS */
|
||||
|
||||
#changelist .actions span.all,
|
||||
#changelist .actions span.action-counter,
|
||||
#changelist .actions span.clear,
|
||||
#changelist .actions span.question {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#changelist #action-toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Decided to hide action label */
|
||||
#changelist .actions span.action-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#toolbar form {
|
||||
margin: 0 0 15px 0;
|
||||
}
|
||||
|
||||
/* Search multi-line wrap top margin */
|
||||
.search-container {
|
||||
margin-top: -5px;
|
||||
input, select {
|
||||
margin-top: 5px;
|
||||
}
|
||||
input[type="radio"], input[type="checkbox"] {
|
||||
margin-top: 3px;
|
||||
}
|
||||
.result-count {
|
||||
display: inline-block;
|
||||
margin: 5px 0 0 5px;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.active {
|
||||
border-color: orange;
|
||||
box-shadow: 0 0 1px 0px orange;
|
||||
}
|
||||
}
|
||||
52
static/suit/less/ui/login.less
Normal file
52
static/suit/less/ui/login.less
Normal file
@@ -0,0 +1,52 @@
|
||||
.login {
|
||||
#wrap {
|
||||
background: none;
|
||||
}
|
||||
#content-main {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
.grey-box-shadow;
|
||||
border-radius: @border-radius;
|
||||
background: white;
|
||||
padding: 0;
|
||||
|
||||
/* Position hor/ver center */
|
||||
position: absolute;
|
||||
width: 340px;
|
||||
// height: 230px;
|
||||
left: 50%;
|
||||
top: 35%;
|
||||
margin-left: -170px; /* Half the width of the DIV tag */
|
||||
margin-top: -100px; /* Half the height of the DIV tag */
|
||||
h1 {
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
.blue-gradient;
|
||||
color: #fff;
|
||||
text-shadow: 0 1px #4f7f92;
|
||||
padding: 0 15px;
|
||||
margin: 0;
|
||||
.border-radius(@border-radius, @border-radius, null, null);
|
||||
i {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
form {
|
||||
margin: 15px 15px 0;
|
||||
input[type=text], input[type=password] {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
.submit-row {
|
||||
background: @bgcolor-light;
|
||||
margin: 10px -15px 0;
|
||||
padding: 10px 15px;
|
||||
border-top: 1px solid #eee;
|
||||
.white-inset;
|
||||
.border-radius(null, null, @border-radius, @border-radius);
|
||||
}
|
||||
.control-group {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
38
static/suit/less/ui/pagination.less
Normal file
38
static/suit/less/ui/pagination.less
Normal file
@@ -0,0 +1,38 @@
|
||||
.pagination-block {
|
||||
margin: 15px 0 15px 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.pagination {
|
||||
padding: 0;
|
||||
margin: 0 20px 0 0;
|
||||
float: left;
|
||||
ul {
|
||||
margin: 0;
|
||||
}
|
||||
ul li.active a, ul li.active span {
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
||||
vertical-align: middle;
|
||||
border: 1px solid #cccccc;
|
||||
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); // -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
// box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
|
||||
.vertical-gradient(#5bc0de, #2f96b4);
|
||||
border-color: #2f96b4 #2f96b4 #1f6377;
|
||||
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
|
||||
filter: progid:dximagetransform.microsoft.gradient(enabled = false);
|
||||
|
||||
}
|
||||
ul li a, ul li span {
|
||||
line-height: 26px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.pagination-info {
|
||||
display: block;
|
||||
float: left;
|
||||
margin: 5px 0 0 0;
|
||||
}
|
||||
341
static/suit/less/ui/table.less
Normal file
341
static/suit/less/ui/table.less
Normal file
@@ -0,0 +1,341 @@
|
||||
.table-overview {
|
||||
border-spacing: 0;
|
||||
margin-bottom: 18px;
|
||||
border-radius: @border-radius;
|
||||
background: #fff;
|
||||
width: auto;
|
||||
.grey-box-shadow;
|
||||
td, th {
|
||||
padding: 8px 20px 8px 15px;
|
||||
font-weight: normal;
|
||||
font-size: 12px;
|
||||
}
|
||||
th:first-child {
|
||||
min-width: 145px;
|
||||
}
|
||||
th {
|
||||
text-align: right;
|
||||
border-right: 1px solid #EDEDED;
|
||||
border-bottom: 1px solid #EDEDED;
|
||||
vertical-align: top;
|
||||
}
|
||||
td {
|
||||
background-color: #F6F7F8;
|
||||
border-bottom: 1px solid #f1f1f1;
|
||||
}
|
||||
tr:last-child {
|
||||
td, th {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
tr:first-child td {
|
||||
border-top-right-radius: @border-radius;
|
||||
}
|
||||
tr:last-child td {
|
||||
border-bottom-right-radius: @border-radius;
|
||||
}
|
||||
tr:first-child th, tr:first-child td {
|
||||
padding-top: 10px;
|
||||
}
|
||||
tr:last-child th, tr:last-child td {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
caption {
|
||||
text-align: left;
|
||||
margin-bottom: 3px;
|
||||
a {
|
||||
.italic-title;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
tr.header-row {
|
||||
&:first-child th {
|
||||
border-top-left-radius: @border-radius;
|
||||
border-top-right-radius: @border-radius;
|
||||
border-top: 0;
|
||||
}
|
||||
th {
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
.grey-gradient;
|
||||
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .3);
|
||||
border-bottom: 1px solid #ddd;
|
||||
border-top: 1px solid #ddd;
|
||||
.white-shadow;
|
||||
padding: 5px 10px;
|
||||
color: @text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table {
|
||||
th, td {
|
||||
background-color: white;
|
||||
.white-inset;
|
||||
.white-shadow;
|
||||
input {
|
||||
margin: 0;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
tr:not(:first-child) {
|
||||
th, td {
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
}
|
||||
thead {
|
||||
line-height: 18px;
|
||||
th, td {
|
||||
padding: 0;
|
||||
padding: 7px 10px 8px;
|
||||
font-weight: bold;
|
||||
.vertical-gradient(#f3f3f3, #e5e5e5);
|
||||
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .3);
|
||||
div {
|
||||
margin: 0;
|
||||
}
|
||||
.text {
|
||||
&>a, &>span {
|
||||
padding: 8px 10px;
|
||||
margin: -6px -10px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
th {
|
||||
vertical-align: middle;
|
||||
line-height: normal;
|
||||
.relative-wrapper {
|
||||
position: relative;
|
||||
display: inline;
|
||||
float: right;
|
||||
width: 55px;
|
||||
}
|
||||
.sortoptions {
|
||||
margin-top: 2px;
|
||||
right: -55px;
|
||||
position: absolute;
|
||||
a, span {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
padding: 0 3px;
|
||||
}
|
||||
.sortpriority {
|
||||
color: #777;
|
||||
padding-right: 4px;
|
||||
}
|
||||
.sortremove, .toggle {
|
||||
display: block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
opacity: .4;
|
||||
background-image: url("../bootstrap/img/glyphicons-halflings.png");
|
||||
background-position: -309px 0;
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
.sortremove {
|
||||
margin-right: 4px;
|
||||
}
|
||||
.toggle {
|
||||
&.ascending {
|
||||
background-position: -310px -119px;
|
||||
}
|
||||
&.descending {
|
||||
background-position: -285px -120px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.sorted {
|
||||
padding-right: 55px;
|
||||
.vertical-gradient(#e7e7e7, #ddd);
|
||||
}
|
||||
}
|
||||
th.action-checkbox-column {
|
||||
width: 33px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.inline-group .tabular {
|
||||
table.table {
|
||||
tr.add-row td { // background-color: #eee;
|
||||
.vertical-gradient(#efefef, #e2e2e2);
|
||||
.white-shadow;
|
||||
padding-left: 10px;
|
||||
}
|
||||
td.delete {
|
||||
text-align: center;
|
||||
width: 40px;
|
||||
}
|
||||
td .help-block {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table .add-row a, .add-row a {
|
||||
font-size: 11px;
|
||||
text-decoration: underline;
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Fix BS row styles for TH cells */
|
||||
@bs-tr-error-color: #f2dede;
|
||||
@bs-tr-warning-color: #fcf8e3;
|
||||
@bs-tr-info-color: #d9edf7;
|
||||
@bs-tr-success-color: #dff0d8;
|
||||
.table tbody {
|
||||
>tr.error, >tr.warning, >tr.info, >tr.success {
|
||||
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .5);
|
||||
}
|
||||
>tr.error {
|
||||
>td, >th {
|
||||
background-color: @bs-tr-error-color;
|
||||
border-top: 1px solid darken(@bs-tr-error-color, 3%);
|
||||
}
|
||||
}
|
||||
>tr.warning {
|
||||
>td, >th {
|
||||
background-color: @bs-tr-warning-color;
|
||||
border-top: 1px solid darken(@bs-tr-warning-color, 8%);
|
||||
}
|
||||
}
|
||||
>tr.info {
|
||||
>td, >th {
|
||||
background-color: @bs-tr-info-color;
|
||||
border-top: 1px solid darken(@bs-tr-info-color, 5%);
|
||||
}
|
||||
}
|
||||
>tr.success {
|
||||
>td, >th {
|
||||
background-color: @bs-tr-success-color;
|
||||
border-top: 1px solid darken(@bs-tr-success-color, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
.table-hover tbody {
|
||||
>tr.error:hover>th {
|
||||
background-color: darken(@bs-tr-error-color, 5%);
|
||||
}
|
||||
>tr.warning:hover>th {
|
||||
background-color: darken(@bs-tr-warning-color, 5%);
|
||||
}
|
||||
>tr.info:hover>th {
|
||||
background-color: darken(@bs-tr-info-color, 5%);
|
||||
}
|
||||
>tr.success:hover>th {
|
||||
background-color: darken(@bs-tr-success-color, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
@tr-selected-color: #FCF8E3;
|
||||
@tr-selected-color: #83B3C3;
|
||||
.table-striped.table-hover tbody {
|
||||
// Striped and selected and hover
|
||||
&>tr.selected:hover {
|
||||
&>td, &>th {
|
||||
background-color: darken(@tr-selected-color, 6%);
|
||||
}
|
||||
}
|
||||
&>tr.selected:hover:nth-child(odd) {
|
||||
&>td, &>th {
|
||||
background-color: darken(@tr-selected-color, 6%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Fix text-alignment classes for tables */
|
||||
.table th, .table td {
|
||||
&.text-left {
|
||||
text-align: left;
|
||||
}
|
||||
&.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
&.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.table-bordered {
|
||||
th:not(:first-child), td:not(:first-child) {
|
||||
border-left: 0;
|
||||
}
|
||||
th:not(:first-child), td:not(:first-child) {
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
.table.table-condensed tbody {
|
||||
th, td {
|
||||
font-weight: normal;
|
||||
padding: 5px 10px 4px 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.table {
|
||||
tbody > tr.selected {
|
||||
&>th, &>td {
|
||||
background-color: @tr-selected-color;
|
||||
border-top: 1px solid darken(@tr-selected-color, 5%);
|
||||
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .2);
|
||||
color: white;
|
||||
text-shadow: none;
|
||||
a {
|
||||
color: white;
|
||||
text-decoration: underline;
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
tbody > tr.selected:nth-child(odd) {
|
||||
&>td, &>th {
|
||||
background-color: lighten(@tr-selected-color, 3%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* TabularInlines Sortables */
|
||||
.inline-sortable {
|
||||
white-space: nowrap;
|
||||
a {
|
||||
display: inline-block;
|
||||
padding: 2px 6px 2px 2px;
|
||||
&:last-child {
|
||||
padding: 0;
|
||||
}
|
||||
&:hover {
|
||||
.icon-alpha5 {
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.selected td {
|
||||
.inline-sortable a i, .inline-sortable a:hover i {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
tr:first-child td .inline-sortable .sortable-up {
|
||||
opacity: .15;
|
||||
cursor: default;
|
||||
}
|
||||
tr.form-row:nth-last-child(3), #result_list tr:last-child {
|
||||
td .inline-sortable .sortable-down {
|
||||
opacity: .15;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
50
static/suit/less/ui/tabs.less
Normal file
50
static/suit/less/ui/tabs.less
Normal file
@@ -0,0 +1,50 @@
|
||||
.nav-tabs-suit {
|
||||
list-style: none;
|
||||
margin: 0px 4px 15px 4px;
|
||||
li {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
vertical-align: bottom;
|
||||
&:first-child {
|
||||
margin-left: 10px;
|
||||
}
|
||||
a {
|
||||
display: inline-block;
|
||||
padding: 8px 20px 7px;
|
||||
.border-radius(@border-radius+1, @border-radius+1, null, null);
|
||||
.white-inset;
|
||||
text-decoration: none;
|
||||
color: #08c;
|
||||
font-size: 13px;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
&.error {
|
||||
color: @red !important;
|
||||
}
|
||||
}
|
||||
a, a:hover {
|
||||
background-color: @bgcolor-light;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
&.active {
|
||||
a {
|
||||
font-weight: bold;
|
||||
color: @text-color;
|
||||
.white-shadow;
|
||||
.box-shadow(none);
|
||||
}
|
||||
a, a:hover {
|
||||
text-decoration: none;
|
||||
background-color: @bgcolor;
|
||||
border-bottom-color: @bgcolor;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:after, &:before {
|
||||
display: inline;
|
||||
content: normal;
|
||||
clear: none;
|
||||
}
|
||||
|
||||
}
|
||||
55
static/suit/less/variables.less
Normal file
55
static/suit/less/variables.less
Normal file
@@ -0,0 +1,55 @@
|
||||
// Layout
|
||||
@bgcolor: #EDEFF1;
|
||||
@footer-bgcolor: #D5D7D8;
|
||||
@bgcolor-light: #F6F7F8;
|
||||
@text-color: #333;
|
||||
|
||||
// Colors
|
||||
@grey: #999;
|
||||
@red: #b94a48;
|
||||
@blue: #08c;
|
||||
|
||||
// Header
|
||||
@header-bgcolor-1: #3f4345;
|
||||
@header-bgcolor-2: #373b3d;
|
||||
@header-height: 45px;
|
||||
|
||||
@left-column-width: 200px;
|
||||
@right-column-width: 180px;
|
||||
@padding: 20px; // Columns padding
|
||||
|
||||
@border-radius: 4px;
|
||||
@border-color: #e7e7e7;
|
||||
@border-color-light: #EDEDED;
|
||||
|
||||
.white-shadow { text-shadow: 0 1px rgba(255, 255, 255, 0.5); }
|
||||
.white-shadow-max { text-shadow: 0 1px rgba(255, 255, 255, 1); }
|
||||
.grey-box-shadow { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.07); }
|
||||
.greyer-box-shadow { box-shadow: 0 0 3px rgba(0, 0, 0, 0.4); }
|
||||
.white-inset { box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 1); }
|
||||
.color-grey { color: @grey; }
|
||||
.inline-block { display: inline-block; }
|
||||
.inline { display: inline; }
|
||||
.f11 { font-size: 11px; }
|
||||
.f12 { font-size: 12px; }
|
||||
.f14 { font-size: 14px; }
|
||||
.blue-gradient { .vertical-gradient(#83b3c3, #5295b0); }
|
||||
.grey-gradient { .vertical-gradient(#f3f3f3, #e5e5e5); }
|
||||
.bold { font-weight: bold }
|
||||
.auto-width { width: auto }
|
||||
.clear { clear: both; }
|
||||
.hide-text { text-indent: 200%; white-space: nowrap; overflow: hidden; }
|
||||
.bs-icon {
|
||||
.hide-text;
|
||||
display: inline-block;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background-image: url("../bootstrap/img/glyphicons-halflings.png");
|
||||
background-position: 0 -96px;
|
||||
background-repeat: no-repeat;
|
||||
opacity: .75;
|
||||
margin: 0;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user