aboutsummaryrefslogtreecommitdiff
path: root/ext/css/material.css
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2021-03-27 13:21:34 -0400
committerGitHub <noreply@github.com>2021-03-27 13:21:34 -0400
commit422f011facc4beba59bbe66a80bcc6aeb3648c6b (patch)
treee161151d76895b283e33b3bcbb7ca21b9cb6a5b2 /ext/css/material.css
parentaf768624ac3a08dad11ceed3f009e942a84323af (diff)
Update hotkey settings design (#1564)
* Update PopupMenu event prevention * Use vars for button padding * Add button-inner-label style * Add input-button button * Update display of scope selection * Add hidden argument text input field * Remove unnecessary calls * Display a strike through the enabled button when no scopes are selected
Diffstat (limited to 'ext/css/material.css')
-rw-r--r--ext/css/material.css52
1 files changed, 49 insertions, 3 deletions
diff --git a/ext/css/material.css b/ext/css/material.css
index a5fcee29..efa5a730 100644
--- a/ext/css/material.css
+++ b/ext/css/material.css
@@ -798,10 +798,13 @@ button,
--button-current-background-color: var(--button-background-color);
--button-current-shadow: var(--button-shadow);
+ --button-padding-vertical: 0.5em;
+ --button-padding-horizontal: 1em;
+
border-width: var(--thin-border-size);
border-style: solid;
border-radius: 0.3em;
- padding: 0.5em 1em;
+ padding: var(--button-padding-vertical) var(--button-padding-horizontal);
font-weight: bold;
font-size: inherit;
font-family: inherit;
@@ -940,6 +943,35 @@ button.low-emphasis.danger {
--button-disabled-background-color: var(--danger-color-transparent0);
}
+/* Input button */
+button.input-button {
+ --button-content-color: var(--button-default-icon-color);
+ --button-border-color: var(--input-background-color);
+ --button-background-color: var(--input-background-color);
+ --button-hover-background-color: var(--input-background-color-dark);
+ --button-active-background-color: var(--input-background-color-darker);
+
+ --button-padding-vertical: 0;
+ --button-padding-horizontal: 0.5em;
+
+ text-align: left;
+ font-weight: normal;
+ border-style: none;
+ border-width: 0;
+ width: var(--input-width-large);
+ height: var(--input-height);
+ line-height: var(--input-height);
+ box-sizing: border-box;
+ position: relative;
+}
+button.input-button.input-with-suffix-button {
+ flex: 1 1 auto;
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ border-right-style: none;
+ z-index: 1;
+}
+
/* Input suffix button */
button.input-suffix-button {
--button-content-color: var(--button-default-icon-color);
@@ -985,6 +1017,16 @@ input[type=number][data-invalid=true]+button.input-suffix-button {
}
+/* Button inner label */
+.button-inner-label {
+ margin-top: calc(-1 * var(--button-padding-vertical));
+ margin-bottom: calc(-1 * var(--button-padding-vertical));
+ margin-left: calc(-1 * var(--button-padding-horizontal));
+ margin-right: calc(-1 * var(--button-padding-horizontal));
+ padding: var(--button-padding-vertical) var(--button-padding-horizontal);
+}
+
+
/* Material design icon button */
button.icon-button {
--button-content-color: var(--button-default-icon-color);
@@ -1140,7 +1182,9 @@ button.popup-menu-item {
--button-disabled-background-color: transparent;
--button-disabled-shadow: none;
- padding: 0.625em 1.5em;
+ --button-padding-vertical: 0.625em;
+ --button-padding-horizontal: 1.5em;
+
flex: 1 1 auto;
border-radius: 0;
border-style: none;
@@ -1174,7 +1218,9 @@ button.popup-menu-item:not([hidden]) {
}
:root[data-page-type=popup] .popup-menu.popup-menu-auto-size button.popup-menu-item,
.popup-menu.popup-menu-small button.popup-menu-item {
- padding: 0.5em 0.75em;
+ --button-padding-vertical: 0.5em;
+ --button-padding-horizontal: 0.75em;
+
font-size: var(--font-size-small);
}
.popup-menu-item-group {