mixin

Utility classes for applying font styles

k.adaptiveText

Styling for the adaptive text construction to create textareas and inputs that grow based on their contents. Used in the default defaultStyles mixin, but can be used separately if you only want to include specific framework css.

Context

scss

.adaptive{
  display:grid;
  grid-template-columns: auto;
  grid-template-rows: auto;
  grid-template-areas: "content";
  position:relative;
  >*{
    grid-area: content;
  }
  > span{
    opacity: 0;
    z-index: -10;
    @include borderPlaceholders.base-border;
    text-transform: initial;
    border-radius:0px;
  }
}
.adaptive--text{
  min-height:4rem;
}
.adaptive--text__span{
  white-space: pre-wrap;
  padding:2px;
}
.adaptive--text__textarea{
  width:100%;
  height:100%;
  resize: none;
}
.adaptive--text__textarea,
.adaptive--input__input{
  position:absolute;
}
.adaptive--input__input{
  width:100%;
}
.adaptive--input__span{
  padding:2px;
  min-height:1.5rem;
}

.adaptive{
  display:grid;
  grid-template-columns: auto;
  grid-template-rows: auto;
  grid-template-areas: "content";
  position:relative;
  >*{
    grid-area: content;
  }
  > span{
    opacity: 0;
    z-index: -10;
    @include borderPlaceholders.base-border;
    text-transform: initial;
    border-radius:0px;
  }
}
.adaptive--text{
  min-height:4rem;
}
.adaptive--text__span{
  white-space: pre-wrap;
  padding:2px;
}
.adaptive--text__textarea{
  width:100%;
  height:100%;
  resize: none;
}
.adaptive--text__textarea,
.adaptive--input__input{
  position:absolute;
}
.adaptive--input__input{
  width:100%;
}
.adaptive--input__span{
  padding:2px;
  min-height:1.5rem;
}

k.Animation variables

These variables control how the default translations included with the scaffold function

Context

scss

--revealTime:500ms;
--revealFunction: ease-in-out;
--revealTrans: var(--revealTime) var(--revealFunction);

--revealTime:500ms;
--revealFunction: ease-in-out;
--revealTrans: var(--revealTime) var(--revealFunction);

k.base-border

Basic border styling for elements

Context

scss

border-width: 1px 3px;
border-style: solid;
border-radius: 5px;
border-color: transparent;
box-sizing: border-box;

border-width: 1px 3px;
border-style: solid;
border-radius: 5px;
border-color: transparent;
box-sizing: border-box;

k.base-button

The basic stylings for a button like object. Provides some basic coloring, shadowing, and hover/active state styling

Context

scss

background-color: #DCDCDC33;
border-radius: 5px;
box-shadow: 0 2px 4px black;
border-width: 0;
transition: {
	property:box-shadow,backdrop-filter;
	duration:200ms;
	timing-function:ease-out;
};
backdrop-filter:blur(1px);
overflow:hidden;
&:is(:hover,:focus){
	background-color: #85858580;
	box-shadow: 0 4px 6px black;
	backdrop-filter:blur(2px);
}
&:active{
	background-color: #858585ff;
	box-shadow: 0 1px 2px black;
	backdrop-filter:blur(0px);
}

background-color: #DCDCDC33;
border-radius: 5px;
box-shadow: 0 2px 4px black;
border-width: 0;
transition: {
	property:box-shadow,backdrop-filter;
	duration:200ms;
	timing-function:ease-out;
};
backdrop-filter:blur(1px);
overflow:hidden;
&:is(:hover,:focus){
	background-color: #85858580;
	box-shadow: 0 4px 6px black;
	backdrop-filter:blur(2px);
}
&:active{
	background-color: #858585ff;
	box-shadow: 0 1px 2px black;
	backdrop-filter:blur(0px);
}

k.baseHeader

Basic styling for headers.

Context

scss

@include baseText;
color:var(--fontColor);
display: block;
white-space: nowrap;
margin-top: 0px;
margin-bottom: 0px;
font-weight:normal;

@include baseText;
color:var(--fontColor);
display: block;
white-space: nowrap;
margin-top: 0px;
margin-bottom: 0px;
font-weight:normal;

k.Border variables

These variables control aspects of the borders in the k-scaffold

Context

scss

--borderWidth:1px;
--borderStyle:solid;

--borderWidth:1px;
--borderStyle:solid;

k.borderStyles

Utility classes that are provided to easily apply a variety of border styles to your elements.

Context

scss

.boxed,
.sheet-boxed{
  @include boxed;
  &.thick-left{
    border-left-width: 5px;
  }
  &.thick-bottom{
    border-bottom-width: 5px;
  }
  &.thick-right{
    border-right-width: 5px;
  }
  &.thick-top{
    border-top-width: 5px;
  }
}
.underlined,
.sheet-underlined{
  @include base-border;
  border-radius: 0;
  border-bottom: 1px solid var(--borderColor);
  transition: border-radius border var(--revealTrans);
}
:is(.underlined,.boxed){
  &:not([readonly]):not([type='checkbox']):not([type='radio']):is(:hover, :focus,:focus-within){
    @include inputHighlight;
  }
  &:not([readonly]):not([type='checkbox']):not([type='radio']):is(:focus,:focus-within){
    background-color: var(--disabledColor);
  }
}
.underlined--invisible{
  border-color:transparent !important;
}

.boxed,
.sheet-boxed{
  @include boxed;
  &.thick-left{
    border-left-width: 5px;
  }
  &.thick-bottom{
    border-bottom-width: 5px;
  }
  &.thick-right{
    border-right-width: 5px;
  }
  &.thick-top{
    border-top-width: 5px;
  }
}
.underlined,
.sheet-underlined{
  @include base-border;
  border-radius: 0;
  border-bottom: 1px solid var(--borderColor);
  transition: border-radius border var(--revealTrans);
}
:is(.underlined,.boxed){
  &:not([readonly]):not([type='checkbox']):not([type='radio']):is(:hover, :focus,:focus-within){
    @include inputHighlight;
  }
  &:not([readonly]):not([type='checkbox']):not([type='radio']):is(:focus,:focus-within){
    background-color: var(--disabledColor);
  }
}
.underlined--invisible{
  border-color:transparent !important;
}

k.boxed

Styling for elements that should have a box around them

Context

scss

border: 2px solid var(--borderColor);
border-radius:0;
box-sizing:border-box;

border: 2px solid var(--borderColor);
border-radius:0;
box-sizing:border-box;

k.button

