mirror of
https://github.com/Hopiu/wagtail.git
synced 2026-05-12 17:23:15 +00:00
670 lines
No EOL
13 KiB
Text
670 lines
No EOL
13 KiB
Text
form {
|
|
ul, li{
|
|
list-style-type:none;
|
|
}
|
|
ul{
|
|
margin:0;
|
|
padding:0;
|
|
}
|
|
li{
|
|
.row();
|
|
}
|
|
}
|
|
|
|
fieldset{
|
|
border:0;
|
|
padding:0 0 2em 0;
|
|
margin:0;
|
|
/* position:relative; See if we can get away without this */
|
|
}
|
|
|
|
|
|
|
|
legend{
|
|
.visuallyhidden();
|
|
}
|
|
|
|
.fields li{
|
|
padding-top:0.5em;
|
|
padding-bottom:0.5em;
|
|
}
|
|
|
|
.field{
|
|
padding:0 0 0.6em 0;
|
|
}
|
|
|
|
label{
|
|
font-weight:bold;
|
|
color:@color-grey-1;
|
|
font-size:1.1em;
|
|
display:block;
|
|
padding:0 0 0.8em 0;
|
|
line-height:1em;
|
|
|
|
.checkbox &,
|
|
.radio &{
|
|
display:inline;
|
|
}
|
|
}
|
|
|
|
input, textarea, select, .richtext, .tagit{
|
|
.border-radius(6px);
|
|
.border-box();
|
|
font-family:Open Sans,Arial,sans-serif;
|
|
width:100%;
|
|
border:1px dashed @color-input-border;
|
|
padding:1.2em;
|
|
background-color:@color-fieldset-hover;
|
|
-webkit-appearance: none;
|
|
color:@color-text-input;
|
|
font-size:1.2em;
|
|
font-weight:300;
|
|
outline:none;
|
|
|
|
&:hover{
|
|
background-color:white;
|
|
}
|
|
&:focus{
|
|
border-color: darken(@color-input-focus, 40%);
|
|
outline:none;
|
|
background-color:@color-input-focus;
|
|
}
|
|
}
|
|
|
|
input[type=radio],input[type=checkbox]{
|
|
.border-radius(0);
|
|
cursor:pointer;
|
|
float:left;
|
|
border:0;
|
|
}
|
|
|
|
input[type=radio]{
|
|
-webkit-appearance: radio;
|
|
width:auto;
|
|
position:relative;
|
|
margin-right:15px;
|
|
}
|
|
|
|
input[type=radio]:before{
|
|
.border-radius(100%);
|
|
font-family: wagtail;
|
|
font-style: normal;
|
|
text-align:center;
|
|
position:absolute;
|
|
top:-5px;
|
|
left:-2px;
|
|
cursor:pointer;
|
|
display:block;
|
|
content:"K";
|
|
width: 1em;
|
|
line-height: 1.1em;
|
|
padding: 4px;
|
|
background-color: white;
|
|
color:@color-grey-4;
|
|
border: 1px solid @color-grey-4;
|
|
}
|
|
input[type=radio]:checked:before{
|
|
content:"K";
|
|
color:@color-teal;
|
|
}
|
|
|
|
input[type=checkbox]{
|
|
-webkit-appearance: checkbox;
|
|
width:auto;
|
|
position:relative;
|
|
margin-right:15px;
|
|
}
|
|
|
|
input[type=checkbox]:before{
|
|
font-family: wagtail;
|
|
font-style: normal;
|
|
text-align:center;
|
|
position:absolute;
|
|
top:-5px;
|
|
cursor:pointer;
|
|
display:block;
|
|
content:"x";
|
|
line-height:20px;
|
|
width:20px;
|
|
height:20px;
|
|
background-color:white;
|
|
border:1px solid @color-grey-4;
|
|
color:@color-grey-4;
|
|
}
|
|
input[type=checkbox]:checked:before{
|
|
color:@color-teal;
|
|
}
|
|
|
|
/* Core button style */
|
|
input[type=submit], input[type=reset], input[type=button], .button, button{
|
|
.border-radius(3px);
|
|
width:auto;
|
|
padding:0.7em 1em;
|
|
background-color: @color-button;
|
|
border:1px solid @color-button;
|
|
color:white;
|
|
text-decoration:none;
|
|
text-transform:uppercase;
|
|
font-size:0.9em;
|
|
white-space: nowrap;
|
|
position:relative;
|
|
-webkit-font-smoothing: auto;
|
|
vertical-align: middle;
|
|
line-height:1em;
|
|
display:inline-block;
|
|
overflow:hidden;
|
|
position:relative;
|
|
font-weight:normal;
|
|
|
|
&.button-small{
|
|
font-size:0.95em;
|
|
}
|
|
|
|
&.button-secondary{
|
|
border:1px solid @color-button;
|
|
color:@color-button;
|
|
background-color:white;
|
|
}
|
|
|
|
&.icon:before{
|
|
font-size:1.5em;
|
|
}
|
|
|
|
&.icon.text-replace:before{
|
|
font-size:auto;
|
|
}
|
|
|
|
&:hover{
|
|
background-color: @color-button-hover;
|
|
color:white;
|
|
border-color:transparent;
|
|
}
|
|
|
|
&.yes{
|
|
background-color: @color-button-yes;
|
|
|
|
&.button-secondary{
|
|
border:1px solid @color-button-yes;
|
|
color:@color-button-yes;
|
|
background-color:transparent;
|
|
}
|
|
&:hover{
|
|
color:white;
|
|
border-color:transparent;
|
|
background-color: @color-button-yes-hover;
|
|
}
|
|
}
|
|
&.no, &.serious{
|
|
background-color: @color-button-no;
|
|
|
|
&.button-secondary{
|
|
border:1px solid @color-button-no;
|
|
color:@color-button-no;
|
|
background-color:transparent;
|
|
}
|
|
&:hover{
|
|
color:white;
|
|
border-color:transparent;
|
|
background-color: @color-button-no-hover;
|
|
}
|
|
}
|
|
|
|
&.bicolor{
|
|
border:0;
|
|
padding-left:3.5em;
|
|
|
|
&:before{
|
|
font-size:1.2em;
|
|
position:absolute;
|
|
left:0;
|
|
top:0;
|
|
width:2em;
|
|
line-height:2em;
|
|
height:100%;
|
|
text-align:center;
|
|
background-color:rgba(0,0,0,0.2);
|
|
display:block;
|
|
}
|
|
}
|
|
|
|
&.button-small.bicolor{
|
|
padding-left:3.5em;
|
|
|
|
&:before{
|
|
width:2em;
|
|
font-size:1.2em;
|
|
}
|
|
}
|
|
|
|
+ input[type=submit],
|
|
+ input[type=reset],
|
|
+ input[type=button],
|
|
+ .button,
|
|
+ button{
|
|
margin-left:1em;
|
|
}
|
|
}
|
|
|
|
.multiple{
|
|
.transition(max-height 10s ease);
|
|
padding:0;
|
|
max-height:10000px;
|
|
max-width:1024px - 50px;
|
|
overflow:hidden;
|
|
|
|
> li{
|
|
position:relative;
|
|
background-color:white;
|
|
padding:1em 1.5em;
|
|
margin-bottom:1em;
|
|
border:1px solid lighten(@color-grey-4, 3%); /* really trying to avoid creating more greys, but this one is better than grey 4 or 5 */
|
|
.border-radius(2px);
|
|
}
|
|
|
|
&.moving{
|
|
position:relative;
|
|
}
|
|
li.moving{
|
|
position:absolute;
|
|
width:100%;
|
|
}
|
|
|
|
fieldset{
|
|
padding-top:0;
|
|
padding-bottom:0;
|
|
}
|
|
|
|
/* Object controls */
|
|
.controls{
|
|
position:absolute;
|
|
right:1em;
|
|
top:1em;
|
|
color:white;
|
|
overflow:hidden;
|
|
.border-radius(2px);
|
|
|
|
li{
|
|
background-color: @color-grey-2;
|
|
float:left;
|
|
cursor:pointer;
|
|
margin-right:1px;
|
|
|
|
&:last-child{
|
|
margin-right:0;
|
|
}
|
|
}
|
|
|
|
.icon{
|
|
padding:0.3em;
|
|
}
|
|
|
|
.icon:before{
|
|
line-height:2em;
|
|
}
|
|
.icon:hover{
|
|
background-color:@color-teal;
|
|
|
|
&:before{
|
|
color:white;
|
|
}
|
|
}
|
|
.icon-bin:hover{
|
|
background-color:@color-red;
|
|
}
|
|
.disabled{
|
|
display:none;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
/* wrapper around add button for mutliple objects */
|
|
.add{
|
|
font-weight:700;
|
|
cursor:pointer;
|
|
margin-top:0;
|
|
margin-bottom:0;
|
|
padding-top:1em;
|
|
padding-bottom:2em;
|
|
clear:both;
|
|
}
|
|
|
|
/* Other text */
|
|
.help, .error-message{
|
|
font-size:0.85em;
|
|
font-weight:normal;
|
|
margin:0 0 0.5em 0;
|
|
}
|
|
.help{
|
|
color:@color-grey-2;
|
|
opacity:0;
|
|
}
|
|
|
|
/* permanently show checkbox/radio help as they have no focus state */
|
|
.boolean_field .help, .radio .help{
|
|
opacity:1;
|
|
}
|
|
|
|
|
|
fieldset:hover > .help,
|
|
.field.focused + .help,
|
|
.field:focus + .help,
|
|
.field:hover + .help,
|
|
li.focused > .help{
|
|
opacity:1;
|
|
}
|
|
|
|
.required label:after{
|
|
content:"*";
|
|
color:@color-red;
|
|
font-weight:bold;
|
|
display:inline-block;
|
|
margin-left:0.5em;
|
|
line-height:1em;
|
|
font-size:13px;
|
|
}
|
|
|
|
.error-message{
|
|
margin:0;
|
|
color:@color-red;
|
|
clear:both;
|
|
}
|
|
.error input[type=text], .error input[type=email], .error input[type=tel], .error textarea, .error select, .error .tagit{
|
|
border-color:@color-red;
|
|
background-color:@color-input-error-bg;
|
|
}
|
|
|
|
/* field sizing */
|
|
.field{
|
|
&.col1,
|
|
&.col2,
|
|
&.col3,
|
|
&.col4,
|
|
&.col5,
|
|
&.col6,
|
|
&.col7,
|
|
&.col8,
|
|
&.col9,
|
|
&.col10,
|
|
&.col11,
|
|
&.col12{clear:both;}
|
|
}
|
|
|
|
li.inline .field{
|
|
&.col1,
|
|
&.col2,
|
|
&.col3,
|
|
&.col4,
|
|
&.col5,
|
|
&.col6,
|
|
&.col7,
|
|
&.col8,
|
|
&.col9,
|
|
&.col10,
|
|
&.col11,
|
|
&.col12{clear:none;}
|
|
}
|
|
|
|
/* solve gutter issues of inline fields */
|
|
ul.inline li:first-child, li.inline:first-child{
|
|
margin-left:-@grid-gutter-width / 2;
|
|
}
|
|
|
|
|
|
/* TODO this chooser style has been made more generic based on two identical methods for choosing pages and images that were previously included in their own less files in each app directory (and since deleted). It would be best if an admin "theme" provided all the design for a UI in a single place, but should that be a series of overrides to the css provided from an app? If so, perhaps those two previous less files should be re-instated and then overriden here? hmm. */
|
|
|
|
.chooser {
|
|
/* We show the 'chosen' state...*/
|
|
.clearfix();
|
|
|
|
input[type=text]{
|
|
float:left;
|
|
width:50%;
|
|
margin-right:1em;
|
|
}
|
|
.chosen {
|
|
display: block;
|
|
}
|
|
.unchosen, .chosen{
|
|
position:relative;
|
|
|
|
&:before{
|
|
vertical-align:middle;
|
|
font-family:wagtail;
|
|
content:"";
|
|
position:relative;
|
|
display:block;
|
|
float:left;
|
|
color:@color-grey-3;
|
|
line-height:0.85em;
|
|
font-size:2.5em;
|
|
margin-right:0.3em;
|
|
}
|
|
}
|
|
.unchosen {
|
|
display: none;
|
|
}
|
|
|
|
/* ...unless the .page-chooser has the 'blank' class set */
|
|
&.blank {
|
|
.chosen { display: none; }
|
|
.unchosen { display: block; }
|
|
}
|
|
|
|
input[type=button]{
|
|
font-size:0.85em;
|
|
padding:0.5em 0.5em;
|
|
}
|
|
}
|
|
|
|
/* standard way of doing a chooser where the chosen object's title is overlayed */
|
|
.page-chooser,
|
|
.snippet-chooser,
|
|
.document-chooser {
|
|
.chosen{
|
|
.title{
|
|
color: @color-grey-1;
|
|
display:block;
|
|
padding-left:3em;
|
|
}
|
|
.actions{
|
|
clear:both;
|
|
padding-top:0.6em;
|
|
}
|
|
}
|
|
}
|
|
|
|
.page-chooser{
|
|
.unchosen, .chosen{
|
|
&:before{
|
|
content:"b";
|
|
margin-left:-0.1em; /* this glyphs appear to have left padding, counteracted here */
|
|
}
|
|
}
|
|
}
|
|
.snippet-chooser {
|
|
.unchosen, .chosen{
|
|
&:before{
|
|
content:"D";
|
|
}
|
|
}
|
|
}
|
|
|
|
.document-chooser {
|
|
.unchosen, .chosen{
|
|
&:before{
|
|
content:"r";
|
|
}
|
|
}
|
|
}
|
|
|
|
.image-chooser {
|
|
.unchosen, .chosen{
|
|
&:before{
|
|
content:"o";
|
|
}
|
|
}
|
|
.chosen{
|
|
padding-left:@thumbnail-width;
|
|
|
|
&:before{
|
|
content:"";
|
|
}
|
|
.preview-image{
|
|
float:left;
|
|
margin-left:-(@thumbnail-width);
|
|
margin-right:1em;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Tags */
|
|
|
|
.tagit{
|
|
padding:0.6saem 1.2em;
|
|
|
|
.tagit-choice{
|
|
border:0;
|
|
}
|
|
|
|
ul& input[type="text"]{
|
|
padding: 0.2em 0.5em !important; /* having to use important, FML*/
|
|
}
|
|
ul& li.tagit-choice-editable{
|
|
padding:0 23px 0 0 !important; /* having to use important, FML*/
|
|
}
|
|
}
|
|
|
|
.tagit-close{
|
|
.ui-icon-close{
|
|
margin-left:1em;
|
|
text-indent:0;
|
|
background:none;
|
|
}
|
|
|
|
.ui-icon-close:before{
|
|
font-family:wagtail;
|
|
display:block;
|
|
color:@color-grey-3;
|
|
content:"g";
|
|
}
|
|
.ui-icon-close:hover:before{
|
|
color:@color-red
|
|
}
|
|
}
|
|
|
|
|
|
/* search bars (search integrated into header area) */
|
|
.search-bar{
|
|
margin-top:-2em;
|
|
padding-top:1em;
|
|
padding-bottom:1em;
|
|
margin-bottom:2em;
|
|
|
|
&.full-width{
|
|
.nice-padding();
|
|
background-color:@color-header-bg;
|
|
border-bottom:1px solid @color-grey-4;
|
|
}
|
|
|
|
.fields{
|
|
position:relative;
|
|
|
|
.field label{
|
|
display:none;
|
|
}
|
|
.field input{
|
|
padding-left:3em;
|
|
background-color:white;
|
|
}
|
|
.field:before{
|
|
position:absolute;
|
|
left:0.5em;
|
|
top:1em;
|
|
font-family:wagtail;
|
|
content:"f";
|
|
font-size:25px;
|
|
color:@color-grey-3;
|
|
}
|
|
}
|
|
.submit{
|
|
display:none;
|
|
position:absolute;
|
|
right:0;
|
|
top:0;
|
|
input{
|
|
padding:1.55em 2em;
|
|
}
|
|
}
|
|
.taglist{
|
|
font-size:0.9em;
|
|
line-height:2.4em;
|
|
h3{
|
|
display:inline;
|
|
}
|
|
a{
|
|
white-space: nowrap
|
|
}
|
|
}
|
|
|
|
header &{
|
|
margin:0;
|
|
padding:0;
|
|
.fields{
|
|
li{
|
|
padding:0;
|
|
}
|
|
.field{
|
|
padding:0;
|
|
}
|
|
.field input{
|
|
padding:0.4em 1.4em 0.4em 2em;
|
|
}
|
|
.field:before{
|
|
font-size:1.4em;
|
|
top:0.45em;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Transitions */
|
|
fieldset, input, textarea, select{
|
|
.transition(background-color 0.2s ease);
|
|
}
|
|
input[type=submit], input[type=reset], input[type=button], .button, button{
|
|
.transition(~"background-color 0.2s ease, color 0.2s ease");
|
|
}
|
|
.help{
|
|
.transition(opacity 0.2s ease);
|
|
}
|
|
/*
|
|
.chooser {
|
|
.unchosen:before, .chosen:before{
|
|
.transition(opacity 0.3s ease);
|
|
}
|
|
}
|
|
*/
|
|
@media screen and (min-width: @breakpoint-mobile){
|
|
.fields{
|
|
max-width:800px;
|
|
}
|
|
|
|
input[type=submit], input[type=reset], input[type=button], .button, button{
|
|
font-size:0.95em;
|
|
padding:0.75em 1.4em;
|
|
|
|
&.button-small{
|
|
|
|
}
|
|
|
|
&.bicolor{
|
|
padding-left:3.5em;
|
|
|
|
&:before{
|
|
width:2.2em;
|
|
line-height:2.35em;
|
|
}
|
|
}
|
|
}
|
|
} |