cartodb/app/assets/stylesheets/old_elements/dialog_small_edit.css.scss
2020-06-15 10:58:47 +08:00

504 lines
9.6 KiB
SCSS

@import "compass/css3/box-sizing";
@import "../old_common/vars";
@import "../old_common/form-elements";
.floating.edit_name_dialog.markdown {
height: 62px;
.input_field {
position: absolute;
top: 5px;
right: 65px;
bottom: 5px;
left: 5px;
width: 100%;
width: 289px;
margin: 0 3px 0 0;
padding: 8px 10px;
border: 1px solid #000;
border-radius: 4px;
background: #FFF;
color: #333;
font-size: 15px;
line-height: normal;
.hint {
margin: 7px 0 0;
padding: 4px 3px 0 0;
border-top: 1px solid #CCC;
color: #CCC;
font-size: 12px;
text-align: right;
strong {
margin-right: 3px;
}
em {
margin-right: 3px;
font-style: italic;
}
}
input {
position: relative;
top: 0;
right: 0;
bottom: 0;
left: 0;
box-sizing: border-box;
width: 100%;
margin: 0;
padding: 0;
border: none;
border-radius: 0;
background: none;
}
}
input,
textarea {
height: 19px;
}
}
.edit_text_dialog {
position: absolute !important;
z-index: 0 !important;
max-width: 500px;
max-height: 500px;
padding: 11px;
border: 1px solid #B7B7B7;
border-radius: 4px;
box-shadow: rgba(black, 0.17) 0 0 6px 1px;
@include background(linear-gradient(#FEFEFE, #F4F4F4));
a.button {
margin-top: 9px;
padding: 6px 15px !important;
letter-spacing: 0;
}
a.cancel {
margin-top: 13px;
font-size: 13px;
text-decoration: underline;
text-transform: lowercase;
}
a.cancel.right {
margin-top: 10px;
margin-bottom: 2px;
}
a.link {
margin-top: 19px;
margin-right: 3px;
font-size: 13px;
text-decoration: underline;
text-transform: lowercase;
}
input,
textarea {
display: block;
position: relative;
box-sizing: border-box;
width: 100%;
max-width: 500px - 22;
max-height: 500px - 60;
margin: 0 !important;
padding: 10px;
border: 1px solid #C0C1C2;
border-radius: 4px;
background: #FFF;
color: #666;
font-family: $text-fonts;
font-size: 15px;
&:focus {
border-color: #999;
outline: none;
}
}
// Edit date dialog
div.field.date {
div.date_field {
display: table;
width: 281px;
letter-spacing: -4px;
word-spacing: -4px;
.select2-container {
width: 100px !important;
}
& > div.column {
display: inline-block;
margin-right: 4px;
letter-spacing: 0;
vertical-align: top;
word-spacing: 0;
label {
display: block;
margin: 0 0 3px;
padding: 0;
color: #DDD;
font: normal 12px $text-fonts;
}
div.form_spinner {
background: WHITE;
&.disabled {
border-color: #DDD !important;
}
}
&.day_field {
width: 46px;
}
&.month_field {
width: 101px;
}
&.year_field {
width: 54px;
}
&.time_field {
@include default-input();
width: 66px;
input {
width: 59px;
padding: 2px 3px;
border-color: #9E9E9E;
font-size: 13px;
// Actions
&.error {
border-color: rgba(red, 0.5);
}
&[readonly] {
border-color: #DDD;
background: #F4F4F4;
}
}
}
&:last-child {
margin-right: 0;
}
}
}
// .select2-container {width:100px !important;}
// form > div {
// letter-spacing: -4px;
// }
// div.field {
// display: inline-block;
vertical-align: top;
// margin-right: 4px;
// letter-spacing:0;
// * {letter-spacing:0;}
// label {display:block; margin:0 0 5px; font:bold 10px $text-fonts; color:#999999;}
// div.form_spinner {
// background: white;
// &.disabled {border-color:#DDDDDD !important;}
// }
// &:last-child {margin-right:0;}
// }
// input.time {
// width: 54px;
// padding: 0 5px;
// height: 19px;
// font-size: 13px;
// line-height: 19px;
// border-color: #9E9E9E;
// &.error {border-color:rgba(red,0.5);}
// &[disabled] {border-color:#DDDDDD;}
// }
}
// Edit boolean dialog
div.field.boolean {
nav {
display: block;
min-width: 205px;
padding: 10px 5px 12px 20px;
border: 1px solid #CCC;
border-radius: 4px;
background: WHITE;
a {
display: inline-block;
width: 65px;
font-size: 13px;
font-weight: normal;
vertical-align: top;
span.radio {
margin-top: 0 !important;
}
&:hover {
text-decoration: none;
}
}
}
}
// Edit number dialog
div.field.number {
input.error {
border-color: rgba(red, 0.5);
}
}
// Edit geometry dialog
div.field.geometry {
textarea.error,
input.error {
border-color: rgba(red, 0.5);
}
.selector {
display: none;
width: 100%;
margin-bottom: 7px;
}
.switches label {
color: #AAA;
font-size: 13px;
}
div.loader {
display: block;
width: 100%;
height: 50px;
background: image-url("layout/loader_gray.gif") no-repeat center center transparent;
}
div.rest {
display: none;
}
div.point {
display: none;
position: relative;
width: auto;
max-width: 322px;
height: 30px;
margin: 0;
& > span,
& > p {
display: inline-block;
position: relative;
margin: 0;
vertical-align: top;
}
input {
display: block;
width: 105px;
height: 31px;
margin: 0;
padding: 5px 5px 5px 36px;
font-size: 15px;
line-height: 19px;
text-align: right;
&.error {
border-color: rgba(red, 0.5);
}
}
p {
width: 17px;
font-size: 20px;
text-align: center;
}
label {
position: absolute;
z-index: 10;
top: 6px;
left: 8px;
color: #AAA;
font-size: 13px;
font-style: italic;
pointer-events: none;
}
}
}
.hidden {
display: none;
}
}
.floating.edit_name_dialog {
@include background(linear-gradient(rgba(black, 0.5), rgba(#212121, 0.5)));
min-width: 280px;
height: 37px;
padding: 5px;
border-radius: 4px;
box-shadow: rgba(#000, 0.12) 0 0 2px 2px;
.content {
display: inline-block;
float: left;
vertical-align: top;
}
input {
position: absolute;
top: 5px;
right: 65px;
bottom: 5px;
left: 5px;
margin: 0 3px 0 0;
padding: 8px 10px;
border: 1px solid #000;
border-radius: 4px;
color: #333;
font-size: 15px;
line-height: normal;
&:focus {
outline: none;
}
}
a.ok {
padding: 9px 15px !important;
border: 1px solid #000 !important;
border-radius: 4px;
font-size: 15px !important;
font-weight: bold !important;
letter-spacing: 0;
&:active {
@include background(linear-gradient(#F9F9F9, #E1E1E1));
border-color: #ACACAC;
background: #D3D3D3; // IE
box-shadow: rgba(#FFF, 0) 0 0 1px 0, rgba(130, 126, 111, 0.6) 0 1px 3px 0 inset;
}
}
&.tags-dialog {
height: auto;
ul {
display: inline-block;
position: relative;
min-width: 215px;
max-width: 400px;
min-height: 24px;
max-height: 300px !important;
margin: 0 3px 0 0;
padding: 4px 4px 1px;
border: 1px solid #000;
border-radius: 4px;
background: WHITE;
vertical-align: top;
li.tagit-choice {
margin: 0 3px 3px 0;
padding: 0;
border: 1px solid #2B5B85;
border-radius: 3px;
background: #4086C3;
color: #FFF;
font: normal 11px "Arial";
span.tagit-label {
display: inline-block;
padding: 0 5px;
border-right: 1px solid #2B5B85;
line-height: 19px;
vertical-align: top;
}
a.tagit-close {
display: inline-block;
position: relative;
width: auto;
height: 100%;
margin: 0;
line-height: 19px;
vertical-align: top;
&:hover {
text-decoration: none;
span.text-icon {
color: WHITE;
}
}
span.text-icon {
display: block;
margin: 0;
padding: 0 5px 0 7px;
color: #1F4362;
line-height: 19px;
}
}
}
li.tagit-new {
margin-top: 0;
margin-bottom: 0;
padding: 0;
input {
display: inline-block;
position: relative;
top: 0;
right: auto;
bottom: auto;
left: auto;
margin: 3px 0 3px 5px;
padding: 0;
font-size: 13px;
line-height: 15px;
vertical-align: top;
}
}
}
a.ok {
padding: 6px 15px !important;
border: 1px solid #000 !important;
border-radius: 4px;
font-size: 15px !important;
font-weight: bold !important;
letter-spacing: 0;
&:active {
@include background(linear-gradient(#F9F9F9, #E1E1E1));
border-color: #ACACAC;
background: #D3D3D3; // IE
box-shadow: rgba(#FFF, 0) 0 0 1px 0, rgba(130, 126, 111, 0.6) 0 1px 3px 0 inset;
}
}
}
}