Ensures our buttons use the pointer cursor and that our roller construct buttons use the proper styling.

Context

scss

button{
  cursor: pointer;
}
	.roller{
		@include roller;
	}

button{
  cursor: pointer;
}
	.roller{
		@include roller;
	}

k.checked

Mixin for applying our checked styling to something

Context

scss

background-color:var(--checkedBackColor);
&:before{
  content: var(--checkContent);
  grid-area:content;
  font-weight:var(--checkWeight);
  place-self:start center;
  color: var(--checkColor);
  font-size: var(--checkSize);
  line-height: var(--checkLineHeight);
}

background-color:var(--checkedBackColor);
&:before{
  content: var(--checkContent);
  grid-area:content;
  font-weight:var(--checkWeight);
  place-self:start center;
  color: var(--checkColor);
  font-size: var(--checkSize);
  line-height: var(--checkLineHeight);
}

k.checked variables

These variables control aspects of the checkbox and radio display in the k-scaffold.

Context

scss

--checkContent: '✓';
--checkWeight: bold;
--checkSize: 150%;
--checkLineHeight: calc(var(--checkSize) / 3);

--checkboxBorderWidth: var(--borderWidth);
--checkboxBorderStyle: var(--borderStyle);
--lm-checkboxBorderColor: var(--lm-borderColor);
--dm-checkboxBorderColor: var(--dm-borderColor);
--checkboxBorderColor: var(--lm-checkBorderColor);

--checkboxWidth: 14px;
--checkboxHeight: 14px;

--checkContent: '✓';
--checkWeight: bold;
--checkSize: 150%;
--checkLineHeight: calc(var(--checkSize) / 3);

--checkboxBorderWidth: var(--borderWidth);
--checkboxBorderStyle: var(--borderStyle);
--lm-checkboxBorderColor: var(--lm-borderColor);
--dm-checkboxBorderColor: var(--dm-borderColor);
--checkboxBorderColor: var(--lm-checkBorderColor);

--checkboxWidth: 14px;
--checkboxHeight: 14px;

k.clear

All input related items have their styling cleared to remove any Roll20 default styles. Note that all of your styles should be at a level higher than this mixin is used in.

Context

scss

select,
textarea,
input,
.uneditable-input,
label,
button {
  all: initial;
}

select,
textarea,
input,
.uneditable-input,
label,
button {
  all: initial;
}

k.collapse variables

Variables that control the styling of the collapse inputs

Context

scss

--expandedSymbol:'unfold_less';
--collapsedSymbol: 'unfold_more';

--collapseHoverOpacity: 1;
--collapseBaseOpacity: 0;

--lm-collapseExpandedColor:var(--lm-selectedColor);
--dm-collapseExpandedColor:var(--dm-selectedColor);
--collapseExpandedColor: var(--lm-collapseExpandedColor);

--lm-collapseCollapsedColor:var(--lm-unselectedColor);
--dm-collapseCollapsedColor:var(--dm-unselectedColor);
--collapseCollapsedColor: var(--lm-collapseCollapsedColor);

--expandedSymbol:'unfold_less';
--collapsedSymbol: 'unfold_more';

--collapseHoverOpacity: 1;
--collapseBaseOpacity: 0;

--lm-collapseExpandedColor:var(--lm-selectedColor);
--dm-collapseExpandedColor:var(--dm-selectedColor);
--collapseExpandedColor: var(--lm-collapseExpandedColor);

--lm-collapseCollapsedColor:var(--lm-unselectedColor);
--dm-collapseCollapsedColor:var(--dm-unselectedColor);
--collapseCollapsedColor: var(--lm-collapseCollapsedColor);

k.collapsible

The styling for basic collapsible/expandable sections.

Context

scss

.collapse-container{
  display:grid;
  position:relative;
}
.text-collapse{
  cursor:pointer;
  display:flex;
  justify-content:flex-start;
  align-items:center;
  &:before{
    content: var(--expandedSymbol);
    @include materialIcons.materialStyle;
  }
}
.text-collapse__text{
  display:inline;
}
.text-collapse__check{
  &:not(:checked) + .text-collapse{
    @include borderPlaceholders.inputHighlight;
  }
  &:checked + .text-collapse:before{
    content: var(--collapsedSymbol);
  }
}
.repitem,
.collapse-container{
  &:hover{
    > .collapse,.roll-container{
      opacity:var(--collapseHoverOpacity);
    }
  }
  > .collapse{
    opacity:var(--collapseBaseOpacity);
    position:absolute;
    right:-10px;
    top:0px;
    border:0px solid black;
    border-radius:0;
    color:var(--collapseExpandedColor);
    text-transform:none;
    background-color:transparent;
    &:before{
      content:'y';
      font-family:pictos;
    }
    &:checked{
      color:var(--collapseCollapsedColor);
      background-color:transparent;
      ~ .expanded,
      ~ .collapse-container .expanded{
        display:none !important;
      }
      ~ .expanded--empty:is(:not([value]),[value='']) + *,
      ~ .collapse-container ~.expanded--empty:is(:not([value]),[value='']) + *{
        display:none !important;
      }
    }
    &:not(:checked){
      ~ .collapsed{
        display:none !important;
      }
    }
    &:hover{
      color:var(--collapseExpandedColor);
    }
  }
}
.repcontainer.editmode{
  .collapse{
    display:none;
  }
}

.collapse-container{
  display:grid;
  position:relative;
}
.text-collapse{
  cursor:pointer;
  display:flex;
  justify-content:flex-start;
  align-items:center;
  &:before{
    content: var(--expandedSymbol);
    @include materialIcons.materialStyle;
  }
}
.text-collapse__text{
  display:inline;
}
.text-collapse__check{
  &:not(:checked) + .text-collapse{
    @include borderPlaceholders.inputHighlight;
  }
  &:checked + .text-collapse:before{
    content: var(--collapsedSymbol);
  }
}
.repitem,
.collapse-container{
  &:hover{
    > .collapse,.roll-container{
      opacity:var(--collapseHoverOpacity);
    }
  }
  > .collapse{
    opacity:var(--collapseBaseOpacity);
    position:absolute;
    right:-10px;
    top:0px;
    border:0px solid black;
    border-radius:0;
    color:var(--collapseExpandedColor);
    text-transform:none;
    background-color:transparent;
    &:before{
      content:'y';
      font-family:pictos;
    }
    &:checked{
      color:var(--collapseCollapsedColor);
      background-color:transparent;
      ~ .expanded,
      ~ .collapse-container .expanded{
        display:none !important;
      }
      ~ .expanded--empty:is(:not([value]),[value='']) + *,
      ~ .collapse-container ~.expanded--empty:is(:not([value]),[value='']) + *{
        display:none !important;
      }
    }
    &:not(:checked){
      ~ .collapsed{
        display:none !important;
      }
    }
    &:hover{
      color:var(--collapseExpandedColor);
    }
  }
}
.repcontainer.editmode{
  .collapse{
    display:none;
  }
}

