diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/c-read-more.css b/taccsite_cms/static/site_cms/css/src/_imports/components/c-read-more.css deleted file mode 100644 index a4c925a20..000000000 --- a/taccsite_cms/static/site_cms/css/src/_imports/components/c-read-more.css +++ /dev/null @@ -1,50 +0,0 @@ -/* -Read More - -A CSS-only way to support a "Read More…" feature. It requires a container and three children in order: -- state checkbox (must be first) -- target text -- toggle element - -.c-read-more--one-line - Truncated text may only be one line tall. -.c-read-more--many-lines - Truncated text may be many lines tall. - -Styleguide: Components.ReadMore -*/ -@import url("_imports/tools/x-truncate.css"); - -/* Truncation */ - -/* Many Lines */ -.c-read-more--many-lines .c-read-more__target { - @extend .x-truncate--many-lines; -} -.c-read-more--many-lines .c-read-more__state:checked ~ .c-read-more__target { - @extend .x-untruncate--many-lines; -} - -/* One Line */ -.c-read-more--one-line .c-read-more__target { - @extend .x-truncate--one-line; -} -.c-read-more--one-line .c-read-more__state:checked ~ .c-read-more__target { - @extend .x-untruncate--one-line; -} - -/* Read More / Read Less */ - -/* State */ -.c-read-more__state, -.c-read-more__on-text, -.c-read-more__off-text { - display: none; -} -.c-read-more__state:not(:checked) ~ .c-read-more__toggle .c-read-more__on-text, -.c-read-more__state:checked ~ .c-read-more__toggle .c-read-more__off-text { - display: block; -} - -/* Toggle */ -.c-read-more__toggle { - cursor: pointer; -} diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/c-show-more.css b/taccsite_cms/static/site_cms/css/src/_imports/components/c-show-more.css new file mode 100644 index 000000000..09a47df41 --- /dev/null +++ b/taccsite_cms/static/site_cms/css/src/_imports/components/c-show-more.css @@ -0,0 +1,50 @@ +/* +Show More + +A CSS-only way to support a "Show More…" feature. It requires a container and three children in order: +- state checkbox (must be first) +- target text +- toggle element + +.c-show-more--one-line - Truncated text may only be one line tall. +.c-show-more--many-lines - Truncated text may be many lines tall. + +Styleguide: Components.ShowMore +*/ +@import url("_imports/tools/x-truncate.css"); + +/* Truncation */ + +/* Many Lines */ +.c-show-more--many-lines .c-show-more__target { + @extend .x-truncate--many-lines; +} +.c-show-more--many-lines .c-show-more__state:checked ~ .c-show-more__target { + @extend .x-untruncate--many-lines; +} + +/* One Line */ +.c-show-more--one-line .c-show-more__target { + @extend .x-truncate--one-line; +} +.c-show-more--one-line .c-show-more__state:checked ~ .c-show-more__target { + @extend .x-untruncate--one-line; +} + +/* Show More / Show Less */ + +/* State */ +.c-show-more__state, +.c-show-more__on-text, +.c-show-more__off-text { + display: none; +} +.c-show-more__state:not(:checked) ~ .c-show-more__toggle .c-show-more__on-text, +.c-show-more__state:checked ~ .c-show-more__toggle .c-show-more__off-text { + display: block; +} + +/* Toggle */ +.c-show-more__toggle { + cursor: pointer; +}