From 530797e71a796e46431fad4b19bec46d9b39d4a6 Mon Sep 17 00:00:00 2001 From: Dananji Withana Date: Fri, 6 Dec 2024 15:41:04 -0500 Subject: [PATCH] Set font-size CSS in metadata display component and cleanup (#747) * Set font-size CSS in metadata display component and cleanup * Use meta tag in demo site to allow text scaling with zoom in/out * Use sass variables for font sizes for large and medium --- demo/index.html | 2 ++ src/components/MarkersDisplay/MarkersDisplay.scss | 11 +++++------ .../StructuredNavigation/StructuredNavigation.scss | 9 +++++---- .../SupplementalFiles/SupplementalFiles.scss | 1 - src/components/Transcript/Transcript.scss | 2 -- src/styles/_vars.scss | 3 +++ src/styles/main.scss | 1 + 7 files changed, 16 insertions(+), 13 deletions(-) diff --git a/demo/index.html b/demo/index.html index f1988c45..e4536349 100644 --- a/demo/index.html +++ b/demo/index.html @@ -2,6 +2,8 @@ Ramp + + diff --git a/src/components/MarkersDisplay/MarkersDisplay.scss b/src/components/MarkersDisplay/MarkersDisplay.scss index f46612a2..75129893 100644 --- a/src/components/MarkersDisplay/MarkersDisplay.scss +++ b/src/components/MarkersDisplay/MarkersDisplay.scss @@ -59,6 +59,10 @@ display: flex; justify-content: flex-end; + svg { + vertical-align: baseline; + } + p { margin: 0; margin-top: 0.25rem; @@ -98,11 +102,6 @@ } } -.ramp--markers-display__markers-empty { - font-size: medium; - padding: 2em; -} - // Styling for new marker form .ramp-markers-display__new-marker { margin-bottom: 1rem; @@ -113,7 +112,7 @@ padding: 0.5rem; border-radius: 0.25rem; margin: 1rem 0; - font-size: 0.85rem; + font-size: $fontSizeMedium; font-weight: bold; table.create-marker-form-table { diff --git a/src/components/StructuredNavigation/StructuredNavigation.scss b/src/components/StructuredNavigation/StructuredNavigation.scss index 261fda73..1319b255 100644 --- a/src/components/StructuredNavigation/StructuredNavigation.scss +++ b/src/components/StructuredNavigation/StructuredNavigation.scss @@ -15,7 +15,7 @@ .ramp--structured-nav__sections-text { font-weight: bold; - font-size: 1.25em; + font-size: $fontSizeLarge; &.hidden { visibility: hidden; } @@ -29,6 +29,7 @@ border-radius: 0.3em; cursor: pointer; align-items: flex-end; + font-size: 13px; .arrow { border: solid $primaryLightest; @@ -246,7 +247,7 @@ ul.ramp--structured-nav__list { flex-direction: column; background-color: transparent; border-top: 1px solid $primaryLight; - font-size: 1.25rem; + font-size: $fontSizeLarge; font-weight: 400; .not-clickable { @@ -258,7 +259,6 @@ ul.ramp--structured-nav__list { text-align: left; width: 100%; padding: 1rem; - font-size: 1.25rem; font-weight: inherit; background: $primaryLightest; @@ -268,6 +268,7 @@ ul.ramp--structured-nav__list { span { padding-left: 0; + font-size: $fontSizeLarge; } } @@ -308,7 +309,7 @@ ul.ramp--structured-nav__list { border: 1px solid $primaryDark; border-radius: 999px; color: $primaryDarkest; - font-size: 0.75rem; + font-size: $fontSizeMedium; letter-spacing: 0.02rem; line-height: 1.6; padding: 0 0.5rem; diff --git a/src/components/SupplementalFiles/SupplementalFiles.scss b/src/components/SupplementalFiles/SupplementalFiles.scss index e6e80144..45c9a0b7 100644 --- a/src/components/SupplementalFiles/SupplementalFiles.scss +++ b/src/components/SupplementalFiles/SupplementalFiles.scss @@ -48,7 +48,6 @@ } .ramp--supplemental-files-empty { - font-size: medium; padding: 2em; } } diff --git a/src/components/Transcript/Transcript.scss b/src/components/Transcript/Transcript.scss index 54e10e8e..38242024 100644 --- a/src/components/Transcript/Transcript.scss +++ b/src/components/Transcript/Transcript.scss @@ -10,12 +10,10 @@ overflow-y: auto; p { - font-size: small; color: $primaryDarker; } #no-transcript { - font-size: medium; padding: 2em; } } diff --git a/src/styles/_vars.scss b/src/styles/_vars.scss index dfc0e2bb..23310d21 100644 --- a/src/styles/_vars.scss +++ b/src/styles/_vars.scss @@ -14,6 +14,9 @@ $primaryGreenDimmer: #3b5e5e; $primaryGreenDark: #2a5459; $primaryGreenDarker: #1a3a3f; +$fontSizeLarge: 20px; +$fontSizeMedium: 12px; + $danger: #e0101a; $fontPrimary: 'Open Sans', sans-serif; diff --git a/src/styles/main.scss b/src/styles/main.scss index d9f7919f..5501049a 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -3,6 +3,7 @@ [class*='ramp--'] { font-family: $fontPrimary; color: $primaryDarker; + font-size: 16px; } /** Begin - Overrides for VideoJS related styling **/