k.colors variables

Variables for defining colors in your sheet using light mode and dark mode

Context

scss

--lm-backColor:#fff;
--dm-backColor:var(--dark-surface1);
--backColor:var(--lm-backColor);

--lm-selectedColor:#000;
--dm-selectedColor:#007476;
--selectedColor:var(--lm-selectedColor);

--lm-unselectedColor1:lightgrey;
--dm-unselectedColor1:#0e0e0e;
--unselectedColor1:var(--lm-unselectedColor1);

--lm-unselectedColor2:transparent;
--dm-unselectedColor2:transparent;
--unselectedColor2:var(--lm-unselectedColor2);

--lm-checkColor:#000;
--dm-checkColor:#ff0000;
--checkColor:var(--lm-checkColor);
--lm-checkedBackColor:transparent;
--dm-checkedBackColor:transparent;
--checkedBackColor:var(--lm-checkedBackColor);

--lm-borderColor:#000;
--dm-borderColor:lightgrey;
--borderColor:var(--lm-borderColor);

--lm-fontColor:#0f0f0f;
--dm-fontColor:var(--dark-primarytext);
--fontColor:var(--lm-fontColor);

--lm-disabledColor:var(--lm-unselectedColor1);
--dm-disabledColor:var(--dm-unselectedColor1);
--disabledColor:var(--lm-disabledColor);

--lm-backColor:#fff;
--dm-backColor:var(--dark-surface1);
--backColor:var(--lm-backColor);

--lm-selectedColor:#000;
--dm-selectedColor:#007476;
--selectedColor:var(--lm-selectedColor);

--lm-unselectedColor1:lightgrey;
--dm-unselectedColor1:#0e0e0e;
--unselectedColor1:var(--lm-unselectedColor1);

--lm-unselectedColor2:transparent;
--dm-unselectedColor2:transparent;
--unselectedColor2:var(--lm-unselectedColor2);

--lm-checkColor:#000;
--dm-checkColor:#ff0000;
--checkColor:var(--lm-checkColor);
--lm-checkedBackColor:transparent;
--dm-checkedBackColor:transparent;
--checkedBackColor:var(--lm-checkedBackColor);

--lm-borderColor:#000;
--dm-borderColor:lightgrey;
--borderColor:var(--lm-borderColor);

--lm-fontColor:#0f0f0f;
--dm-fontColor:var(--dark-primarytext);
--fontColor:var(--lm-fontColor);

--lm-disabledColor:var(--lm-unselectedColor1);
--dm-disabledColor:var(--dm-unselectedColor1);
--disabledColor:var(--lm-disabledColor);

k.darkRoll

A mixin that switches the scaffold's roll template color variables (including sheet variables) over to dark mode specific ones. Should only be used directly inside a .sheet-rolltemplate-TEMPLATENAME rule.

Context

scss

&.sheet-rolltemplate-darkmode{
  @include darkMode;
  --inlineRollBackColor: var(--dm-inlineRollBackColor);
  --inlineRollColor: var(--fontColor);
  --inlineRollCritColor: var(--dm-inlineRollCritColor);
  --inlineRollFumbleColor: var(--dm-inlineRollCritColor);
  --inlineRollImportantColor: var(--dm-inlineRollCritColor);
}

&.sheet-rolltemplate-darkmode{
  @include darkMode;
  --inlineRollBackColor: var(--dm-inlineRollBackColor);
  --inlineRollColor: var(--fontColor);
  --inlineRollCritColor: var(--dm-inlineRollCritColor);
  --inlineRollFumbleColor: var(--dm-inlineRollCritColor);
  --inlineRollImportantColor: var(--dm-inlineRollCritColor);
}

k.defaultRollStyling

Mixin that includes all of the default styles as well as rolltemplate specific styling such as inline roll variable assignment. Should be included directly in the rolltemplate declaration for your roll templates.

Context

scss

@include defaultStyles;
@include rolltemplate.rollStyles;

@include defaultStyles;
@include rolltemplate.rollStyles;

k.defaultStyles

Mixin that includes all of the framework's styles. Should be included in a 3 class declaration for character sheets.

Context

scss

// Clear roll20 styles
@include genericStyle.clear;

// Basic Layout constructs
@include genericStyle.layout;
@include genericStyle.borderStyles;
@include genericStyle.sizesAndRatios;

// Text stylings
@include genericStyle.textElements;
@include genericStyle.materialIcons;
@include genericStyle.materialSymbols;
@include genericStyle.textStyles;
@include genericStyle.headerElements;
@include genericStyle.r20FontClasses;

// Input and button
@include attributeConstructs.inputBase;
@include attributeConstructs.button;
@include attributeConstructs.collapsible;
@include attributeConstructs.fillLeft;
@include labels.input-label;
@include labels.headed-textarea;
@include adaptive.adaptiveText;

@include fieldsetStyling.fieldsetStyling;
@include modalStyling.modalStyling;
@include tabsStyling.tabsStyling;

// Clear roll20 styles
@include genericStyle.clear;

// Basic Layout constructs
@include genericStyle.layout;
@include genericStyle.borderStyles;
@include genericStyle.sizesAndRatios;

// Text stylings
@include genericStyle.textElements;
@include genericStyle.materialIcons;
@include genericStyle.materialSymbols;
@include genericStyle.textStyles;
@include genericStyle.headerElements;
@include genericStyle.r20FontClasses;

// Input and button
@include attributeConstructs.inputBase;
@include attributeConstructs.button;
@include attributeConstructs.collapsible;
@include attributeConstructs.fillLeft;
@include labels.input-label;
@include labels.headed-textarea;
@include adaptive.adaptiveText;

@include fieldsetStyling.fieldsetStyling;
@include modalStyling.modalStyling;
@include tabsStyling.tabsStyling;

k.diceD10

Styling for items that need the dice d10 font

Context

scss

font-family: dicefontd10 !important;
text-transform: none !important;

font-family: dicefontd10 !important;
text-transform: none !important;

