mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-31 04:02:29 +00:00
39 lines
2.0 KiB
Plaintext
39 lines
2.0 KiB
Plaintext
//- @pugdoc
|
|
name: adaptiveTextarea
|
|
description: Creates an html construction for creating a [content-scaled](https://wiki.roll20.net/CSS_Wizardry#Content-scaled_Inputs) textarea. You can apply classes and IDs to the container div by appending them to the mixin call (see the second example).
|
|
arguments:
|
|
- {object} textObj - The object describing the textarea as per the {@link textarea} mixin.
|
|
attributes:
|
|
example: |
|
|
include _htmlelements.pug
|
|
+adaptiveTextarea({name:'character description'})
|
|
|
|
//Appending the class directly to the mixin
|
|
+adaptiveTextarea({name:'character description'}).custom-class
|
|
mixin adaptiveTextarea(textObj)
|
|
.adaptive.adaptive--text&attributes(attributes)
|
|
- let spanObj = {name:textObj.name,class:'adaptive--text__span'};
|
|
- textObj.class = textObj.class ? `${textObj.class} adaptive--text__textarea` : 'adaptive--text__textarea';
|
|
+span(spanObj)
|
|
+textarea(textObj)
|
|
//- End Mixin
|
|
|
|
//- @pugdoc
|
|
name: adaptiveInput
|
|
description: Creates an html construction for creating a [content-scaled](https://wiki.roll20.net/CSS_Wizardry#Content-scaled_Inputs) input. You can apply classes and IDs to the container div by appending them to the mixin call (see the second example).
|
|
arguments:
|
|
- {object} inputObj - The object describing the input as per the {@link input} mixin. You can apply classes and IDs to the container div by appending them to the mixin call (see the second example).
|
|
attributes:
|
|
example: |
|
|
include _htmlelements.pug
|
|
+adaptiveInput({name:'character description',type:'text'})
|
|
|
|
//Appending class directly to the mixin
|
|
+adaptiveInput({name:'character description',type:'text'}).custom-class
|
|
mixin adaptiveInput(textObj)
|
|
.adaptive.adaptive--input&attributes(attributes)
|
|
- let spanObj = {name:textObj.name,class:'adaptive--input__span','max-width':maxWidth};
|
|
- textObj.class = textObj.class ? `${textObj.class} adaptive--input__input` : 'adaptive--input__input';
|
|
+span(spanObj)
|
|
+input(textObj)
|
|
//- End Mixin |