Files
Umbraco-CMS/src/Umbraco.Web.UI.Client/src/less/property-editors.less

930 lines
19 KiB
Plaintext

//
// Container styles
// --------------------------------------------------
.umb-editor {
min-width:66.6%;
&-pull {
float:left;
width:66.6%;
}
&-push {
float:right;
}
}
.umb-editor-tiny {
width: 60px;
&.umb-editor-push {
width:30%;
min-width:0;
}
}
.umb-editor-small {
width: 90px;
}
.umb-modal .umb-editor {
width: 95%;
}
.umb-dialog .umb-editor {
width: 95%;
}
.umb-dialog .umb-control-group .help-block {
width: 95%;
}
.umb-codeeditor{
width: 99%;
}
// displays property inline with preceeding
.umb-property {
&--pull {
float:left;
width:60%;
}
&--push {
float:right;
width:35%;
}
&--pull, &--push {
.umb-editor {
min-width:0;
width:100%;
}
}
}
//
// Content picker
// --------------------------------------------------
.umb-contentpicker li a:hover .hover-hide, .umb-contentpicker li a .hover-show{
display: none;
}
.umb-contentpicker li a:hover .hover-show{display: inline-block;}
.umb-contentpicker-popover .search-holder {
padding: 10px;
}
.umb-contentpicker__min-max-help {
font-size: 13px;
margin-top: 5px;
color: @gray-4;
}
.show-validation .umb-contentpicker__min-max-help {
display: none;
}
.umb-contentpicker small {
&:not(:last-child) {
padding-right: 3px;
border-right: 1px solid @gray-5;
}
a {
color: @gray-3;
}
}
/* CODEMIRROR DATATYPE */
div.umb-codeeditor {
border: 1px solid @gray-8;
}
div.umb-codeeditor .umb-el-wrap {
padding: 0px;
}
div.umb-codeeditor .umb-btn-toolbar {
padding: 0px;
margin: 0px;
border-bottom: @gray-8 1px solid;
background: @gray-10;
}
//
// RTE
// --------------------------------------------------
.mce-tinymce{border: 1px solid @gray-8 !important; border-radius: 0px !important;}
.mce-panel{background: @gray-10 !important; border-color: @gray-8 !important;}
.mce-btn-group, .mce-btn{border: none !important; background: none !important;}
.mce-ico{font-size: 12px !important; color: @gray-1 !important;}
/* Special case to support helviticons for the tiny mce button controls */
.mce-ico.mce-i-custom[class^="icon-"],
.mce-ico.mce-i-custom[class*=" icon-"] {
font-family: icomoon;
font-size:16px !important;
}
/* pre-value editor */
.rte-editor-preval .control-group .controls > div > label .mce-ico { line-height: 20px; }
//
// Color picker
// --------------------------------------------------
ul.color-picker li {
padding: 2px;
margin: 3px;
border: 2px solid transparent;
width: 60px;
}
ul.color-picker li.active {
border: 2px dashed @gray-8;
}
ul.color-picker li a {
height: 50px;
display:block;
cursor:pointer;
}
.control-group.color-picker-preval .thumbnail {
width:30px;
border:none;
}
/* pre-value editor */
/*.control-group.color-picker-preval:before {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}*/
/*.control-group.color-picker-preval div.thumbnail {
display: inline-block;
vertical-align: middle;
}*/
.control-group.color-picker-preval div.color-picker-prediv {
display: inline-block;
width: 60%;
}
.control-group.color-picker-preval pre {
display: inline;
margin-right: 20px;
margin-left: 10px;
width: 50%;
white-space: nowrap;
overflow: hidden;
margin-bottom: 0;
vertical-align: middle;
}
.control-group.color-picker-preval btn {
//vertical-align: middle;
}
.control-group.color-picker-preval input[type="text"] {
min-width: 40%;
width: 40%;
display: inline-block;
margin-right: 20px;
margin-top: 1px;
}
.control-group.color-picker-preval label {
border: solid @white 1px;
padding: 6px;
}
//
// Media picker
// --------------------------------------------------
.umb-mediapicker .add-link {
display: flex;
justify-content:center;
align-items:center;
width: 120px;
text-align: center;
color: @gray-8;
border: 2px @gray-8 dashed;
text-decoration: none;
transition: all 150ms ease-in-out;
&:hover {
color: @turquoise-d1;
border-color: @turquoise;
}
}
.umb-mediapicker .picked-image {
position: absolute;
bottom: 10px;
right: 10px;
opacity: 0.5;
font-size: 24px;
color: @red;
background: @white;
line-height: 36px;
text-align: center;
-moz-border-radius: 15px;
border-radius: 15px;
height: 32px;
width: 32px;
overflow: hidden;
display: none;
text-decoration: none;
}
.umb-mediapicker .label.trashed {
position: absolute;
top: 5px;
right: 5px;
color: #fff;
background-color: #fe6561;
background-image: linear-gradient(180deg,#fe6561,#fe6561);
}
.umb-mediapicker .add-link-square {
height: 120px;
}
.umb-thumbnails {
position: relative;
display: flex;
-ms-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
justify-content: flex-start;
}
.umb-thumbnails > li.icon {
width: 14%;
text-align: center;
}
.umb-thumbnails i{margin: auto;}
.umb-thumbnails a{
outline: none;
border:none !important;
box-shadow:none !important;
}
.umb-sortable-thumbnails {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.umb-sortable-thumbnails li {
position: relative;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-wrap: wrap;
padding: 2px;
margin: 5px;
background: @white;
border: 1px solid @gray-10;
max-width: 100%;
}
.umb-mediapicker .umb-sortable-thumbnails li {
flex-direction: column;
margin: 0 5px 5px 0;
padding: 5px;
}
.umb-sortable-thumbnails li:hover a {
display: flex;
justify-content: center;
align-items: center;
}
.umb-sortable-thumbnails li img {
max-width:100%;
max-height:100%;
margin:auto;
display:block;
background-image: url(../img/checkered-background.png);
}
.umb-sortable-thumbnails li img.trashed {
opacity:0.3;
}
.umb-sortable-thumbnails li img.noScale {
max-width: none !important;
max-height: none !important;
}
.umb-sortable-thumbnails .umb-icon-holder {
text-align: center;
}
.umb-sortable-thumbnails .umb-icon-holder .icon{
font-size: 40px;
line-height: 50px;
color: @gray-3;
display: block;
}
.umb-sortable-thumbnails .umb-sortable-thumbnails__wrapper {
width: 124px;
height: 124px;
overflow: hidden;
}
.umb-sortable-thumbnails .umb-sortable-thumbnails__actions {
position: absolute;
bottom: 10px;
right: 10px;
text-decoration: none;
display: flex;
flex-direction: row;
opacity: 0;
visibility: hidden;
}
.umb-sortable-thumbnails.ui-sortable:not(.ui-sortable-disabled) {
> li:not(.unsortable) {
cursor: move;
}
}
.umb-sortable-thumbnails li:hover .umb-sortable-thumbnails__actions {
opacity: 1;
visibility: visible;
}
.umb-sortable-thumbnails .umb-sortable-thumbnails__action {
font-size: 16px;
background: @white;
height: 25px;
width: 25px;
border-radius: 15px;
color: @gray-1;
display: flex;
justify-content: center;
align-items: center;
margin-left: 5px;
text-decoration: none;
}
.umb-sortable-thumbnails .umb-sortable-thumbnails__action.-red {
color: @red;
}
.umb-sortable-thumbnails .umb-sortable-thumbnails__action:hover {
text-decoration: none;
}
//
// Cropper
// -------------------------------------------------
.umb-cropper{
position: relative;
}
.umb-cropper img, .umb-cropper-gravity img{
position: relative;
max-width: 100%;
height: auto;
top: 0;
left: 0;
}
.umb-cropper img {
max-width: none;
}
.umb-cropper .overlay, .umb-cropper-gravity .overlay {
top: 0;
left: 0;
cursor: move;
z-index: @zindexCropperOverlay;
position: absolute;
}
.umb-cropper .viewport{
overflow: hidden;
position: relative;
margin: auto;
max-width: 100%;
height: auto;
}
.umb-cropper-gravity .viewport{
overflow: hidden;
position: relative;
width: 100%;
height: 100%;
}
.umb-cropper .viewport:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: @zindexCropperOverlay - 1;
-moz-opacity: .75;
opacity: .75;
filter: alpha(opacity=7);
-webkit-box-shadow: inset 0 0 0 20px white,inset 0 0 0 21px rgba(0,0,0,.1),inset 0 0 20px 21px rgba(0,0,0,.2);
-moz-box-shadow: inset 0 0 0 20px white,inset 0 0 0 21px rgba(0,0,0,.1),inset 0 0 20px 21px rgba(0,0,0,.2);
box-shadow: inset 0 0 0 20px white,inset 0 0 0 21px rgba(0,0,0,.1),inset 0 0 20px 21px rgba(0,0,0,.2);
}
.umb-cropper-gravity .overlay{
width: 14px;
height: 14px;
text-align: center;
border-radius: 20px;
background: @turquoise;
border: 3px solid @white;
opacity: 0.8;
}
.umb-cropper-gravity .overlay i {
font-size: 26px;
line-height: 26px;
opacity: 0.8 !important;
}
.umb-cropper .crop-container {
text-align: center;
}
.umb-cropper .crop-slider {
padding: 10px;
border-top: 1px solid @gray-10;
margin-top: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
@media (min-width: 769px) {
padding: 10px 50px 10px 50px;
}
}
.umb-cropper .crop-slider i {
color: @gray-3;
flex: 0 0 25px;
padding: 0 5px;
box-sizing: border-box;
}
.umb-cropper .crop-slider i:first-of-type {
text-align: right;
}
.umb-cropper .crop-slider input {
flex: 0 1 auto;
}
.umb-cropper-gravity .viewport, .umb-cropper-gravity, .umb-cropper-imageholder {
display: inline-block;
max-width: 100%;
}
.umb-cropper-imageholder {
float: left;
}
.cropList {
display: inline-block;
position: relative;
vertical-align: top;
}
.gravity-container .viewport {
max-width: 600px;
}
.gravity-container .viewport:hover {
cursor: pointer;
}
.imagecropper {
display: flex;
align-items: flex-start;
flex-direction: row;
@media (max-width: 768px) {
flex-direction: column;
float: left;
max-width: 100%;
}
}
.imagecropper .umb-cropper__container {
position: relative;
margin-bottom: 10px;
max-width: 100%;
border: 1px solid @gray-10;
@media (min-width: 769px) {
width: 600px;
}
}
.umb-close-cropper {
position: absolute;
top: 3px;
right: 3px;
cursor: pointer;
z-index: 1;
}
.umb-close-cropper:hover {
opacity: .9;
background: @gray-10;
}
.imagecropper .umb-sortable-thumbnails {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.imagecropper .umb-sortable-thumbnails li {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 8px;
margin-top: 0;
}
.imagecropper .umb-sortable-thumbnails li.current {
border-color: @gray-8;
background: @gray-10;
color: @black;
cursor: pointer;
}
.imagecropper .umb-sortable-thumbnails li:hover,
.imagecropper .umb-sortable-thumbnails li.current:hover {
border-color: @gray-8;
background: @gray-10;
color: @black;
cursor: pointer;
opacity: .95;
}
.imagecropper .umb-sortable-thumbnails li .crop-name,
.imagecropper .umb-sortable-thumbnails li .crop-size {
display: block;
text-align: left;
font-size: 13px;
line-height: 1;
}
.imagecropper .umb-sortable-thumbnails li .crop-name {
font-weight: bold;
margin: 10px 0 5px;
}
.imagecropper .umb-sortable-thumbnails li .crop-size {
font-size: 10px;
font-style: italic;
margin: 0 0 5px;
}
.btn-crop-delete {
display: block;
text-align: left;
}
//
// folder-browser
// --------------------------------------------------
.umb-folderbrowser .add-link{
display: inline-block;
height: 120px;
width: 120px;
text-align: center;
border: 1px @gray-10 dashed;
line-height: 120px
}
.umb-upload-drop-zone{
margin-bottom:5px;
}
.umb-upload-drop-zone .info, .umb-upload-button-big{
display: block;
padding: 20px;
opacity: 1;
border: 1px dashed @gray-8;
background: none;
text-align: center;
font-size: 14px;
color: @gray-8;
}
.umb-upload-button-big:hover{color: @gray-8;}
.umb-upload-drop-zone .info i.icon, .umb-upload-button-big i.icon{
font-size: 55px;
line-height: 70px
}
.umb-upload-button-big {display: block}
.umb-upload-button-big input {
left: 0;
bottom: 0;
height: 100%;
width: 100%;
}
//
// Photo folder styling
// --------------------------------------------------
.umb-photo-folder .picrow{
overflow-y: hidden;
position: relative;
}
.umb-photo-folder .picrow div, .umb-photo-preview{
margin: 0px;
padding: 0px;
border: none;
display: inline-block;
vertical-align: top;
position: relative;
}
.umb-photo-folder .picrow div a:first-child {
width:100%;
height:100%;
}
.umb-photo-folder .picrow div.umb-photo {
width:100%;
height:100%;
background-color: @gray-10;
}
.umb-photo-folder a:hover{text-decoration: none}
.umb-photo-folder .umb-non-thumbnail{
text-align: center;
vertical-align: middle;
font-size: 12px;
background: @gray-10;
color: @black;
text-decoration: none;
}
.umb-photo-folder .selector-overlay{
display: none;
}
//this is a temp hack, to provide selectors in the dialog:
.umb-photo-folder .pic:hover .selector-overlay {
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
padding: 5px;
background: @black;
z-index: 100;
display: block;
text-align: center;
color: @white;
opacity: 0.4;
text-decoration:none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.umb-photo-folder .umb-non-thumbnail i{
color: @gray-8;
font-size: 50px;
line-height: 60px;
display: block;
margin: auto;
/*vertically aligns */
position: relative;
top: 50%;
transform: translateY(-50%);
}
.umb-photo-folder .umb-non-thumbnail span{
position: absolute;
display: block;
margin: auto;
width: 100%;
top: 20px;
}
.umb-photo-folder .selected{
position: relative;
}
.umb-photo-folder .selected:before{
content: "\e165";
font-family: Icomoon;
position: absolute;
bottom: 10px;
right: 10px;
font-size: 24px;
color: @black;
opacity: 0.5;
background: @white;
line-height: 36px;
text-align: center;
-moz-border-radius: 15px;
border-radius: 15px;
height: 32px;
width: 32px;
overflow: hidden;
display: block;
z-index: 100;
}
//
// File upload
// --------------------------------------------------
.umb-fileupload .preview {
border-radius: 5px;
border: 1px solid @gray-6;
padding: 3px;
background: @gray-9;
float: left;
margin-right: 30px;
margin-bottom: 30px;
}
.umb-fileupload ul {
list-style: none;
vertical-align: middle;
margin-bottom: 0px;
}
.umb-fileupload label {
vertical-align: middle;
padding-left: 7px;
font-weight: normal;
}
.umb-fileupload .preview-file {
color: @gray-4;
height: 45px;
width: 55px;
text-align: center;
text-transform: uppercase;
font-size: 10px;
padding-top: 27px;
}
.umb-fileupload .file-icon {
text-align: center;
display: block;
position: relative;
padding: 5px 0;
> .icon {
font-size: 70px;
line-height: 110%;
color: @gray-4;
text-align: center;
}
> span {
color: @white;
background: @gray-4;
padding: 1px 3px;
font-size: 12px;
line-height: 130%;
position: absolute;
top: 45px;
left: 110px;
}
}
.umb-fileupload input {
font-size: 12px;
line-height: 1;
}
//
// Member group picker
// --------------------------------------------------
.umb-member-group-box {
width: 45%;
}
.umb-member-group-box:nth-child(1){
float:left;
}
.umb-member-group-box:nth-child(2){
float:right;
}
//
// Related links
// --------------------------------------------------
.umb-relatedlinks table > tr > td { word-wrap:break-word; word-break: break-all; border-bottom: 1px solid transparent; }
.umb-relatedlinks .handle { cursor:move; }
.umb-relatedlinks table > tbody > tr.unsortable .handle { cursor:default; }
.umb-relatedlinks table td.col-sort { width: 20px; }
.umb-relatedlinks table td.col-caption { min-width: 200px; }
.umb-relatedlinks table td.col-link { min-width: 200px; }
.umb-relatedlinks table td.col-actions { min-width: 120px; }
.umb-relatedlinks table td.col-caption .control-wrapper,
.umb-relatedlinks table td.col-link .control-wrapper { display: flex; }
.umb-relatedlinks table td.col-caption .control-wrapper input[type="text"],
.umb-relatedlinks table td.col-link .control-wrapper input[type="text"] { width: auto; flex: 1; }
/* sortable placeholder */
.umb-relatedlinks .sortable-placeholder {
background-color: @tableBackgroundAccent;
display: table-row;
}
.umb-relatedlinks .sortable-placeholder > td {
display: table-cell;
padding: 8px;
}
.umb-relatedlinks .ui-sortable-helper {
display: table-row;
background-color: @white;
opacity: 0.7;
}
.umb-relatedlinks .ui-sortable-helper > td {
display: table-cell;
border-bottom: 1px solid @tableBorder;
}
//
// Tags
// --------------------------------------------------
.umb-tags{border: @gray-10 solid 1px; padding: 10px; font-size: 13px; text-shadow: none;}
.umb-tags .tag{cursor: pointer; margin: 7px; padding: 7px; background: @turquoise}
.umb-tags .tag i{padding: 2px;}
.umb-tags input{border: none; background: @white}
//
// Date/time picker
// --------------------------------------------------
.bootstrap-datetimepicker-widget .btn{padding: 0;}
.bootstrap-datetimepicker-widget .picker-switch .btn{ background: none; border: none;}
.umb-datepicker .input-append .add-on{cursor: pointer;}
.umb-datepicker p {margin-top:10px;}
.umb-datepicker p a{color: @gray-3;}
//
// Code mirror - even though this isn't a proprety editor right now, it could be so I'm putting the styles here
// --------------------------------------------------
.CodeMirror, .CodeMirror-scroll {
height: 100%;
min-height:200px;
}
//
// Nested boolean (e.g. list view bulk action permissions)
// ---------------------=====-----------------------------
.umb-nested-boolean label {margin-bottom: 8px; float: left; width: 320px;}
.umb-nested-boolean label span {float: left; width: 80%;}
.umb-nested-boolean label input[type='checkbox'] {margin-right: 10px; float: left;}