k.diceD12

Styling for items that need the dice d12 font

Context

scss

font-family: dicefontd12 !important;
text-transform: none !important;

font-family: dicefontd12 !important;
text-transform: none !important;

k.diceD20

Styling for items that need the dice d20 font

Context

scss

font-family: dicefontd20 !important;
text-transform: none !important;

font-family: dicefontd20 !important;
text-transform: none !important;

k.diceD30

Styling for items that need the dice d30 font

Context

scss

font-family: dicefontd30 !important;
text-transform: none !important;

font-family: dicefontd30 !important;
text-transform: none !important;

k.diceD4

Styling for items that need the dice d4 font

Context

scss

font-family: dicefontd4 !important;
text-transform: none !important;

font-family: dicefontd4 !important;
text-transform: none !important;

k.diceD6

Styling for items that need the dice d6 font

Context

scss

font-family: dicefontd6 !important;
text-transform: none !important;

font-family: dicefontd6 !important;
text-transform: none !important;

k.diceD8

Styling for items that need the dice d8 font

Context

scss

font-family: dicefontd8 !important;
text-transform: none !important;

font-family: dicefontd8 !important;
text-transform: none !important;

k.die-button

Basic styling for dice icon buttons using the dicefonts (e.g. dicefontd20).

Context

scss

@include base-button;
line-height: 14px;
/*height to vertically center a 2rem dicefontd10*/
font-size: 2rem;
font-weight: normal;
font-style: normal;
padding: 5px 3px 7px;

@include base-button;
line-height: 14px;
/*height to vertically center a 2rem dicefontd10*/
font-size: 2rem;
font-weight: normal;
font-style: normal;
padding: 5px 3px 7px;

k.fieldsetStyling

Styling for our various special fieldset constructions. e.g. customControlFieldset.

Context

scss

.repitem {
  >input:not([type='checkbox']) {
    width: 100%;
  }

  .headed-textarea,
  .description {
    grid-column: 1/-1;
  }
}

.repcontainer {
  display: grid;
  gap: var(--normal-gap);
}

.repeating-container {
  display: grid;
  grid-template-areas: 'header';
  align-self: start;

  >.header {
    grid-area: header;
  }
  :is(.repcontrol-button,.repcontrol_edit) {
    opacity: 0;
    transition: var(--revealTrans);
  }
  &:is(:hover, :focus-within, :focus) :is(.repcontrol-button,.repcontrol_edit) {
    opacity: 1;
  }
}

// Adding pseudo rep styling
.repcontrol-button {
  align-self: start;

  ~.repcontrol {
    justify-self: end;
    z-index: 100;

    >.repcontrol_add {
      display: none !important;
    }
  }
}

.repcontrol-button--add {
  justify-self: start;
  width: 15px;
  height: 15px;
  padding: 4px;
  font-size: 0;
  color: var(--col-alt);
  border: 1px solid var(--col-alt);

  &::before {
    inset: 0;
    place-self: center;
    font-family: var(--font-icon);
    font-size: 12px;
    content: 'add';
  }
}

//End pseudo rep styling

.repitem {
  >input:not([type='checkbox']) {
    width: 100%;
  }

  .headed-textarea,
  .description {
    grid-column: 1/-1;
  }
}

.repcontainer {
  display: grid;
  gap: var(--normal-gap);
}

.repeating-container {
  display: grid;
  grid-template-areas: 'header';
  align-self: start;

  >.header {
    grid-area: header;
  }
  :is(.repcontrol-button,.repcontrol_edit) {
    opacity: 0;
    transition: var(--revealTrans);
  }
  &:is(:hover, :focus-within, :focus) :is(.repcontrol-button,.repcontrol_edit) {
    opacity: 1;
  }
}

// Adding pseudo rep styling
.repcontrol-button {
  align-self: start;

  ~.repcontrol {
    justify-self: end;
    z-index: 100;

    >.repcontrol_add {
      display: none !important;
    }
  }
}

.repcontrol-button--add {
  justify-self: start;
  width: 15px;
  height: 15px;
  padding: 4px;
  font-size: 0;
  color: var(--col-alt);
  border: 1px solid var(--col-alt);

  &::before {
    inset: 0;
    place-self: center;
    font-family: var(--font-icon);
    font-size: 12px;
    content: 'add';
  }
}

//End pseudo rep styling

k.fillLeft

The styling for the functionality of the fillLeft pug mixin. This allows us to easily make radios/checkboxes that fill as the value increments.

Context

scss

.fill-left{
  display:var(--fillLeftDisplay);
  align-self:var(--fillLeftAlignment);
  box-sizing:border-box;
}
.fill-left__radio{
  appearance:none;
  -webkit-appearance:none;
  background-color:var(--fillLeftSelectedColor);
  width:100%;
  height:100%;
  cursor:pointer;
  &[data-value]:checked:before{
    content:attr(data-value);
    color:var(--fillLeftDataColor);
    font-size:var(--fillLeftDataSize);
    place-self:center;
    text-transform: var(--fillLeftDataTransform);
  }
  &:checked ~ .fill-left__radio{
    background-color:var(--fillLeftUnselectedColor);
  }
}

.fill-left{
  display:var(--fillLeftDisplay);
  align-self:var(--fillLeftAlignment);
  box-sizing:border-box;
}
.fill-left__radio{
  appearance:none;
  -webkit-appearance:none;
  background-color:var(--fillLeftSelectedColor);
  width:100%;
  height:100%;
  cursor:pointer;
  &[data-value]:checked:before{
    content:attr(data-value);
    color:var(--fillLeftDataColor);
    font-size:var(--fillLeftDataSize);
    place-self:center;
    text-transform: var(--fillLeftDataTransform);
  }
  &:checked ~ .fill-left__radio{
    background-color:var(--fillLeftUnselectedColor);
  }
}

k.fillLeft variables

Variables that control the style behavior of the fillLeft construction

Context

scss

--fillLeftDisplay: flex;
--fillLeftAlignment: center;

--fillLeftDataTransform: uppercase;
--fillLeftDataSize: var(--size6);

// Colors
--lm-fillLeftSelectedColor: var(--lm-selectedColor);
--dm-fillLeftSelectedColor: var(--dm-selectedColor);
--fillLeftSelectedColor: var(--lm-fillLeftSelectedColor);

--lm-fillLeftUnselectedColor: var(--lm-unselectedColor);
--dm-fillLeftUnselectedColor: var(--dm-unselectedColor);
--fillLeftUnselectedColor: var(--lm-fillLeftUnselectedColor);

