Refactor CSS classes a bit
* Rename output-options to editor-options (will have input ones later).
* Refactor common button properties into a button class.
Change-Id: I2d44818eb878630f98d7229965876c1d158c78db
Reviewed-on: https://fuchsia-review.googlesource.com/c/fidlbolt/+/557963
Reviewed-by: Mitchell Kember <mkember@google.com>
diff --git a/frontend/src/elm/Editors.elm b/frontend/src/elm/Editors.elm
index a7e3f5b..a61e929 100644
--- a/frontend/src/elm/Editors.elm
+++ b/frontend/src/elm/Editors.elm
@@ -349,7 +349,7 @@
optionsView : Form -> Form.Model -> (Msg -> msg) -> Html msg
optionsView form options toMsg =
Html.div
- [ Attributes.class "output-options" ]
+ [ Attributes.class "editor-options" ]
[ Form.view
form
[]
diff --git a/frontend/src/elm/Form.elm b/frontend/src/elm/Form.elm
index 6c32399..180ef33 100644
--- a/frontend/src/elm/Form.elm
+++ b/frontend/src/elm/Form.elm
@@ -523,7 +523,7 @@
-- handler, which we don't want.
Html.button
[ Attributes.type_ "button"
- , Attributes.class "form-button"
+ , Attributes.class "button form-button"
, Events.custom "click"
(Decode.succeed
{ message = msg
diff --git a/frontend/src/elm/Main.elm b/frontend/src/elm/Main.elm
index ba14c5e..a1bfbef 100644
--- a/frontend/src/elm/Main.elm
+++ b/frontend/src/elm/Main.elm
@@ -323,7 +323,7 @@
let
button title msg =
Html.button
- [ Attributes.class "controls-button"
+ [ Attributes.class "button controls-button"
, Attributes.type_ "button"
, Events.onClick msg
]
diff --git a/frontend/src/style.css b/frontend/src/style.css
index 894c79c..c870cdb 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -105,6 +105,20 @@
text-decoration: underline;
}
+.button {
+ background: var(--intense);
+ border: 1px solid var(--border);
+ border-radius: 5px;
+ cursor: pointer;
+ display: inline-block;
+ user-select: none;
+ -webkit-user-select: none;
+}
+
+.button:hover {
+ background: var(--intense-hover);
+}
+
.heading-fidl {
margin-left: 10px;
}
@@ -305,29 +319,20 @@
}
.form-button {
- background: var(--intense);
padding: 8px;
margin: 0 5px;
- border: 1px solid var(--border);
- border-radius: 5px;
- cursor: pointer;
- display: inline-block;
font: inherit;
color: inherit;
font-size: 14px;
}
-.form-button:hover {
- background: var(--intense-hover);
-}
-
-.output-options {
+.editor-options {
border-top: 1px solid var(--border);
background: var(--element);
min-height: 36px;
}
-.output-options .form-control {
+.editor-options .form-control {
display: inline-block;
padding: 10px 15px;
}