Objective
This article shows you how to adjust the font size on Youreka forms
Before you get started
This article might be helpful before you read further:
Use the following code snippet to adjust the font size on Youreka forms.
Before
After
/* All font sizes on this template are set to be relative
to the .slds-scope class font-size. If you want to change everything
proportionally, change just the font-size in the .slds-scope class.
If you want to change font-sizes relative other ones, change
the indvidual styles below. */
/* NOTE: The "em" unit of measure is porportional to the parent size.
For Example, if .slds-scope has a font-size of 14px, a another class
that has a size of 2em will have a font-size of 28px on the page
(e.g. 2 x 14).*/
/********* Set proportional size here *********/
.slds-scope {
font-size: 24px !important;
}
/********* Set relative sizes below *********/
/* Template Name */
.slds-scope #formContent h1.formName {
font-size: 2.285em;
}
/* Form Name */
.slds-scope #formContent h3.slds-text-heading_small {
font-size: 1.286em;
}
/* Save Buttons Sizes */
.slds-scope .buttons-fixed button {
line-height: 2.5em;
}
/* Go To Page Select */
.slds-scope .buttons-fixed .slds-select.goToPage,
.slds-scope .buttons-fixed .pagination-container .slds-select_container,
.slds-scope .buttons-fixed .pagination-container .slds-select_container select {
width: 7.15em;
height: 2.44em;
}
/* Select Arrows */
.slds-scope #mainForm .slds-select_container:before,
.slds-scope #mainForm .slds-select_container:after {
border-left-width: 0.214em;
border-right-width: 0.214em;
}
.slds-scope #mainForm .slds-select_container:before {
border-bottom-width: 0.357em;
top: calc((2.429em / 2) - 0.429em);
}
.slds-scope #mainForm .slds-select_container:after {
border-top-width: 0.357em;
bottom: calc((2.429em / 2) - 0.429em);
}
/* Padding for top of form */
div.currentPageContainer {
padding-top: 5em;
}
/* Icon Sizes */
.slds-scope svg.slds-button__icon {
height: 1.143em;
width: 1.143em;
}
/* Input Heights */
.slds-scope .slds-form-element__control input,
.slds-scope .form-section .control-group .controls select {
height: 2.5em;
}
/* Attachment Upload Button Font Size */
.slds-scope span.slds-button {
line-height: 2.43em;
}
/* Section Header Font Size */
.form-section.slds-card h2 {
font-size: 1.28em;
}
/* Question Text vertical position */
.form-section.slds-card .control-label {
padding-top: 0.35em;
}
/* Attachment Upload Button */
.slds-scope button.slds-button {
line-height: 2.385em;
}
/* Checkbox/Radio Button Size */
.slds-scope .slds-form-element__control .slds-radio .slds-radio_faux,
.slds-scope .slds-form-element__control .slds-checkbox .slds-checkbox_faux {
width: 1em;
height: 1em;
}
/* Checkbox/Radio Button Option Label Text Size */
.slds-scope .slds-form-element__control .slds-radio .slds-form-element__label,
.slds-scope .slds-form-element__control .slds-checkbox .slds-form-element__label {
font-size: 1em;
}
/* Checkbox & Radio Button check size */
.slds-scope .slds-form-element__control .slds-radio [type="radio"]:checked + .slds-radio_faux::after,
.slds-scope .slds-form-element__control .slds-radio [type="radio"]:checked ~ .slds-radio_faux::after
.slds-scope .slds-form-element__control .slds-checkbox [type="checkbox"]:checked + .slds-checkbox_faux::after,
.slds-scope .slds-form-element__control .slds-checkbox [type="checkbox"]:checked ~ .slds-checkbox_faux::after {
border-bottom-width: 0.143em;
border-left-width: 0.143em;
height: 0.286em;
width: 0.59em;
}
/* E-Signature Height */
.slds-scope .sig-answer-container.sig-empty {
height: 4.286em;
}
/* Date Input Selector Icon */
.slds-scope .slds-form-element .input-glyphicon-calendar {
padding-top: 0.5em;
}
/* Input Width */
.slds-scope .controls .ms-selectable, /* Multi-select Picklist Container */
.slds-scope .controls .ms-selectable ol, /* Multi-select Picklist */
.slds-scope #mainForm .slds-form-element.long-text-container, /* Long Text Container */
.slds-scope #mainForm .slds-form-element.OR-form-element_width, /* Long Text */
.slds-scope #mainForm .slds-form-element.OR-form-element_width .slds-form-element__control, /* General Input Container */
.slds-scope #mainForm .slds-form-element.OR-form-element_width .slds-form-element__control input, /* General Input */
.slds-scope .slds-form-element.OR-form-element_width .slds-form-element__control .slds-select_container, /* Select Container */
.slds-scope .slds-form-element.OR-form-element_width .slds-form-element__control .slds-select_container select, /* Select */
.slds-scope #mainForm .slds-form-element.OR-form-element_width .slds-form-element__control .slds-select_container select option { /* Select Options */
width: 17.857em;
max-width: 100%;
}
@media screen and (max-width: 680px) {
.slds-scope #mainForm .form-section textarea.slds-textarea {
min-width: 98%;
}
}
Comments
0 comments
Please sign in to leave a comment.