summaryrefslogtreecommitdiffhomepage
path: root/themes/luci-theme-material
diff options
context:
space:
mode:
authorJo-Philipp Wich <jo@mein.io>2018-06-08 07:29:44 +0200
committerJo-Philipp Wich <jo@mein.io>2018-06-08 08:14:36 +0200
commit9d4849072901b2a4bcf3a99492ade1e1cb54930d (patch)
tree1d5c5ab9d692a230989798eb7e9565f982d193d3 /themes/luci-theme-material
parent4cca96ef091857b6bfe839d7612da00745c530b6 (diff)
luci-base: add markup, JS and CSS for new dropdown
This commit introduces the required code for a new, markup based dropdown widget which can be used as a styleable alternative to select boxes or radio/checkbox button groups. Signed-off-by: Jo-Philipp Wich <jo@mein.io>
Diffstat (limited to 'themes/luci-theme-material')
-rwxr-xr-xthemes/luci-theme-material/htdocs/luci-static/material/css/style.css233
1 files changed, 208 insertions, 25 deletions
diff --git a/themes/luci-theme-material/htdocs/luci-static/material/css/style.css b/themes/luci-theme-material/htdocs/luci-static/material/css/style.css
index a3b22ccf81..a9585cf40e 100755
--- a/themes/luci-theme-material/htdocs/luci-static/material/css/style.css
+++ b/themes/luci-theme-material/htdocs/luci-static/material/css/style.css
@@ -107,7 +107,8 @@ select {
}
select,
-input {
+input,
+.cbi-dropdown {
background-color: transparent;
color: rgba(0, 0, 0, .87);
border: none;
@@ -157,7 +158,7 @@ header {
transition: box-shadow .2s;
float: left;
position: fixed;
- z-index: 101;
+ z-index: 2000;
}
footer {
@@ -452,11 +453,7 @@ fieldset {
font-style: normal;
line-height: 1;
font-family: inherit;
-
min-width: inherit;
- overflow-x: auto;
- overflow-y: hidden;
-
border-radius: 0;
background-color: #FFF;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
@@ -626,6 +623,7 @@ td > table > tbody > tr > td,
box-shadow: none;
}
+.btn + .btn,
form.inline + form.inline,
.cbi-button + .cbi-button {
margin-left: 0.6rem;
@@ -804,6 +802,172 @@ form.inline + form.inline,
font-size: small;
}
+
+.cbi-dropdown {
+ display: inline-flex;
+ cursor: pointer;
+ position: relative;
+ padding: 0;
+ height: auto;
+}
+
+.cbi-dropdown:focus {
+ outline: 2px solid #4b6e9b;
+}
+
+.cbi-dropdown > ul {
+ margin: 0 !important;
+ padding: 0;
+ list-style: none;
+ overflow-x: hidden;
+ overflow-y: auto;
+ display: flex;
+ width: 100%;
+}
+
+.cbi-dropdown > ul.preview {
+ display: none;
+}
+
+.cbi-dropdown > .open {
+ border: 2px outset #eee;
+ flex-basis: 15px;
+ background: #eee;
+}
+
+.cbi-dropdown > .open,
+.cbi-dropdown > .more {
+ flex-grow: 0;
+ flex-shrink: 0;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ text-align: center;
+ line-height: 2em;
+ padding: 0 .25em;
+}
+
+.cbi-dropdown > .more,
+.cbi-dropdown > ul > li[placeholder] {
+ color: #777;
+ font-weight: bold;
+ text-shadow: 1px 1px 0px #fff;
+ display: none;
+}
+
+.cbi-dropdown > ul > li {
+ display: none;
+ padding: .25em;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ flex-shrink: 1;
+ flex-grow: 1;
+ align-items: center;
+ align-self: center;
+ min-height: 20px;
+}
+
+.cbi-dropdown > ul > li .hide-open { display: initial; }
+.cbi-dropdown > ul > li .hide-close { display: none; }
+
+.cbi-dropdown > ul > li[display]:not([display="0"]) {
+ border-left: 1px solid #ccc;
+}
+
+.cbi-dropdown[empty] > ul {
+ max-width: 1px;
+}
+
+.cbi-dropdown > ul > li > form {
+ display: none;
+ margin: 0;
+ padding: 0;
+ pointer-events: none;
+}
+
+.cbi-dropdown > ul > li img {
+ vertical-align: middle;
+ margin-right: .25em;
+}
+
+.cbi-dropdown > ul > li > form > input[type="checkbox"] {
+ margin: 0;
+ height: auto;
+}
+
+.cbi-dropdown > ul > li input[type="text"] {
+ height: 20px;
+}
+
+.cbi-dropdown[open] {
+ position: relative;
+}
+
+.cbi-dropdown[open] > ul.dropdown {
+ display: block;
+ background: #f6f6f5;
+ border: 1px solid #918e8c;
+ box-shadow: 0 0 4px #918e8c;
+ position: absolute;
+ z-index: 1000;
+ max-width: none;
+ min-width: 100%;
+ width: auto;
+}
+
+.cbi-dropdown > ul > li[display],
+.cbi-dropdown[open] > ul.preview,
+.cbi-dropdown[open] > ul.dropdown > li,
+.cbi-dropdown[multiple] > ul > li > label,
+.cbi-dropdown[multiple][open] > ul.dropdown > li,
+.cbi-dropdown[multiple][more] > .more,
+.cbi-dropdown[multiple][empty] > .more {
+ flex-grow: 1;
+ display: flex;
+ align-items: center;
+}
+
+.cbi-dropdown[empty] > ul > li,
+.cbi-dropdown[optional][open] > ul.dropdown > li[placeholder],
+.cbi-dropdown[multiple][open] > ul.dropdown > li > form {
+ display: block;
+}
+
+.cbi-dropdown[open] > ul.dropdown > li .hide-open { display: none; }
+.cbi-dropdown[open] > ul.dropdown > li .hide-close { display: initial; }
+
+.cbi-dropdown[open] > ul.dropdown > li {
+ border-bottom: 1px solid #ccc;
+}
+
+.cbi-dropdown[open] > ul.dropdown > li[selected] {
+ background: #b0d0f0;
+}
+
+.cbi-dropdown[open] > ul.dropdown > li.focus {
+ background: linear-gradient(90deg, #a3c2e8 0%, #84aad9 100%);
+}
+
+.cbi-dropdown[open] > ul.dropdown > li:last-child {
+ margin-bottom: 0;
+ border-bottom: none;
+}
+
+.cbi-dropdown[disabled] {
+ pointer-events: none;
+ opacity: .6;
+}
+
+.cbi-dropdown .zonebadge {
+ width: 100%;
+}
+
+.cbi-dropdown[open] .zonebadge {
+ width: auto;
+}
+
+
/* luci */
.hidden {
@@ -839,17 +1003,20 @@ form.inline + form.inline,
}
/* select */
-.cbi-value-field .cbi-input-select {
+.cbi-value-field .cbi-dropdown {
min-width: 15rem;
}
+.cbi-value-field .cbi-input-select {
+ width: 15rem;
+}
+
.ifacebadge {
display: inline-flex;
border-bottom: 1px solid #CCCCCC;
padding: 0.5rem 1rem;
- -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
- -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+ background: #fff;
}
td > .ifacebadge,
@@ -858,12 +1025,17 @@ td > .ifacebadge,
font-size: 0.9rem;
}
+.ifacebadge > em,
.ifacebadge > img {
- float: right;
- margin: 0 0.3rem;
+ display: inline-block;
+ margin: 0 .2rem;
align-self: start;
}
+.ifacebadge > img + img {
+ margin: 0 .2rem 0 0;
+}
+
.network-status-table {
display: flex;
flex-wrap: wrap;
@@ -1038,8 +1210,8 @@ td > .ifacebadge,
}
.zonebadge > .ifacebadge {
- padding: 0.2rem 1rem;
- margin: 0.3rem;
+ padding: .2rem .3rem;
+ margin: 0.1rem 0.2rem;
border: 1px solid #6C6C6C;
}
@@ -1049,6 +1221,12 @@ td > .ifacebadge,
margin-top: 0.3rem;
}
+.zonebadge > em,
+.zonebadge > strong {
+ margin: 0 0.2rem;
+ display: inline-block;
+}
+
.cbi-value-field .cbi-input-checkbox,
.cbi-value-field .cbi-input-radio {
margin-top: 0.5rem;
@@ -1073,10 +1251,14 @@ td > .ifacebadge,
margin-top: -0.5rem;
}
-.cbi-section-table-row > .cbi-value-field .cbi-input-select {
+.cbi-section-table-row > .cbi-value-field .cbi-dropdown {
min-width: 7rem;
}
+.cbi-section-table-row > .cbi-value-field .cbi-input-select {
+ width: 7rem;
+}
+
.cbi-section-create > .cbi-button-add {
margin: 0.5rem;
}
@@ -1607,8 +1789,6 @@ body.lang_pl.node-main-login .cbi-value-title {
line-height: 1;
font-family: inherit;
min-width: inherit;
- overflow-x: auto;
- overflow-y: hidden;
border-radius: 0;
background-color: #FFF;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
@@ -1627,33 +1807,36 @@ body.lang_pl.node-main-login .cbi-value-title {
@media screen and (min-width: 992px) {
.cbi-value input[type="password"],
- .cbi-value input[type="text"] {
- min-width: 20rem;
+ .cbi-value input[type="text"],
+ .cbi-value-field .cbi-input-select {
+ width: 20rem;
}
- .cbi-value-field .cbi-input-select {
+ .cbi-value-field .cbi-dropdown {
min-width: 20rem;
}
}
@media screen and (min-width: 1280px) {
.cbi-value input[type="password"],
- .cbi-value input[type="text"] {
- min-width: 22rem;
+ .cbi-value input[type="text"],
+ .cbi-value-field .cbi-input-select {
+ width: 22rem;
}
- .cbi-value-field .cbi-input-select {
+ .cbi-value-field .cbi-dropdown {
min-width: 22rem;
}
}
@media screen and (min-width: 1600px) {
.cbi-value input[type="password"],
- .cbi-value input[type="text"] {
- min-width: 25rem;
+ .cbi-value input[type="text"],
+ .cbi-value-field .cbi-input-select {
+ width: 25rem;
}
- .cbi-value-field .cbi-input-select {
+ .cbi-value-field .cbi-dropdown {
min-width: 25rem;
}
}