cleanup tobago.scss
* rearrange web component tags in alphabetical order
* put mixin at the top
* create mixin markupFatalErrWarnInfo()
* delete CSS for .form-horizontal: .form-horizontal is already removed from BootstrapClass.java
* .tobago-text-justify is only used in flowLayout
diff --git a/tobago-core/npm/scss/_tobago.scss b/tobago-core/npm/scss/_tobago.scss
index 2c0effd..9a8fc9a 100644
--- a/tobago-core/npm/scss/_tobago.scss
+++ b/tobago-core/npm/scss/_tobago.scss
@@ -40,6 +40,18 @@
$page-padding-top: 1rem;
/* main ---------------------------------------------------------- */
+@mixin adjustCustomControlLabel() {
+ .form-check-label {
+ &:after {
+ content: "";
+ }
+
+ img {
+ padding-right: 0.3em;
+ }
+ }
+}
+
@mixin buttonLinkDisabledCursor() {
&:disabled {
pointer-events: auto;
@@ -66,12 +78,37 @@
}
}
+@mixin inlinePadding() {
+ padding-top: calc(#{$input-padding-y} + #{$input-border-width});
+ padding-bottom: calc(#{$input-padding-y} + #{$input-border-width});
+}
+
@mixin linkWithoutUnderline() {
> .tobago-link {
text-decoration: none;
}
}
+@mixin markupFatalErrWarnInfo() {
+ &-markup-fatal, &-markup-error {
+ &.border-danger:focus {
+ box-shadow: 0 0 0 .2rem rgba($danger, .25);
+ }
+ }
+
+ &-markup-warn {
+ &.border-warning:focus {
+ box-shadow: 0 0 0 .2rem rgba($warning, .25);
+ }
+ }
+
+ &-markup-info {
+ &.border-info:focus {
+ box-shadow: 0 0 0 .2rem rgba($info, .25);
+ }
+ }
+}
+
@mixin tobagoTreeNodeToggle() {
.tobago-treeNode-toggle:not(.invisible) {
cursor: pointer;
@@ -161,16 +198,6 @@
}
}
-/* buttons, links ------------------------------------------------------- */
-.tobago-buttons {
-}
-
-tobago-buttons {
- > .tobago-button {
- display: inline-block;
- }
-}
-
/* button, link ------------------------------------------------------- */
.tobago-button {
@include buttonLinkDisabledCursor();
@@ -200,6 +227,15 @@
}
}
+.tobago-buttons {
+}
+
+tobago-buttons {
+ > .tobago-button {
+ display: inline-block;
+ }
+}
+
/* collapsible -------------------------------------------------------------- */
tobago-box.tobago-collapsed .card-body,
@@ -212,6 +248,7 @@
// XXX remove me
.tobago-date {
+ @include markupFatalErrWarnInfo();
}
tobago-date {
@@ -243,6 +280,45 @@
z-index: 2000 !important;
}
+/* dropdown ------------------------------------------------------- */
+tobago-dropdown {
+ @include dropdownMenuFormCheckComponents();
+
+ &.tobago-dropdown-submenu {
+ cursor: pointer;
+ position: relative;
+ width: 100%;
+ float: right;
+
+ &:hover {
+ background-color: $dropdown-link-hover-bg;
+
+ > .dropdown-menu {
+ display: block;
+ top: 0;
+ left: 100%;
+ margin-top: -0.5rem;
+ margin-left: -1px;
+ }
+ }
+
+ > .dropdown-item::after {
+ content: " ";
+ float: right;
+ border-color: transparent;
+ border-style: solid;
+ border-width: 5px 0 5px 5px;
+ border-left-color: #cccccc;
+ margin-top: 7px;
+ margin-right: -10px;
+ }
+ }
+}
+
+.tobago-dropdown-open, .tobago-dropdown-select {
+ // deprecated; must be added for test
+}
+
/* figure -------------------------------------------------------------- */
.tobago-figure {
@@ -301,6 +377,10 @@
/* flowLayout ---------------------------------------------------------- */
tobago-flow-layout {
+ &.tobago-text-justify {
+ /* added here, because Bootstrap has removed .text-justify */
+ text-align: justify !important;
+ }
}
/* focus --------------------------------------------------------------- */
@@ -382,6 +462,8 @@
}
.tobago-in {
+ @include markupFatalErrWarnInfo();
+
&:disabled {
color: rgba($input-color, $form-disabled-alpha);
}
@@ -401,6 +483,9 @@
color: #6610f2 !important;
}
+tobago-links {
+}
+
/* link ----------------------------------------------------------- */
.tobago-link {
@@ -458,9 +543,6 @@
padding-right: 0;
}
-tobago-links {
-}
-
/* messages / help text ----------------------------------------------- */
.tobago-messages-container {
display: flex;
@@ -500,6 +582,13 @@
}
}
+.tobago-margin-bottom {
+ /* Since bootstrap 5.0.0-alpha1 class "form-group" is removed. In the Bootstrap demo "form-group" is replaced with
+ "mb-3". But we shouldn't use "mb-3", because it's adding an "!important" to the margin-bottom. With "!important" added
+ custom styling is much more complicated. */
+ margin-bottom: 1rem;
+}
+
.tobago-messages {
$alert-icon-padding-x: $alert-padding-x / 1.25;
$alert-icon-width: $alert-icon-padding-x + 1rem + $alert-icon-padding-x;
@@ -557,41 +646,6 @@
display: block;
}
-/* dropdown ------------------------------------------------------- */
-tobago-dropdown {
- @include dropdownMenuFormCheckComponents();
-
- &.tobago-dropdown-submenu {
- cursor: pointer;
- position: relative;
- width: 100%;
- float: right;
-
- &:hover {
- background-color: $dropdown-link-hover-bg;
-
- > .dropdown-menu {
- display: block;
- top: 0;
- left: 100%;
- margin-top: -0.5rem;
- margin-left: -1px;
- }
- }
-
- > .dropdown-item::after {
- content: " ";
- float: right;
- border-color: transparent;
- border-style: solid;
- border-width: 5px 0 5px 5px;
- border-left-color: #cccccc;
- margin-top: 7px;
- margin-right: -10px;
- }
- }
-}
-
/* object ----------------------------------------------------------------- */
.tobago-object {
}
@@ -698,6 +752,18 @@
}
}
+/* menuStore -------------------------------------------------------- */
+.tobago-page-menuStore {
+ @include dropdownMenuFormCheckComponents();
+
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 0;
+ height: 0;
+ z-index: $zindex-popover;
+}
+
/* panel ------------------------------------------------------------- */
// todo: remove
@@ -728,6 +794,26 @@
tobago-range {
}
+.tobago-required label:after,
+label.tobago-required:after {
+ content: "*";
+ color: $danger;
+}
+
+/* section ----------------------------------------------------------- */
+tobago-section > div > {
+ h1, h2, h3, h4, h5, h6 {
+ > .fa:first-child, > img {
+ /* to separate the icon from the rest of the title */
+ margin-right: 0.7em;
+ }
+
+ display: flex;
+ justify-content: space-between;
+ align-content: center;
+ }
+}
+
/* stars rating ------------------------------------------------------------ */
tobago-stars {
display: block;
@@ -851,43 +937,11 @@
}
}
-/* section ----------------------------------------------------------- */
-
-tobago-section > div > {
- h1, h2, h3, h4, h5, h6 {
- > .fa:first-child, > img {
- /* to separate the icon from the rest of the title */
- margin-right: 0.7em;
- }
-
- display: flex;
- justify-content: space-between;
- align-content: center;
- }
-}
-
/* select ----------------------------------------------------------- */
.tobago-inputPseudo {
//deprecated should be removed
}
-@mixin adjustCustomControlLabel() {
- .form-check-label {
- &:after {
- content: "";
- }
-
- img {
- padding-right: 0.3em;
- }
- }
-}
-
-@mixin inlinePadding() {
- padding-top: calc(#{$input-padding-y} + #{$input-border-width});
- padding-bottom: calc(#{$input-padding-y} + #{$input-border-width});
-}
-
/* selectBooleanCheckbox ---------------------------------------------------- */
tobago-select-boolean-checkbox {
display: block;
@@ -909,6 +963,7 @@
//xxx remove me
.tobago-selectOneListbox {
+ @include markupFatalErrWarnInfo();
}
//xxx remove me
@@ -955,6 +1010,10 @@
.tobago-selectManyListbox-option {
}
+.tobago-selectManyListbox {
+ @include markupFatalErrWarnInfo();
+}
+
/* selectManyShuttle ----------------------------------------------------------- */
tobago-select-many-shuttle {
display: block;
@@ -1442,6 +1501,11 @@
margin-bottom: $spacer;
}
+/* FIXME: This is to hide the toolbar, until it is implemented */
+.tobago-tabGroup-toolBar {
+ display: none;
+}
+
/* tree ---------------------------------------------------------------------- */
.tobago-tree-expanded,
.tobago-tree-selected,
@@ -1506,107 +1570,9 @@
/* textarea --------------------------------------------------------- */
tobago-textarea textarea {
+ @include markupFatalErrWarnInfo();
+
&:disabled {
color: rgba($input-color, $form-disabled-alpha);
}
}
-
-/* facesMessages messageLayout focus shadows ------------------------ */
-
-// todo: check class vs. custom element
-
-.tobago-date,
-.tobago-in,
-.tobago-selectManyListbox,
- //.tobago-selectOneChoice, XXX
-.tobago-selectOneListbox,
-tobago-textarea textarea {
- &-markup-fatal, &-markup-error {
- &.border-danger:focus {
- box-shadow: 0 0 0 .2rem rgba($danger, .25);
- }
- }
-
- &-markup-warn {
- &.border-warning:focus {
- box-shadow: 0 0 0 .2rem rgba($warning, .25);
- }
- }
-
- &-markup-info {
- &.border-info:focus {
- box-shadow: 0 0 0 .2rem rgba($info, .25);
- }
- }
-}
-
-/* menuStore -------------------------------------------------------- */
-
-.tobago-page-menuStore {
- @include dropdownMenuFormCheckComponents();
-
- position: absolute;
- top: 0;
- left: 0;
- width: 0;
- height: 0;
- z-index: $zindex-popover;
-}
-
-/* Bootstrap workarounds ------------------------------------------------------------------ */
-
-/* fixes the problem, that input controls have 100% in the toolbar if they are not in a form,
- but in Tobago we have a global form.
- */
-/*
-.navbar .form-control {
- width: auto;
-}
-*/
-
-/*
-fixes missing space, I thinks normal Websites have a " " Space char in the source code, Tobago not.
-
-fixme: there is a problem with the selectManyShuttle with this style.
-*/
-
-.form-horizontal {
-
- > * { /* fixes vertical space, todo: why is is needed? is there a better way? */
- margin-top: 10px;
- margin-bottom: 5px;
- /* XXX MUST BE REMOVED */
- }
-
- .control-label {
- margin-top: 10px;
- margin-bottom: 5px;
- }
-}
-
-/* FIXME: This is to hide the toolbar, until it is implemented */
-.tobago-tabGroup-toolBar {
- display: none;
-}
-
-.tobago-required label:after,
-label.tobago-required:after {
- content: "*";
- color: $danger;
-}
-
-/* added here, because Bootstrap has removed .text-justify */
-.tobago-text-justify {
- text-align: justify !important;
-}
-
-.tobago-margin-bottom {
- /* Since bootstrap 5.0.0-alpha1 class "form-group" is removed. In the Bootstrap demo "form-group" is replaced with
- "mb-3". But we shouldn't use "mb-3", because it's adding an "!important" to the margin-bottom. With "!important" added
- custom styling is much more complicated. */
- margin-bottom: 1rem;
-}
-
-.tobago-dropdown-open, .tobago-dropdown-select {
- // deprecated; must be added for test
-}