--lm-fillLeftDataColor: var(--lm-backColor);
--dm-fillLeftDataColor: var(--dm-backColor);
--fillLeftDataColor: var(--lm-fillLeftDataColor);

--fillLeftDisplay: flex;
--fillLeftAlignment: center;

--fillLeftDataTransform: uppercase;
--fillLeftDataSize: var(--size6);

// Colors
--lm-fillLeftSelectedColor: var(--lm-selectedColor);
--dm-fillLeftSelectedColor: var(--dm-selectedColor);
--fillLeftSelectedColor: var(--lm-fillLeftSelectedColor);

--lm-fillLeftUnselectedColor: var(--lm-unselectedColor);
--dm-fillLeftUnselectedColor: var(--dm-unselectedColor);
--fillLeftUnselectedColor: var(--lm-fillLeftUnselectedColor);

--lm-fillLeftDataColor: var(--lm-backColor);
--dm-fillLeftDataColor: var(--dm-backColor);
--fillLeftDataColor: var(--lm-fillLeftDataColor);

k.font variables

Variables that control how font family, and font-size of text on the sheet.

Context

scss

// Font families
--font1:var(--topHeadFont);
--font2:var(--topHeadFont);
--font3:var(--midHeadFont);
--font4:var(--midHeadFont);
--font5:var(--midHeadFont);
--font6:var(--contentHeadFont);
--font7:var(--contentHeadFont);

// Font sizes
--baseFontSize: 16px;
--size1:300%;
--size2:250%;
--size3:200%;
--size4:150%;
--size5:125%;
--size6:100%;
--size7:87.5%;

// Default icon font size
--icon-size:24px;

//Default fonts used
--font-icon: 'Material Icons';

// Font families
--font1:var(--topHeadFont);
--font2:var(--topHeadFont);
--font3:var(--midHeadFont);
--font4:var(--midHeadFont);
--font5:var(--midHeadFont);
--font6:var(--contentHeadFont);
--font7:var(--contentHeadFont);

// Font sizes
--baseFontSize: 16px;
--size1:300%;
--size2:250%;
--size3:200%;
--size4:150%;
--size5:125%;
--size6:100%;
--size7:87.5%;

// Default icon font size
--icon-size:24px;

//Default fonts used
--font-icon: 'Material Icons';

k.h1-style

Base styling of h1 level headers

Context

scss

@include baseHeader;
@include importantHeader;
font-size: var(--size1);
font-family: var(--font1);
&:not(input){
  text-align: center;
}

@include baseHeader;
@include importantHeader;
font-size: var(--size1);
font-family: var(--font1);
&:not(input){
  text-align: center;
}

k.h2-style

Base styling of h2 level headers

Context

scss

@include baseHeader;
@include importantHeader;
font-size: var(--size2);
font-family: var(--font2);
&:not(input){
  text-align: center;
}

@include baseHeader;
@include importantHeader;
font-size: var(--size2);
font-family: var(--font2);
&:not(input){
  text-align: center;
}

k.h3-style

Base styling of h3 level headers

Context

scss

@include baseHeader;
@include importantHeader;
font-size: var(--size3);
font-family: var(--font3);
&:not(input){
  text-align: center;
}

@include baseHeader;
@include importantHeader;
font-size: var(--size3);
font-family: var(--font3);
&:not(input){
  text-align: center;
}

k.h4-style

Base styling of h4 level headers

Context

scss

@include baseHeader;
@include midHeader;
font-size: var(--size4);
font-family: var(--font4);
&:not(input){
  text-align: center;
}

@include baseHeader;
@include midHeader;
font-size: var(--size4);
font-family: var(--font4);
&:not(input){
  text-align: center;
}

k.h5-style

Base styling of h5 level headers

Context

scss

@include baseHeader;
@include midHeader;
font-size: var(--size5);
font-style:normal;
font-family: var(--font5);
&:not(input){
  text-align: center;
}

@include baseHeader;
@include midHeader;
font-size: var(--size5);
font-style:normal;
font-family: var(--font5);
&:not(input){
  text-align: center;
}

k.h6-style

Base styling of h6 level headers

Context

scss

@include baseHeader;
@include midHeader;
font-size: var(--size5);
font-style:normal;
font-family: var(--font5);
&:not(input){
  text-align: center;
}

@include baseHeader;
@include midHeader;
font-size: var(--size5);
font-style:normal;
font-family: var(--font5);
&:not(input){
  text-align: center;
}

k.headerElements

Header element styling is applied to normal header elements (h1 - h6) as well as elements that have an aria-level defined on them. Note that a role='heading' should also be defined on these html elements for full accessibility.

Context

scss

h1,
*[aria-level='1']{
  @include h1;
}
h2,
*[aria-level='2']{
  @include h2;
}
h3,
*[aria-level='3']{
  @include h3;
}
h4,
*[aria-level='4']{
  @include h4;
}
h5,
*[aria-level='5']{
  @include h5;
}
h6,
*[aria-level='6']{
  @include h6;
}

h1,
*[aria-level='1']{
  @include h1;
}
h2,
*[aria-level='2']{
  @include h2;
}
h3,
*[aria-level='3']{
  @include h3;
}
h4,
*[aria-level='4']{
  @include h4;
}
h5,
*[aria-level='5']{
  @include h5;
}
h6,
*[aria-level='6']{
  @include h6;
}

k.importantHeader

Headers that should pop!

Context

scss

text-transform: uppercase;

text-transform: uppercase;

k.input variables

Variables to control the display of input elements

Context

scss

--inputTopPadding: 2px;
--inputRightPadding: 2px;
--inputBottomPadding: 2px;
--inputLeftPadding: 2px;
--inputPadding:
  var(--inputTopPadding)
  var(--inputRightPadding)
  var(--inputBottomPadding)
  var(--inputLeftPadding);

--lm-placeholderColor:#ededed80;
--dm-placeholderColor:#3f3f3f80;
--placeholderColor: var(--lm-placeholderColor);

--textareaResize: vertical;

--inputTopPadding: 2px;
--inputRightPadding: 2px;
--inputBottomPadding: 2px;
--inputLeftPadding: 2px;
--inputPadding:
  var(--inputTopPadding)
  var(--inputRightPadding)
  var(--inputBottomPadding)
  var(--inputLeftPadding);

--lm-placeholderColor:#ededed80;
--dm-placeholderColor:#3f3f3f80;
--placeholderColor: var(--lm-placeholderColor);

