[design] improve link item border radius in edit mode

This commit is contained in:
zombieFox 2019-11-16 23:41:06 +00:00
parent 4e08836075
commit 6979a36c2a
2 changed files with 19 additions and 7 deletions

View File

@ -116,7 +116,6 @@
/* link panel front */
.link-panel-front {
background-color: rgb(var(--theme-gray-02));
border-radius: var(--theme-radius);
position: absolute;
left: 0;
width: 100%;
@ -128,6 +127,10 @@
transition: background-color var(--layout-timing-extra-fast), height var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast), border-radius var(--layout-timing-extra-fast);
}
.is-theme-radius .link-panel-front {
border-radius: var(--theme-radius);
}
.is-link-orientation-top .link-panel-front {
top: inherit;
bottom: 0;
@ -288,16 +291,16 @@
height: calc(100% - var(--link-item-edit-height));
}
.is-link-orientation-top.is-link-edit .link-panel-front,
.is-link-orientation-top.is-link-edit .link-item:hover .link-panel-front,
.is-link-orientation-top.is-link-edit .link-item:focus .link-panel-front {
.is-theme-radius.is-link-edit.is-link-orientation-top .link-panel-front,
.is-theme-radius.is-link-edit.is-link-orientation-top .link-item:hover .link-panel-front,
.is-theme-radius.is-link-edit.is-link-orientation-top .link-item:focus .link-panel-front {
border-top-left-radius: 0.25em;
border-top-right-radius: 0.25em;
}
.is-link-orientation-bottom.is-link-edit .link-panel-front,
.is-link-orientation-bottom.is-link-edit .link-item:hover .link-panel-front,
.is-link-orientation-bottom.is-link-edit .link-item:focus .link-panel-front {
.is-theme-radius.is-link-edit.is-link-orientation-bottom .link-panel-front,
.is-theme-radius.is-link-edit.is-link-orientation-bottom .link-item:hover .link-panel-front,
.is-theme-radius.is-link-edit.is-link-orientation-bottom .link-item:focus .link-panel-front {
border-bottom-left-radius: 0.25em;
border-bottom-right-radius: 0.25em;
}

View File

@ -2243,6 +2243,7 @@ var control = (function() {
valueMod: ["float"],
func: function() {
theme.render.radius();
render.class();
}
}, {
element: helper.e(".control-theme-radius-default"),
@ -2765,6 +2766,13 @@ var control = (function() {
};
};
};
var _theme = function() {
if (state.get().theme.radius > 0) {
helper.addClass(html, "is-theme-radius");
} else {
helper.removeClass(html, "is-theme-radius");
};
};
var _layout = function() {
helper.removeClass(html, "is-layout-scrollpastend");
helper.removeClass(html, "is-layout-alignment-topleft");
@ -2798,6 +2806,7 @@ var control = (function() {
_header();
_group();
_link();
_theme();
_layout();
_background();
};