diff --git a/webapp/src/assets/less/variables.less b/webapp/src/assets/less/variables.less index 739ec6cb..24b2f2d8 100644 --- a/webapp/src/assets/less/variables.less +++ b/webapp/src/assets/less/variables.less @@ -15,6 +15,8 @@ @darkened-primary-color: darken(@global-primary-background, 15%); @inverse-global-color: fade(@global-inverse-color, 80%); +@very-light-primary-color: lighten(@global-primary-background, 40%); + @global-border: #d5d5d5; // UIkit @@ -265,6 +267,32 @@ } } +/* + * Text + */ + +// A text label for an input control that is highlighted +.ofm-highlighted-label { + color: @darkened-primary-color; + // 500 is slightly more bold than normal text (400) and less than semi-bold (600) + font-weight: 500; +} + +// Reducing the ui-kit margins from 20px to 5px +.ofm-close-pars p{ + margin-bottom: 5px; +} + +// Use CSS "next-sibling combinator" to get p-tags following another tag at the same level. +.ofm-close-pars * + p{ + margin-top: 5px; +} + +.hook-inverse() { + .ofm-highlighted-label{ + color: @very-light-primary-color; + } +} /* * Links @@ -277,11 +305,29 @@ } .uk-alert-success{ - color: rgba(28, 131, 45); + color: rgb(28, 131, 45); background-color: rgba(130, 221, 145, 0.671); } } +// For links that shouldn't look styled like links (such as in menus) +.ofm-unstyled-link { + text-decoration: none; + cursor: pointer; + color: @global-color; +} + +.ofm-unstyled-link.disabled{ + cursor: default; + color: @global-muted-color; +} + +.hook-inverse() { + .ofm-unstyled-link{ + color: @inverse-global-color; + } +} + /* * Buttons */ diff --git a/webapp/src/components/genericComponents/iconButton.vue b/webapp/src/components/genericComponents/iconButton.vue new file mode 100644 index 00000000..79703c13 --- /dev/null +++ b/webapp/src/components/genericComponents/iconButton.vue @@ -0,0 +1,74 @@ + + + + + diff --git a/webapp/src/components/genericComponents/miniMenu.vue b/webapp/src/components/genericComponents/miniMenu.vue new file mode 100644 index 00000000..07cf23f9 --- /dev/null +++ b/webapp/src/components/genericComponents/miniMenu.vue @@ -0,0 +1,73 @@ + + + + + diff --git a/webapp/src/components/labThingsComponents/inputFromSchema.vue b/webapp/src/components/labThingsComponents/inputFromSchema.vue index f6c2d279..0622a40f 100644 --- a/webapp/src/components/labThingsComponents/inputFromSchema.vue +++ b/webapp/src/components/labThingsComponents/inputFromSchema.vue @@ -1,7 +1,9 @@