Update tooltip style and add to some editor buttons

This commit is contained in:
Nick O'Leary
2018-10-03 14:02:07 +01:00
parent b2f50da322
commit cdcf39fe82
15 changed files with 139 additions and 47 deletions

View File

@@ -67,3 +67,6 @@ $editor-button-color: #999;
$editor-button-background: #fff;
$shade-color: rgba(160,160,160,0.5);
$popover-background: #333;
$popover-color: #eee;

View File

@@ -21,12 +21,14 @@
width: auto;
padding: 10px;
height: auto;
background: #fff;
background: $popover-background;
color: $popover-color;
border-radius: 4px;
z-index: 1000;
font-size: 14px;
line-height: 1.4em;
@include component-shadow;
border-color: $popover-background;
}
.red-ui-popover:after, .red-ui-popover:before {
@@ -51,28 +53,33 @@
left: 50%;
}
.red-ui-popover.red-ui-popover-top:after, .red-ui-popover.red-ui-popover-top:before {
top: 100%;
left: 50%;
}
.red-ui-popover.red-ui-popover-right:after {
border-color: rgba(136, 183, 213, 0);
border-right-color: #fff;
border-right-color: $popover-background;
border-width: 10px;
margin-top: -10px;
}
.red-ui-popover.red-ui-popover-right:before {
border-color: rgba(194, 225, 245, 0);
border-right-color: $primary-border-color;
border-right-color: $popover-background;
border-width: 11px;
margin-top: -11px;
}
.red-ui-popover.red-ui-popover-left:after {
border-color: rgba(136, 183, 213, 0);
border-left-color: #fff;
border-left-color: $popover-background;
border-width: 10px;
margin-top: -10px;
}
.red-ui-popover.red-ui-popover-left:before {
border-color: rgba(194, 225, 245, 0);
border-left-color: $primary-border-color;
border-left-color: $popover-background;
border-width: 11px;
margin-top: -11px;
}
@@ -80,45 +87,61 @@
.red-ui-popover.red-ui-popover-bottom:after {
border-color: rgba(136, 183, 213, 0);
border-bottom-color: #fff;
border-bottom-color: $popover-background;
border-width: 10px;
margin-left: -10px;
}
.red-ui-popover.red-ui-popover-bottom:before {
border-color: rgba(194, 225, 245, 0);
border-bottom-color: $primary-border-color;
border-bottom-color: $popover-background;
border-width: 11px;
margin-left: -11px;
}
.red-ui-popover.red-ui-popover-top:after {
border-color: rgba(136, 183, 213, 0);
border-top-color: $popover-background;
border-width: 10px;
margin-left: -10px;
}
.red-ui-popover.red-ui-popover-top:before {
border-color: rgba(194, 225, 245, 0);
border-top-color: $popover-background;
border-width: 11px;
margin-left: -11px;
}
.red-ui-popover-size-small {
font-size: 11px;
padding: 5px;
font-size: 12px;
padding: 5px 7px;
line-height: 1.8em;
&.red-ui-popover-right:after {
border-width: 5px;
margin-top: -5px;
&.red-ui-popover-right:after, &.red-ui-popover-left:after {
border-width: 7px;
margin-top: -7px;
}
&.red-ui-popover-right:before {
border-width: 6px;
margin-top: -6px;
&.red-ui-popover-right:before, &.red-ui-popover-left:before {
border-width: 8px;
margin-top: -8px;
}
&.red-ui-popover-left:after {
border-width: 5px;
margin-top: -5px;
&.red-ui-popover-bottom:after, &.red-ui-popover-top:after {
border-width: 7px;
margin-left: -7px;
}
&.red-ui-popover-left:before {
border-width: 6px;
margin-top: -6px;
}
&.red-ui-popover-bottom:after {
border-width: 5px;
margin-left: -5px;
}
&.red-ui-popover-bottom:before {
border-width: 6px;
margin-left: -6px;
&.red-ui-popover-bottom:before, &.red-ui-popover-top:before {
border-width: 8px;
margin-left: -8px;
}
}
.red-ui-popover-key {
font-family: monospace;
margin-left: 5px;
border: 1px solid #999;
border-radius:3px;
padding: 2px 3px;
}