Noctia Utilities

Aspect Ratio

• .ratio-1-1
• .ratio-16-9
• .ratio-9-16
• .ratio-4-3
• .ratio-3-4
• .ratio-3-2
• .ratio-2-3

.ratio-x-y-i

.ratio-x-y-i { aspect-ratio: x / y !important; }

Font Family

:root {
    --noctia-sans: "Yu Gothic", "Meiryo", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --noctia-serif: "Hiragino Mincho Pro", "Yu Mincho", "MS PMincho", Georgia, "Times New Roman", Times, serif;
    --noctia-mono: "Yu Gothic UI", "MS Gothic", "Courier New", Courier, monospace;
}

.font-sans { font-family: var(--noctia-sans) !important; }
.font-serif { font-family: var(--noctia-serif) !important; }
.font-mono { font-family: var(--noctia-mono) !important; }

• .font-sans
• .font-serif
• .font-mono

Font Size

.text-small { font-size: 0.875rem !important; }
.text-normal { font-size: 1rem !important; }
.text-medium { font-size: 1.125rem !important; }
.text-large { font-size: 1.25rem !important; }
.text-xlarge { font-size: 1.5rem !important; }

• .text-small
• .text-normal
• .text-medium
• .text-large
• .text-xlarge

Font Weight & Font Style

.font-normal { font-weight: normal !important; }
.font-bold { font-weight: bold !important; }
.font-italic { font-style: italic !important; }

• .font-normal
• .font-bold
• .font-italic

Line Height

.line-h-normal { line-height: normal !important; }
.line-h-1 { line-height: 1 !important; }
.line-h-1-4 { line-height: 1.4 !important; }
.line-h-1-5 { line-height: 1.5 !important; }
.line-h-1-6 { line-height: 1.6 !important; }
.line-h-2 { line-height: 2 !important; }

• .line-h-normal
• .line-h-1
• .line-h-1-4
• .line-h-1-5
• .line-h-1-6
• .line-h-2

Text Align

.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }

• .text-left
• .text-center
• .text-right

Text Decoration

.text-dec-none { text-decoration: none !important; }
.text-dec-under { text-decoration: underline !important; }
.text-dec-line-through { text-decoration: line-through !important; }

• .text-dec-none
• .text-dec-under
• .text-dec-line-through

White Space

.text-pre { white-space: pre !important; }
.text-pre-wrap { white-space: pre-wrap !important; }

• .text-pre（This is a test sentence. It includes long words such as Supercalifragilisticexpialidocious and Pneumonoultramicroscopicsilicovolcanoconiosis, and uses SampleText123 to check display and layout. We will verify functionality with Version 2.0 and also test how difficult-to-fit words like ExtraordinaryLongWordExample are handled）

• .text-pre-wrap（This is a test sentence. It includes long words such as Supercalifragilisticexpialidocious and Pneumonoultramicroscopicsilicovolcanoconiosis, and uses SampleText123 to check display and layout. We will verify functionality with Version 2.0 and also test how difficult-to-fit words like ExtraordinaryLongWordExample are handled）

Word Wrap & Word Break

.text-wrap { overflow-wrap: break-word !important; }

.word-break-all { word-break: break-all !important; }
.word-break-keep { word-break: keep-all !important; }

.text-fixed-break {
    overflow-wrap: break-word !important;
    word-break: break-all !important;
}

• .text-wrap（This is a test sentence. It includes long words such as Supercalifragilisticexpialidocious and Pneumonoultramicroscopicsilicovolcanoconiosis）
• .word-break-all（This is a test sentence. It includes long words such as Supercalifragilisticexpialidocious and Pneumonoultramicroscopicsilicovolcanoconiosis）
• .word-break-keep（This is a test sentence. It includes long words such as Supercalifragilisticexpialidocious and Pneumonoultramicroscopicsilicovolcanoconiosis）
• .text-fixed-break（This is a test sentence. It includes long words such as Supercalifragilisticexpialidocious and Pneumonoultramicroscopicsilicovolcanoconiosis）

Text Overflow

.text-ellipsis {
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}

• .text-ellipsis（This is a test sentence. It includes long words such as Supercalifragilisticexpialidocious and Pneumonoultramicroscopicsilicovolcanoconiosis, and uses SampleText123 to check display and layout. We will verify functionality with Version 2.0 and also test how difficult-to-fit words like ExtraordinaryLongWordExample are handled）

Size

.border-none { border: none !important; }
.border-0-5 { border: 0.5px solid var(--noctia-base-border-color) !important; }
.border-1 { border: 1px solid var(--noctia-base-border-color) !important; }
.border-2 { border: 2px solid var(--noctia-base-border-color) !important; }
.border-4 { border: 4px solid var(--noctia-base-border-color) !important; }
.border-8 { border: 8px solid var(--noctia-base-border-color) !important; }

• .border-none
• .border-0-5
• .border-1
• .border-2
• .border-4
• .border-8

Default Border Color

:root {
    --noctia-base-border-color: #000000;
}

.border-top-x

.border-top-x { border-top: x !important; }

.border-right-x

.border-right-x { border-right: x !important; }

.border-bot-x

.border-bot-x { border-bottom: x !important; }

.border-left-x

.border-left-x { border-left: x !important; }

Radius

.border-radius-0 { border-radius: 0 !important; }
.border-radius-1 { border-radius: 1px !important; }
.border-radius-2 { border-radius: 2px !important; }
.border-radius-4 { border-radius: 4px !important; }
.border-radius-8 { border-radius: 8px !important; }
.border-radius-16 { border-radius: 16px !important; }
.border-radius-24 { border-radius: 24px !important; }
.border-radius-32 { border-radius: 32px !important; }
.border-radius-40 { border-radius: 40px !important; }
.border-radius-48 { border-radius: 48px !important; }
.border-radius-56 { border-radius: 56px !important; }
.border-radius-64 { border-radius: 64px !important; }
.border-radius-999 { border-radius: 99999px !important; }

Flex Option

.flex-center {
    display: flex;
    align-items: center !important;
    justify-content: center !important;
}

.flex-column {
    display: flex;
    flex-direction: column !important;
}

.flex-wrap {
    display: flex;
    flex-wrap: wrap !important;
}

.flex-flow-fixed {
    display: flex;
    flex-flow: column wrap !important;
}

.flex-1 { flex: 1 !important; }

.mdm-x

@media (min-width: 768px) {
  .mdm-x { x }
}

.lrg-x

@media (min-width: 1024px) {
  .lrg-x { x }
}

Grid Template

.grid-col-1-auto { grid-template-columns: auto !important; }
.grid-col-2-auto { grid-template-columns: repeat(2, auto) !important; }
.grid-col-3-auto { grid-template-columns: repeat(3, auto) !important; }
.grid-col-4-auto { grid-template-columns: repeat(4, auto) !important; }
.grid-col-5-auto { grid-template-columns: repeat(5, auto) !important; }

.grid-col-x-fr

.grid-col-x-fr { grid-template-columns: repeat(x, 1fr) !important; }

.grid-row-x-y

.grid-row-x-y { grid-template-rows: repeat(x, y) !important; }

.mdm-grid-x-y-z

@media (min-width: 768px) {
  .mdm-grid-x-y-z { grid-template-x: repeat(y, z) !important; }
}

.lrg-grid-x-y-z

@media (min-width: 1024px) {
  .lrg-grid-x-y-z { grid-template-x: repeat(y, z) !important; }
}