--textareaResize: vertical;

k.inputBase

Basic input styling to ensure that the various inputs are ready for future styling

Context

scss

input{
  &[type='checkbox']{
    border: 1px solid var(--checkboxBorderColor);
    cursor: pointer;
    -webkit-appearance:none;
    appearance:none;
    width: var(--checkboxWidth);
    min-width: var(--checkboxWidth);
    height: var(--checkboxHeight);
    min-height: var(--checkboxHeight);
    display:grid;
    grid-template-columns:1fr;
    grid-template-areas:"content";
    &:not(.collapse):not(.fill-left__radio):checked{
      @include checked;
    }
  }
  &[type='number']{
    width: 3rem;
    -moz-appearance: textfield !important;
    text-align: center;
    &::-webkit-inner-spin-button,
    &::-webkit-outer-spin-button{
      -webkit-appearance: none;
      margin: 0;
    }
  }
}
select,
.pseudo-select span,
.sheet-pseudo-select span,
textarea,
input:not(:is([type='radio'],[type='checkbox'])),
.uneditable-input{
  padding: var(--inputPadding);
}
input:is([type="text"],[type="number"]),textarea{
  cursor:auto;
}
select,
.pseudo-select span,
.sheet-pseudo-select span,
input:not(:where([type='checkbox'], [type='radio'])),
.uneditable-input,
textarea{
  @include borderPlaceholders.base-border;
}
select,
.sheet-pseudo-select span,
.pseudo-select span{
  -webkit-apperance: none;
  appearance: none;
  text-transform: var(--selectTextTransform);
  overflow: hidden!important;
  white-space: nowrap;
  text-overflow: var(--selectTextOverflow);
  text-align: var(--selectTextAlign);
  color:var(--selectColor);
}
input{
  width: auto;
  &:placeholder{
    color: var(--placeholderColor);
  }
  &.plus-control:not([value*="-"])+span:before{
    content: '+';
  }
}
textarea{
  resize: var(--textareaResize);
  white-space: pre-wrap;
  &.fixed{
    resize: none;
    overflow: auto;
  }
}

input{
  &[type='checkbox']{
    border: 1px solid var(--checkboxBorderColor);
    cursor: pointer;
    -webkit-appearance:none;
    appearance:none;
    width: var(--checkboxWidth);
    min-width: var(--checkboxWidth);
    height: var(--checkboxHeight);
    min-height: var(--checkboxHeight);
    display:grid;
    grid-template-columns:1fr;
    grid-template-areas:"content";
    &:not(.collapse):not(.fill-left__radio):checked{
      @include checked;
    }
  }
  &[type='number']{
    width: 3rem;
    -moz-appearance: textfield !important;
    text-align: center;
    &::-webkit-inner-spin-button,
    &::-webkit-outer-spin-button{
      -webkit-appearance: none;
      margin: 0;
    }
  }
}
select,
.pseudo-select span,
.sheet-pseudo-select span,
textarea,
input:not(:is([type='radio'],[type='checkbox'])),
.uneditable-input{
  padding: var(--inputPadding);
}
input:is([type="text"],[type="number"]),textarea{
  cursor:auto;
}
select,
.pseudo-select span,
.sheet-pseudo-select span,
input:not(:where([type='checkbox'], [type='radio'])),
.uneditable-input,
textarea{
  @include borderPlaceholders.base-border;
}
select,
.sheet-pseudo-select span,
.pseudo-select span{
  -webkit-apperance: none;
  appearance: none;
  text-transform: var(--selectTextTransform);
  overflow: hidden!important;
  white-space: nowrap;
  text-overflow: var(--selectTextOverflow);
  text-align: var(--selectTextAlign);
  color:var(--selectColor);
}
input{
  width: auto;
  &:placeholder{
    color: var(--placeholderColor);
  }
  &.plus-control:not([value*="-"])+span:before{
    content: '+';
  }
}
textarea{
  resize: var(--textareaResize);
  white-space: pre-wrap;
  &.fixed{
    resize: none;
    overflow: auto;
  }
}

k.inputHighlight

Creates the default highlight styling for inputs/selects

Context

scss

border-width: 1px 3px;
border-style: solid;
border-color: var(--borderColor);
border-radius: 5px;
box-sizing: border-box;

border-width: 1px 3px;
border-style: solid;
border-color: var(--borderColor);
border-radius: 5px;
box-sizing: border-box;

k.label variables

Variables to control the display of the various label constructions

Context

scss

  --input-label-gap:var(--half-gap) var(--half-gap);
--input-label-text-transform: capitalize;

  --input-label-gap:var(--half-gap) var(--half-gap);
--input-label-text-transform: capitalize;

k.layout

Styling for the built-in layout out utility classes @group layout

Context

scss

// Flexbox variables
.flex-box,
.sheet-flex-box{
  display:flex;
}
.flex-wrap,
.sheet-flex-wrap{
  flex-wrap:wrap;
}
.justify-space-around,
.sheet-justify-space-around{
  justify-content:space-around;
}
.justify-space-between,
.sheet-justify-space-between{
  justify-content:space-between;
}
.justify-center,
.sheet-justify-center{
  justify-content:center;
}

.flex-min-content,
.sheet-flex-min-content{
  flex: 1 0 min-content;
}
.stacked{
  flex-direction:column;
  &.center>*{
    text-align: center;
  }
  &:not(.center){
    align-items:start;
  }
  > [name]:not([type="number"]):not([type="checkbox"]):not([type="radio"]){
    width:100%;
  }
}
.flex-column,
.sheet-flex-column{
  flex-direction: column;
}
.flex-row-reverse,
.sheet-flex-row-revers{
  flex-direction: row-reverse;
}
.flex-column-reverse,
.sheet-flex-column-reverse{
  flex-direction: column-reverse;
}

// Gap/Flex combined variables
.normal-gap,
.sheet-normal-gap{
  gap:var(--normal-gap);
}
.normal-gap-x,
.sheet-normal-gap-x{
  column-gap:var(--normal-gap-x);
}
.normal-gap-y,
.sheet-normal-gap-y{
  row-gap:var(--normal-gap-y);
}

.half-gap,
.sheet-half-gap{
  gap:var(--half-gap);
}
.half-gap-x,
.sheet-half-gap-x{
  column-gap:var(--half-gap-x);
}
.half-gap-y,
.sheet-half-gap-y{
  row-gap:var(--half-gap-y);
}

