diff options
| author | Hugo Hörnquist <hugo@lysator.liu.se> | 2020-08-17 19:38:05 +0200 |
|---|---|---|
| committer | Hugo Hörnquist <hugo@lysator.liu.se> | 2020-08-17 19:38:05 +0200 |
| commit | 994f355fa00f47dbbdd0166594be3c44e39cdcb6 (patch) | |
| tree | 1fabc071149795c5d948339f31aa015ae70cf558 | |
| parent | fixes. (diff) | |
| download | calp-994f355fa00f47dbbdd0166594be3c44e39cdcb6.tar.gz calp-994f355fa00f47dbbdd0166594be3c44e39cdcb6.tar.xz | |
Move tab positioning to stylesheet.
| -rw-r--r-- | module/html/components.scm | 7 | ||||
| -rw-r--r-- | static/style.scss | 1 |
2 files changed, 7 insertions, 1 deletions
diff --git a/module/html/components.scm b/module/html/components.scm index 68c8e763..2580ea55 100644 --- a/module/html/components.scm +++ b/module/html/components.scm @@ -101,8 +101,13 @@ `(div (@ (class "tab")) (input (@ (type "radio") (id ,id) (name ,tabgroup) ,@(when (zero? i) '((checked))))) + ;; It would be preferable to place the labels in a separate + ;; div and set that to have fixed position, since we could + ;; then just flow them. That hovever doesn't work since we + ;; need a css-selector for the label to the selected radio + ;; option. (label (@ ,@(assq-merge `((for ,id) - (style "top: " ,(* 6 i) "ex")) + (style "top: calc(var(--tab-size) * " ,i ")")) (kvlist->assq args))) ,key) (div (@ (class "content")) ,body))))) diff --git a/static/style.scss b/static/style.scss index 2e30f029..1d47691a 100644 --- a/static/style.scss +++ b/static/style.scss @@ -761,6 +761,7 @@ along with their colors. position: relative; width: 100%; resize: both; + --tab-size: 6ex; } .tab { |