Refactoring of style files
Change-Id: I56d3641741f2289bb0f9dbaf641b85a401cf1042
diff --git a/dev/scss/base/form.scss b/dev/scss/base/form.scss
index d5c9aba..6fc75dc 100644
--- a/dev/scss/base/form.scss
+++ b/dev/scss/base/form.scss
@@ -1,4 +1,9 @@
-// This class defines form views
+@import "lengths";
+@import "colors";
+
+/**
+ * Definition of form elements for Kalamar.
+ */
.form-table {
display: block;
@@ -8,11 +13,9 @@
border-width: 0;
padding: 0;
margin: 0;
- // margin-left: 5em;
- }
-
- fieldset > div {
- white-space: nowrap;
+ > div {
+ white-space: nowrap;
+ }
}
legend {
@@ -22,7 +25,8 @@
border-radius: $standard-border-radius;
}
- label, input[type=radio] {
+ label,
+ input[type=radio] {
font-size: 80%;
}
@@ -31,63 +35,65 @@
text-align: left;
}
- label[for], input[type=submit], a.form-button {
+ label[for],
+ input[type=submit],
+ a.form-button {
margin-top: 2em;
}
- input, textarea, button, a.form-button {
+ input,
+ textarea,
+ button,
+ a.form-button {
border-radius: $standard-border-radius;
}
- input, textarea {
- border-color: $ids-grey-2;
+ input,
+ textarea {
+ border-color: $ids-grey-2;
background-color: $nearly-white;
- border-style: solid;
+ border-style: solid;
}
- input, textarea, select, a.form-button {
+ input,
+ textarea,
+ select,
+ a.form-button {
border-style: solid;
- display: inline-block;
- width: 20%;
- min-width: 20em;
- padding: $base-padding;
+ display: inline-block;
+ width: 20%;
+ min-width: 20em;
+ padding: $base-padding;
}
input[type=radio] {
- display: inline;
- text-aline: right;
+ display: inline;
+ text-aline: right;
background-color: red;
- width: auto;
- min-width: auto;
+ width: auto;
+ min-width: auto;
}
- input[readonly=readonly],textarea[readonly] {
- background-color: $light-orange; // rgba(0,0,0,0.5);
+ input[readonly=readonly],
+ textarea[readonly] {
+ background-color: $light-orange;
}
.field-with-error {
border-color: $ids-pink-1;
}
- /*
- input:not([type=radio]),
- button,
- a.form-button {
- height: 3em;
- }
-*/
-
input[type=submit],
button,
a.form-button {
- display: inline-block;
- cursor: pointer;
- border-width: thin;
- text-align: center;
+ display: inline-block;
+ cursor: pointer;
+ border-width: thin;
+ text-align: center;
background-color: $middle-green;
- border-color: $dark-green;
- font-size: 8pt;
- color: $dark-green;
+ border-color: $dark-green;
+ font-size: 8pt;
+ color: $dark-green;
}
a.form-button:hover {
@@ -95,13 +101,98 @@
}
label.field-required::after {
- color: $ids-blue-1;
- content:'*';
+ color: $ids-blue-1;
+ content: '*';
}
}
.button-abort {
background-color: $middle-orange !important;
- color: $darkest-orange !important;
- border-color: $darkest-orange !important;
+ color: $darkest-orange !important;
+ border-color: $darkest-orange !important;
+}
+
+button {
+ cursor: pointer;
+
+ + button {
+ right: 0;
+ }
+
+ &[type=submit] {
+ @include choose-item;
+ font-weight: normal;
+ padding: 0;
+ height: 100%;
+ top: 0;
+ width: $button-width;
+
+ > span:nth-of-type(1) {
+ @include blind;
+ }
+
+ &::after {
+ font-family: "FontAwesome";
+ }
+
+ border: $border-size solid $nearly-white;
+
+ &:hover,
+ &:focus {
+ @include choose-hover;
+ }
+
+ &::-moz-focus-inner {
+ border: none;
+ }
+
+ &:active {
+ @include choose-active;
+ }
+
+ /*
+ * This is just for styling the last button,
+ * in case there are more than one buttons.
+ */
+ &:last-of-type {
+ border: {
+ right-width: $border-size;
+ right-style: solid;
+ top-right-radius: $standard-border-radius;
+ bottom-right-radius: $standard-border-radius;
+ }
+ }
+ }
+}
+
+/**
+ * Checkbox styling
+ * http://stackoverflow.com/questions/4148499/how-to-style-checkbox-using-css
+ */
+.checkbox {
+ display: none;
+
+ + label {
+ cursor: pointer;
+
+ span {
+ display: inline-block;
+ border-radius: 4px;
+ width: 1em;
+ height: 1em;
+ line-height: 1em;
+ vertical-align: middle;
+ padding: 0;
+ margin-right: .2em;
+
+ &::after {
+ @include icon-font;
+ content: $fa-check;
+ }
+ }
+ }
+
+ &:checked + label span::after {
+ content: $fa-checked;
+ }
}