.tiny-gap,
.sheet-tiny-gap{
  gap:var(--tiny-gap);
}
.tiny-gap-x,
.sheet-tiny-gap-x{
  column-gap:var(--tiny-gap-x);
}
.tiny-gap-y,
.sheet-tiny-gap-y{
  row-gap:var(--tiny-gap-y);
}

.big-gap,
.sheet-big-gap{
  gap:var(--big-gap);
}
.big-gap-x,
.sheet-big-gap-x{
  column-gap:var(--big-gap-x);
}
.big-gap-y,
.sheet-big-gap-y{
  row-gap:var(--big-gap-y);
}

// Grid variables
.grid,
.sheet-grid{
  display:grid;
}

.grid-span-2,
.sheet-grid-span-2{
  grid-column:span 2;
}
.grid-span-all,
.sheet-grid-span-all{
  grid-column:1/-1;
}

.grid-column,
.sheet-grid-column{
  grid-auto-flow:column;
}
.grid-dense,
.sheet-grid-dense{
  grid-auto-flow:dense;
}

// Flexbox variables
.flex-box,
.sheet-flex-box{
  display:flex;
}
.flex-wrap,
.sheet-flex-wrap{
  flex-wrap:wrap;
}
.justify-space-around,
.sheet-justify-space-around{
  justify-content:space-around;
}
.justify-space-between,
.sheet-justify-space-between{
  justify-content:space-between;
}
.justify-center,
.sheet-justify-center{
  justify-content:center;
}

.flex-min-content,
.sheet-flex-min-content{
  flex: 1 0 min-content;
}
.stacked{
  flex-direction:column;
  &.center>*{
    text-align: center;
  }
  &:not(.center){
    align-items:start;
  }
  > [name]:not([type="number"]):not([type="checkbox"]):not([type="radio"]){
    width:100%;
  }
}
.flex-column,
.sheet-flex-column{
  flex-direction: column;
}
.flex-row-reverse,
.sheet-flex-row-revers{
  flex-direction: row-reverse;
}
.flex-column-reverse,
.sheet-flex-column-reverse{
  flex-direction: column-reverse;
}

// Gap/Flex combined variables
.normal-gap,
.sheet-normal-gap{
  gap:var(--normal-gap);
}
.normal-gap-x,
.sheet-normal-gap-x{
  column-gap:var(--normal-gap-x);
}
.normal-gap-y,
.sheet-normal-gap-y{
  row-gap:var(--normal-gap-y);
}

.half-gap,
.sheet-half-gap{
  gap:var(--half-gap);
}
.half-gap-x,
.sheet-half-gap-x{
  column-gap:var(--half-gap-x);
}
.half-gap-y,
.sheet-half-gap-y{
  row-gap:var(--half-gap-y);
}

.tiny-gap,
.sheet-tiny-gap{
  gap:var(--tiny-gap);
}
.tiny-gap-x,
.sheet-tiny-gap-x{
  column-gap:var(--tiny-gap-x);
}
.tiny-gap-y,
.sheet-tiny-gap-y{
  row-gap:var(--tiny-gap-y);
}

.big-gap,
.sheet-big-gap{
  gap:var(--big-gap);
}
.big-gap-x,
.sheet-big-gap-x{
  column-gap:var(--big-gap-x);
}
.big-gap-y,
.sheet-big-gap-y{
  row-gap:var(--big-gap-y);
}

// Grid variables
.grid,
.sheet-grid{
  display:grid;
}

.grid-span-2,
.sheet-grid-span-2{
  grid-column:span 2;
}
.grid-span-all,
.sheet-grid-span-all{
  grid-column:1/-1;
}

.grid-column,
.sheet-grid-column{
  grid-auto-flow:column;
}
.grid-dense,
.sheet-grid-dense{
  grid-auto-flow:dense;
}

k.layout variables

Variables to control basic layout of the k-scaffold

Context

scss

// Layout variables
// Variables to define our basic gap between layout elements. Followed by several gaps that are mathematically related to it.
--normal-gap-x:1rem;
--normal-gap-y:1rem;
--normal-gap: var(--normal-gap-x);

// Half gaps
--half-gap-x:calc(var(--normal-gap-x) / 2);
--half-gap-y:calc(var(--normal-gap-y) / 2);
--half-gap: var(--half-gap-x);

// Tiny gaps (1/4 gap)
--tiny-gap-x:calc(var(--half-gap-x) / 2);
--tiny-gap-y:calc(var(--half-gap-y) / 2);
--tiny-gap: var(--tiny-gap-x);

// Big gaps (double gap)
--big-gap-x:calc(var(--normal-gap-x) * 2);
--big-gap-y:calc(var(--normal-gap-y) * 2);
--big-gap: var(--big-gap-x);

// Layout variables
// Variables to define our basic gap between layout elements. Followed by several gaps that are mathematically related to it.
--normal-gap-x:1rem;
--normal-gap-y:1rem;
--normal-gap: var(--normal-gap-x);

// Half gaps
--half-gap-x:calc(var(--normal-gap-x) / 2);
--half-gap-y:calc(var(--normal-gap-y) / 2);
--half-gap: var(--half-gap-x);

// Tiny gaps (1/4 gap)
--tiny-gap-x:calc(var(--half-gap-x) / 2);
--tiny-gap-y:calc(var(--half-gap-y) / 2);
--tiny-gap: var(--tiny-gap-x);

// Big gaps (double gap)
--big-gap-x:calc(var(--normal-gap-x) * 2);
--big-gap-y:calc(var(--normal-gap-y) * 2);
--big-gap: var(--big-gap-x);

k.materialIcons

Utility classes that are provided to apply material icon styling to your elements

Context

scss

.sheet-material-icons,
.material-icons {
  @include materialStyle;
}

.sheet-material-icons,
.material-icons {
  @include materialStyle;
}

k.materialSymbols

Utility classes that are provided to apply material Symbol styling to your elements

Context

scss

.material-symbol,
.sheet-material-symbol{
  @include symbolStyle;
}

.material-symbol,
.sheet-material-symbol{
  @include symbolStyle;
}

k.midHeader

Headers that should be important, but not eye-catching

Context

scss

&:not(:where(input)){
  text-transform:capitalize;
}

&:not(:where(input)){
  text-transform:capitalize;
}

k.pictos3

Styling for items that need the pictos 3 font

Context

scss

font-family: pictos three;
text-transform: none;

font-family: pictos three;
text-transform: none;

k.pictosCustom

Styling for items that need the pictos custom font

Context

scss

font-family: pictos custom;
text-transform: none;

font-family: pictos custom;
text-transform: none;

k.r20FontClasses

Utility classes for applying the various dice and pictos fonts that are included on Roll20.

Context

scss

.sheet-pictos,
.pictos{
  @include pictos;
}
.pictos3,
.sheet-pictos3{
  @include pictos3;
}
.pictoscustom,
.sheet-pictoscustom{
  @include pictosCustom;
}
.d4,
.sheet-d4{
  @include diceD4;
}
.d6,
.sheet-d6{
  @include diceD6;
}
.d8,
.sheet-d8{
  @include diceD8;
}
.d10,
.sheet-d10{
  @include diceD10;
}
.d12,
.sheet-d12{
  @include diceD12;
}
.d20,
.sheet-d20{
  @include diceD20;
}
.d30,
.sheet-d30{
  @include diceD30;
}

.sheet-pictos,
.pictos{
  @include pictos;
}
.pictos3,
.sheet-pictos3{
  @include pictos3;
}
.pictoscustom,
.sheet-pictoscustom{
  @include pictosCustom;
}
.d4,
.sheet-d4{
  @include diceD4;
}
.d6,
.sheet-d6{
  @include diceD6;
}
.d8,
.sheet-d8{
  @include diceD8;
}
.d10,
.sheet-d10{
  @include diceD10;
}
.d12,
.sheet-d12{
  @include diceD12;
}
.d20,
.sheet-d20{
  @include diceD20;
}
.d30,
.sheet-d30{
  @include diceD30;
}

k.roller

Styling for our roll buttons

Context

scss

display: flex;
align-items: center;
gap: var(--half-gap);
&:before{
  content:'T';
  font-family:dicefontd20;
}

display: flex;
align-items: center;
gap: var(--half-gap);
&:before{
  content:'T';
  font-family:dicefontd20;
}

k.rollProperties

Mixin that creates the properties that should be assigned for inline rolls

Context

scss

// Background settings
background-color: var(--inlineRoll#{$type}BackColor);

// Font settings
color:var(--inlineRoll#{$type}Color);
font-family:var(--inlineRoll#{$type}Font);
font-size:var(--inlineRoll#{$type}Size);

// Spacing
padding: var(--inlineRoll#{$type}Padding);
border: var(--inlineRoll#{$type}Border);
margin: var(--inlineRoll#{$type}Margin);

// Background settings
background-color: var(--inlineRoll#{$type}BackColor);

// Font settings
color:var(--inlineRoll#{$type}Color);
font-family:var(--inlineRoll#{$type}Font);
font-size:var(--inlineRoll#{$type}Size);

// Spacing
padding: var(--inlineRoll#{$type}Padding);
border: var(--inlineRoll#{$type}Border);
margin: var(--inlineRoll#{$type}Margin);

k.select variables

Variables to control the display of selects

Context

scss

--lm-selectColor: var(--lm-fontColor);
--dm-selectColor: var(--dm-fontColor);
--selectColor: var(--lm-fontColor);

--selectTextOverflow: var(--textOverflow);
--selectTextAlign: center;
--selectTextTransform: capitalize;

--lm-selectColor: var(--lm-fontColor);
--dm-selectColor: var(--dm-fontColor);
--selectColor: var(--lm-fontColor);

--selectTextOverflow: var(--textOverflow);
--selectTextAlign: center;
--selectTextTransform: capitalize;

k.Sizes and Ratios

Utility classes for applying aspect ratios and sizes

Context

scss

.ratio1-1,
.sheet-ratio1-1{
  @include ratio1_1;
}

.ratio1-1,
.sheet-ratio1-1{
  @include ratio1_1;
}

k.symbolStyle

Mixin to add the necessary styling to use material icons.

Context

scss

font-family: 'Material Symbols Outlined';
font-weight: normal;
font-style: normal;
font-size: 24px;  /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
font-variation-settings: 'FILL' 1;

font-family: 'Material Symbols Outlined';
font-weight: normal;
font-style: normal;
font-size: 24px;  /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
font-variation-settings: 'FILL' 1;

k.text-button

Basic styling for buttons with text (or text and icons)

Context

scss

padding: 5px 7px;
@include base-button;

padding: 5px 7px;
@include base-button;

k.textElements

The styling that is applied to all text elements.

Context

scss

span,
input,
textarea,
button,
select{
  @include baseText;
  color: inherit;
  font-family: inherit;
  font-size:inherit;
  line-height:inherit;
}
@each $size in 1,2,3,4,5,6,7{
  .text-#{$size},
  .sheet-text-#{$size}{
    font-size: var(--size#{$size});
  }
}
.capitalize,
.sheet-capitalize{
  text-transform: capitalize !important;
}
.lowercase,
.sheet-lowercase{
  text-transform:lowercase !important;
}
.uppercase,
.sheet-uppercase{
  text-transform:uppercase !important;
}

span,
input,
textarea,
button,
select{
  @include baseText;
  color: inherit;
  font-family: inherit;
  font-size:inherit;
  line-height:inherit;
}
@each $size in 1,2,3,4,5,6,7{
  .text-#{$size},
  .sheet-text-#{$size}{
    font-size: var(--size#{$size});
  }
}
.capitalize,
.sheet-capitalize{
  text-transform: capitalize !important;
}
.lowercase,
.sheet-lowercase{
  text-transform:lowercase !important;
}
.uppercase,
.sheet-uppercase{
  text-transform:uppercase !important;
}

mixin ​

k.adaptiveText

Context

k.Animation variables

Context

k.base-border

Context

k.base-button

Context

k.baseHeader

Context

k.Border variables

Context

k.borderStyles

Context

k.boxed

Context

k.button

Context

k.checked

Context

k.checked variables

Context

k.clear

Context

k.collapse variables

Context

k.collapsible

Context

k.colors variables

Context

k.darkRoll

Context

k.defaultRollStyling

Context

k.defaultStyles

Context

k.diceD10

Context

k.diceD12

Context

k.diceD20

Context

k.diceD30

Context

k.diceD4

Context

k.diceD6

Context

k.diceD8

Context

k.die-button

Context

k.fieldsetStyling

Context

k.fillLeft

Context

k.fillLeft variables

Context

k.font variables

Context

k.h1-style

Context

k.h2-style

Context

k.h3-style

Context

k.h4-style

Context

k.h5-style

Context

k.h6-style

Context

k.headerElements

Context

k.importantHeader

Context

k.input variables

Context

k.inputBase

mixin