From 499b1daa949ec3fcb1886b36a72a1deff22f9ddc Mon Sep 17 00:00:00 2001 From: Ans Date: Tue, 27 Feb 2024 18:01:40 -0500 Subject: [PATCH] Migrate custom BEM to getBEM syntax --- docs/assets/css/color-swatches.less | 10 +-- docs/assets/css/footer.less | 2 +- docs/assets/css/skip-nav.less | 4 +- docs/assets/css/tabs.less | 8 +- docs/assets/css/variation.less | 10 +-- .../cfpb-buttons/src/atoms/button-links.less | 6 +- .../src/atoms/buttons-with-icons.less | 12 +-- packages/cfpb-buttons/src/atoms/buttons.less | 8 +- packages/cfpb-core/src/utilities.less | 32 +++---- packages/cfpb-expandables/src/expandable.less | 42 +++++----- .../cfpb-expandables/src/summary-minimal.less | 12 +-- packages/cfpb-expandables/src/summary.less | 8 +- packages/cfpb-forms/src/atoms/form-alert.less | 8 +- packages/cfpb-forms/src/atoms/label.less | 8 +- packages/cfpb-forms/src/atoms/select.less | 2 +- packages/cfpb-forms/src/atoms/text-input.less | 6 +- .../src/molecules/btn-inside-input.less | 2 +- .../cfpb-forms/src/molecules/form-fields.less | 20 ++--- packages/cfpb-forms/src/organisms/form.less | 10 +-- .../cfpb-forms/src/organisms/multiselect.less | 14 ++-- packages/cfpb-icons/src/cfpb-icons.less | 68 +++++++-------- packages/cfpb-layout/src/cfpb-layout.less | 40 ++++----- packages/cfpb-layout/src/molecules/card.less | 54 ++++++------ .../cfpb-layout/src/molecules/heroes.less | 84 +++++++++---------- .../cfpb-layout/src/organisms/card-group.less | 50 +++++------ .../src/organisms/email-signup.less | 2 +- .../organisms/featured-content-module.less | 18 ++-- .../src/molecules/notification.less | 22 ++--- .../src/organisms/banner.less | 4 +- .../src/molecules/pagination.less | 28 +++---- packages/cfpb-tables/src/cfpb-tables.less | 12 +-- .../cfpb-typography/src/atoms/headings.less | 2 +- packages/cfpb-typography/src/atoms/links.less | 20 ++--- .../cfpb-typography/src/atoms/tagline.less | 6 +- .../cfpb-typography/src/molecules/list.less | 26 +++--- .../src/molecules/meta-header.less | 4 +- .../src/molecules/pull-quote.less | 4 +- .../src/molecules/slug-header.less | 2 +- 38 files changed, 335 insertions(+), 335 deletions(-) diff --git a/docs/assets/css/color-swatches.less b/docs/assets/css/color-swatches.less index 221a170973..50ac2fe7ed 100644 --- a/docs/assets/css/color-swatches.less +++ b/docs/assets/css/color-swatches.less @@ -12,19 +12,19 @@ .swatch { margin-left: 0; - &_field { + &__field { height: 5em; } - &__primary &_field { + &--primary &__field { height: 10em; } - &_head { + &__head { margin: 0.25em 0; } - &_table { + &__table { width: 100%; } @@ -40,7 +40,7 @@ text-align: left; } - &_field__green { + &__field__green { background: @green; } } diff --git a/docs/assets/css/footer.less b/docs/assets/css/footer.less index 120a6aeeb6..0675b205f9 100644 --- a/docs/assets/css/footer.less +++ b/docs/assets/css/footer.less @@ -5,7 +5,7 @@ .ds-footer { padding-bottom: 30px; - &_content { + &__content { max-width: 41.875rem; } diff --git a/docs/assets/css/skip-nav.less b/docs/assets/css/skip-nav.less index 49a2365859..df608cf1cc 100644 --- a/docs/assets/css/skip-nav.less +++ b/docs/assets/css/skip-nav.less @@ -12,7 +12,7 @@ .skip-nav { position: relative; - &_link { + &__link { position: absolute; top: auto; left: -10000px; @@ -42,7 +42,7 @@ background 0.2s linear; } - &__flush-left:focus { + &--flush-left:focus { left: 0; } } diff --git a/docs/assets/css/tabs.less b/docs/assets/css/tabs.less index 6d3c0e15a8..a203f38360 100644 --- a/docs/assets/css/tabs.less +++ b/docs/assets/css/tabs.less @@ -1,6 +1,6 @@ // All screen sizes. .m-tabs { - &_list { + &__list { border-top: 1px solid @gray; margin: 0; padding: 0; @@ -8,7 +8,7 @@ display: none; } - &_list-item { + &__list-item { .heading-5(); border-bottom: 0; margin-bottom: 0; @@ -31,7 +31,7 @@ } } - &_tab { + &__tab { border: 0; color: @gray; display: block; @@ -64,7 +64,7 @@ } } - &_panel { + &__panel { background-color: @gray-5; margin-bottom: 30px; } diff --git a/docs/assets/css/variation.less b/docs/assets/css/variation.less index b54ff88fbb..a68d598fe1 100644 --- a/docs/assets/css/variation.less +++ b/docs/assets/css/variation.less @@ -6,17 +6,17 @@ border: 5px solid @gray-10; margin: 2rem 0; - &_title { + &__title { background: @gray-10; margin-bottom: 2rem; padding: 1rem; } - &_description { + &__description { margin-bottom: 2rem; } - &_description, + &__description, & .m-variation { padding-left: 1rem; padding-right: 1rem; @@ -26,11 +26,11 @@ .m-variation { border-bottom: 1px solid @gray-40; - &_name { + &__name { margin-top: 2rem; } - &_deprecated { + &__deprecated { background: @gray-10; font-size: unit((10px / @base-font-size-px), em); font-variant: small-caps; diff --git a/packages/cfpb-buttons/src/atoms/button-links.less b/packages/cfpb-buttons/src/atoms/button-links.less index 3495ee6784..df54d8648c 100644 --- a/packages/cfpb-buttons/src/atoms/button-links.less +++ b/packages/cfpb-buttons/src/atoms/button-links.less @@ -4,7 +4,7 @@ // TODO: Refactor the rule combos for simplicity -.a-btn__link { +.a-btn--link { padding: 0; // Padding added so the focus rectangle falls below the underline. padding-bottom: 1.5px; @@ -49,7 +49,7 @@ // Secondary button link // - &.a-btn__secondary { + &.a-btn--secondary { &, &:link, &:visited { @@ -80,7 +80,7 @@ // Destructive action button link // - &.a-btn__warning { + &.a-btn--warning { &, &:link, &:visited { diff --git a/packages/cfpb-buttons/src/atoms/buttons-with-icons.less b/packages/cfpb-buttons/src/atoms/buttons-with-icons.less index 54a5946f10..f4fc086602 100644 --- a/packages/cfpb-buttons/src/atoms/buttons-with-icons.less +++ b/packages/cfpb-buttons/src/atoms/buttons-with-icons.less @@ -2,28 +2,28 @@ // TODO: Replace magic numbers with calculations based off of the // button padding size -.a-btn_icon__on-left { +.a-btn__icon--on-left { padding-right: unit((11px / @btn-font-size), em); border-right: 1px solid mix(@btn-bg, @btn-text, 50%); margin-right: unit((7px / @btn-font-size), em); } -.a-btn_icon__on-right { +.a-btn__icon--on-right { padding-left: unit((11px / @btn-font-size), em); border-left: 1px solid mix(@btn-bg, @btn-text, 50%); margin-left: unit((7px / @btn-font-size), em); } -.a-btn_icon { - .a-btn__secondary & { +.a-btn__icon { + .a-btn--secondary & { border-color: mix(@btn__secondary-bg, @btn__secondary-text, 50%); } - .a-btn__warning & { + .a-btn--warning & { border-color: mix(@btn__warning-bg, @btn__warning-text, 50%); } - .a-btn__disabled &, + .a-btn--disabled &, .a-btn[disabled] & { border-color: mix(@btn__disabled-bg, @btn__disabled-text, 50%); } diff --git a/packages/cfpb-buttons/src/atoms/buttons.less b/packages/cfpb-buttons/src/atoms/buttons.less index 5aec20b5f5..5efa569767 100644 --- a/packages/cfpb-buttons/src/atoms/buttons.less +++ b/packages/cfpb-buttons/src/atoms/buttons.less @@ -57,7 +57,7 @@ // Secondary button // - &__secondary { + &--secondary { &, &:link, &:visited { @@ -87,7 +87,7 @@ // Destructive action button // - &__warning { + &--warning { &, &:link, &:visited { @@ -117,7 +117,7 @@ // Disabled button // - &__disabled, + &--disabled, &[disabled] { &, &:link, @@ -143,7 +143,7 @@ // // Full width button on x-small screens // - &__full-on-xs { + &--full-on-xs { // Mobile only. .respond-to-max(@bp-xs-max, { display: block; diff --git a/packages/cfpb-core/src/utilities.less b/packages/cfpb-core/src/utilities.less index 5081f8ff43..84a0dbbffe 100755 --- a/packages/cfpb-core/src/utilities.less +++ b/packages/cfpb-core/src/utilities.less @@ -150,7 +150,7 @@ .u-flexible-container { .u-flexible-container-mixin(); - &_inner { + &__inner { position: absolute; top: 0; left: 0; @@ -158,7 +158,7 @@ height: 100%; } - &__4-3 { + &--4-3 { .u-flexible-container-mixin( 4, 3 ); } } @@ -167,39 +167,39 @@ // Link mixins // -.u-link__colors() { - .u-link__colors-base(); +.u-link--colors() { + .u-link--colors-base(); } -.u-link__colors( @c ) { - .u-link__colors-base( +.u-link--colors( @c ) { + .u-link--colors-base( @c, @c, @c, @c, @c, @c, @c, @c, @c, @c ); } -.u-link__colors( @c, @h ) { - .u-link__colors-base( +.u-link--colors( @c, @h ) { + .u-link--colors-base( @c, @c, @h, @h, @c, @c, @c, @h, @h, @c ); } -.u-link__colors( @c, @v, @h, @f, @a ) { - .u-link__colors-base( +.u-link--colors( @c, @v, @h, @f, @a ) { + .u-link--colors-base( @c, @v, @h, @f, @a, @c, @v, @h, @f, @a ); } -.u-link__colors( @c, @v, @h, @f, @a, @bc, @bv, @bh, @bf, @ba ) { - .u-link__colors-base( +.u-link--colors( @c, @v, @h, @f, @a, @bc, @bv, @bh, @bf, @ba ) { + .u-link--colors-base( @c, @v, @h, @f, @a, @bc, @bv, @bh, @bf, @ba ); } -.u-link__colors-base( +.u-link--colors-base( @c: @link-text, @v: @link-text-visited, @h: @link-text-hover, @@ -238,15 +238,15 @@ } } -.u-link__border() { +.u-link--border() { border-bottom-width: 1px; } -.u-link__no-border() { +.u-link--no-border() { border-bottom-width: 0 !important; } -.u-link__hover-border() { +.u-link--hover-border() { border-bottom-width: 0 !important; &:hover, diff --git a/packages/cfpb-expandables/src/expandable.less b/packages/cfpb-expandables/src/expandable.less index 84b54b3283..e4cceb775c 100644 --- a/packages/cfpb-expandables/src/expandable.less +++ b/packages/cfpb-expandables/src/expandable.less @@ -22,7 +22,7 @@ // Header // - &_header { + &__header { display: flex; justify-content: space-between; padding: 0; @@ -35,27 +35,27 @@ outline-offset: 1px; } - .o-expandable_cue-close, - .o-expandable_cue-open { + .o-expandable__cue-close, + .o-expandable__cue-open { display: none; } - &[aria-expanded='false'] .o-expandable_cue-open { + &[aria-expanded='false'] .o-expandable__cue-open { display: block; } - &[aria-expanded='true'] .o-expandable_cue-close { + &[aria-expanded='true'] .o-expandable__cue-close { display: block; } - // Using the button element with .o-expandable_header requires setting + // Using the button element with .o-expandable__header requires setting // an explicit width. button& { width: 100%; text-align: left; } - .o-expandable_label { + .o-expandable__label { // Grow to available width. flex-grow: 1; } @@ -65,14 +65,14 @@ // Expandable text elements // - &_label { + &__label { // Remove default h4 margin style margin-bottom: 0; color: @black; font-weight: 500; } - &_cues { + &__cues { min-width: 60px; text-align: right; color: @pacific; @@ -85,17 +85,17 @@ // // TODO: it's unlikely we need a padded modifier. This should probably be folded into the default. - &__padded { - .o-expandable_header { + &--padded { + .o-expandable__header { padding: unit((10px / @base-font-size-px), em) unit((15px / @base-font-size-px), em); } - .o-expandable_content { + .o-expandable__content { padding: unit((15px / @base-font-size-px), em); padding-top: 0; - // The divider between _header and _content. + // The divider between __header and __content. &::before { content: ''; display: block; @@ -114,7 +114,7 @@ // Expandable with a background color modifier // - &__background { + &--background { background: @gray-5; } @@ -122,7 +122,7 @@ // Expandable with a border modifier // - &__border { + &--border { border: 1px solid @expandable__border; } @@ -131,7 +131,7 @@ // &-group { - .o-expandable__padded { + .o-expandable--padded { border-bottom: 1px solid @expandable__border; &:first-child { @@ -142,15 +142,15 @@ .respond-to-print( { // Hide the interactive expandable cues when printing - &_header[aria-expanded='true'] &_cue-close, - &_header[aria-expanded='false'] &_cue-open { + &__header[aria-expanded='true'] &__cue-close, + &__header[aria-expanded='false'] &__cue-open { display: none; } // Ensure all expandables are expanded when printing. // To accommodate print stylesheets that display the raw URL after links, // set an enormous max height to accommodate expandables that have a lot of links. - &_content[aria-expanded='false'] { + &__content[aria-expanded='false'] { display: block; max-height: 99999px !important; } @@ -160,11 +160,11 @@ // Used when the set language reads right-to-left html[lang='ar'] { .o-expandable { - &_header { + &__header { text-align: right; } - &_cues { + &__cues { text-align: left; } } diff --git a/packages/cfpb-expandables/src/summary-minimal.less b/packages/cfpb-expandables/src/summary-minimal.less index 78d7717fda..42e6469f7f 100644 --- a/packages/cfpb-expandables/src/summary-minimal.less +++ b/packages/cfpb-expandables/src/summary-minimal.less @@ -41,7 +41,7 @@ */ .o-summary-minimal { - &_content { + &__content { overflow-y: hidden; // Move the bounding box 2 pixels to avoid clipping link focus boxes. @@ -52,7 +52,7 @@ position: relative; } - &_btn { + &__btn { // Hide button in no-js state. .no-js & { display: none; @@ -72,16 +72,16 @@ outline-offset: 2px; } - .o-summary-minimal_cue-close, - .o-summary-minimal_cue-open { + .o-summary-minimal__cue-close, + .o-summary-minimal__cue-open { display: none; } - &[aria-expanded='false'] .o-summary-minimal_cue-open { + &[aria-expanded='false'] .o-summary-minimal__cue-open { display: block; } - &[aria-expanded='true'] .o-summary-minimal_cue-close { + &[aria-expanded='true'] .o-summary-minimal__cue-close { display: block; } } diff --git a/packages/cfpb-expandables/src/summary.less b/packages/cfpb-expandables/src/summary.less index cf21550800..f588ef73af 100644 --- a/packages/cfpb-expandables/src/summary.less +++ b/packages/cfpb-expandables/src/summary.less @@ -33,7 +33,7 @@ */ .o-summary { - &_content { + &__content { overflow-y: hidden; // Move the bounding box 2 pixels to avoid clipping link focus boxes. @@ -44,7 +44,7 @@ position: relative; } - &_btn { + &__btn { // Hide button in no-js state. .no-js & { display: none; @@ -92,9 +92,9 @@ } // If we're mobile-only… - &__mobile { + &--mobile { @media only screen and (min-width: @bp-sm-min) { - .o-summary_btn { + .o-summary__btn { // Hide the "read more" button and fading on desktop. display: none; } diff --git a/packages/cfpb-forms/src/atoms/form-alert.less b/packages/cfpb-forms/src/atoms/form-alert.less index 58c47da4e4..b24177c42c 100644 --- a/packages/cfpb-forms/src/atoms/form-alert.less +++ b/packages/cfpb-forms/src/atoms/form-alert.less @@ -4,20 +4,20 @@ float: left; } - &_text { + &__text { display: block; margin-left: unit((20px / @base-font-size-px), em); } - &__success .cf-icon-svg { + &--success .cf-icon-svg { color: @input-icon__success; } - &__error .cf-icon-svg { + &--error .cf-icon-svg { color: @input-icon__error; } - &__warning .cf-icon-svg { + &--warning .cf-icon-svg { color: @input-icon__warning; } } diff --git a/packages/cfpb-forms/src/atoms/label.less b/packages/cfpb-forms/src/atoms/label.less index ba072ecc84..4d36a5e42e 100644 --- a/packages/cfpb-forms/src/atoms/label.less +++ b/packages/cfpb-forms/src/atoms/label.less @@ -1,12 +1,12 @@ .a-label { display: inline-block; - &_helper { + &__helper { color: @label-helper; font-size: unit((16px / @base-font-size-px), rem); font-weight: normal; - &__block { + &--block { display: block; // Add a gap between the label helper and label. @@ -14,7 +14,7 @@ } } - &__heading { + &--heading { .h4(); display: block; @@ -23,7 +23,7 @@ margin-bottom: unit((10px / @font-size), em); // Add a gap between the label helper and label heading - .a-label_helper__block { + .a-label__helper--block { margin-top: unit((10px / @base-font-size-px), rem); } } diff --git a/packages/cfpb-forms/src/atoms/select.less b/packages/cfpb-forms/src/atoms/select.less index 1e3de5b36f..5df3a237ee 100644 --- a/packages/cfpb-forms/src/atoms/select.less +++ b/packages/cfpb-forms/src/atoms/select.less @@ -75,7 +75,7 @@ // Correctly lighten the down arrow when a-select__disabled is present. // Unfortunately, we can't target this to apply when only // the select[disabled] is present and need the additional class. - &__disabled::after { + &--disabled::after { .u-svg-inline-bg( 'down', @gray ); } } diff --git a/packages/cfpb-forms/src/atoms/text-input.less b/packages/cfpb-forms/src/atoms/text-input.less index 7557e10a44..50ecb054e8 100644 --- a/packages/cfpb-forms/src/atoms/text-input.less +++ b/packages/cfpb-forms/src/atoms/text-input.less @@ -40,7 +40,7 @@ } } - &__error { + &--error { border-color: @input-border__error; outline: 1px solid @input-border__error; &:focus, @@ -51,7 +51,7 @@ } } - &__warning { + &--warning { border-color: @input-border__warning; outline: 1px solid @input-border__warning; &:focus, @@ -62,7 +62,7 @@ } } - &__success { + &--success { border-color: @input-border__success; outline: 1px solid @input-border__success; &:focus, diff --git a/packages/cfpb-forms/src/molecules/btn-inside-input.less b/packages/cfpb-forms/src/molecules/btn-inside-input.less index da34c3d0ee..2cfef604ea 100644 --- a/packages/cfpb-forms/src/molecules/btn-inside-input.less +++ b/packages/cfpb-forms/src/molecules/btn-inside-input.less @@ -12,7 +12,7 @@ } .a-btn { - .u-link__no-border(); + .u-link--no-border(); position: absolute; // Set the right and top distances to match typical button padding. diff --git a/packages/cfpb-forms/src/molecules/form-fields.less b/packages/cfpb-forms/src/molecules/form-fields.less index 15e2cb3e79..771993df02 100644 --- a/packages/cfpb-forms/src/molecules/form-fields.less +++ b/packages/cfpb-forms/src/molecules/form-fields.less @@ -1,5 +1,5 @@ .m-form-field { - .a-text-input__full { + .a-text-input--full { box-sizing: border-box; width: 100%; } @@ -8,8 +8,8 @@ margin-top: unit((5px / @base-font-size-px), em); } - &__checkbox, - &__radio { + &--checkbox, + &--radio { .a-label { // We need to turn off autoprefixing for the inline-grid because // IE does not handle an inline-grid like other browsers, @@ -54,7 +54,7 @@ } // Ensure the helper text appears on its own line below the label. - .a-label_helper { + .a-label__helper { display: block; } @@ -93,7 +93,7 @@ } } - &__checkbox { + &--checkbox { .a-checkbox { &:focus + .a-label::before, &.focus + .a-label::before { @@ -121,7 +121,7 @@ } } - &__error { + &--error { .a-label { &::before { border-color: @input-border__error; @@ -157,7 +157,7 @@ } } - &__warning { + &--warning { .a-label { &::before { border-color: @input-border__warning; @@ -193,7 +193,7 @@ } } - &__success { + &--success { .a-label { &::before { border-color: @input-border__success; @@ -230,7 +230,7 @@ } } - &__radio { + &--radio { .a-label { &::before { border-radius: 50%; @@ -284,7 +284,7 @@ } } - &__lg-target { + &--lg-target { display: block; .a-label { diff --git a/packages/cfpb-forms/src/organisms/form.less b/packages/cfpb-forms/src/organisms/form.less index 5ce4104c26..b0d7a7f5a8 100644 --- a/packages/cfpb-forms/src/organisms/form.less +++ b/packages/cfpb-forms/src/organisms/form.less @@ -1,9 +1,9 @@ .o-form { - &_group { + &__group { margin-bottom: unit((30px / @base-font-size-px), em); } - &_fieldset { + &__fieldset { // Overwrite Normalize. border: none; margin: 0; @@ -18,12 +18,12 @@ // Input with button // - &__input-w-btn { + &--input-w-btn { .respond-to-min( 480px, { .grid_nested-col-group(); }); - &_input-container { + &__input-container { margin-bottom: unit((15px / @base-font-size-px), em); .respond-to-min( 480px, { @@ -46,7 +46,7 @@ } } - &_btn-container { + &__btn-container { margin-bottom: unit((15px / @base-font-size-px), em); .a-btn { diff --git a/packages/cfpb-forms/src/organisms/multiselect.less b/packages/cfpb-forms/src/organisms/multiselect.less index 8ba7eef45a..a205c5aa8c 100644 --- a/packages/cfpb-forms/src/organisms/multiselect.less +++ b/packages/cfpb-forms/src/organisms/multiselect.less @@ -21,7 +21,7 @@ select.o-multiselect { .o-multiselect { position: relative; - &_header { + &__header { position: relative; &::after { @@ -45,14 +45,14 @@ select.o-multiselect { } } - &_search[type='text'] { + &__search[type='text'] { display: block; box-sizing: border-box; width: 100%; } - &_fieldset { + &__fieldset { // Resets border-color: @input-border; border-top: none; @@ -74,7 +74,7 @@ select.o-multiselect { } &.u-active { - .o-multiselect_fieldset { + .o-multiselect__fieldset { margin-top: 0; // This needs to match the value set in _bindEvents in Multiselect.js. // See https://github.com/cfpb/design-system/blob/4d26d5af04317bcc00b4677aa866fe8d526e82e0/packages/cfpb-forms/src/organisms/Multiselect.js#L340 @@ -86,12 +86,12 @@ select.o-multiselect { } // Reverse arrow when search drop-down is open. - .o-multiselect_header::after { + .o-multiselect__header::after { .u-svg-inline-bg( 'up' ); } } - &_options { + &__options { list-style-type: none; background-color: @white; padding: 0; @@ -144,7 +144,7 @@ select.o-multiselect { } } - &_choices { + &__choices { padding-left: 0; // The following is required to make side-by-side LI // have a space between them. diff --git a/packages/cfpb-icons/src/cfpb-icons.less b/packages/cfpb-icons/src/cfpb-icons.less index e37cb8c56c..67668f093b 100644 --- a/packages/cfpb-icons/src/cfpb-icons.less +++ b/packages/cfpb-icons/src/cfpb-icons.less @@ -43,8 +43,8 @@ vertical-align: text-top; fill: currentcolor; - &__updating, - &__updating-round { + &--updating, + &--updating-round { animation: updating-animation 1.25s infinite linear; transform-origin: 50% 50%; } @@ -62,38 +62,38 @@ // Right-to-left (RTL) certain icons on arabic pages. html[lang='ar'] { .cf-icon-svg { - &__right, - &__right-round, - &__left, - &__left-round, - &__arrow-right, - &__arrow-right-round, - &__arrow-left, - &__arrow-left-round, - &__help, - &__help-round, - &__book, - &__book-round, - &__document, - &__document-round, - &__edit, - &__edit-round, - &__paper-clip, - &__paper-clip-round, - &__cart, - &__cart-round, - &__disability, - &__disability-round, - &__travel, - &__travel-round, - &__bullhorn, - &__bullhorn-round, - &__chart, - &__chart-round, - &__list, - &__list-round, - &__external-link, - &__external-link-round { + &--right, + &--right-round, + &--left, + &--left-round, + &--arrow-right, + &--arrow-right-round, + &--arrow-left, + &--arrow-left-round, + &--help, + &--help-round, + &--book, + &--book-round, + &--document, + &--document-round, + &--edit, + &--edit-round, + &--paper-clip, + &--paper-clip-round, + &--cart, + &--cart-round, + &--disability, + &--disability-round, + &--travel, + &--travel-round, + &--bullhorn, + &--bullhorn-round, + &--chart, + &--chart-round, + &--list, + &--list-round, + &--external-link, + &--external-link-round { transform: scaleX(-1); } } diff --git a/packages/cfpb-layout/src/cfpb-layout.less b/packages/cfpb-layout/src/cfpb-layout.less index 2f218435be..59fc731253 100644 --- a/packages/cfpb-layout/src/cfpb-layout.less +++ b/packages/cfpb-layout/src/cfpb-layout.less @@ -65,7 +65,7 @@ .grid_nested-col-group(); }); - &__full { + &--full { .respond-to-range(@bp-sm-min, 767px, { .stack-col-thirds(); .stack-col-eighths(); @@ -73,7 +73,7 @@ }); } - &__main { + &--main { .respond-to-range(@bp-med-min, @bp-med-max, { .stack-col( content-l_col-1-2 ); }); @@ -86,7 +86,7 @@ }); } - &__sidebar { + &--sidebar { .stack-col-thirds(); .stack-col-eighths(); .stack-col-quarters(); @@ -266,7 +266,7 @@ // Desktop and above. .respond-to-min(@bp-med-min, { .content { - &__1-3 { + &--1-3 { .content_sidebar { .grid_column( 3 ); @@ -288,7 +288,7 @@ } } - &__2-1 { + &--2-1 { .content_main { .grid_column( 8 ); @@ -340,27 +340,27 @@ margin-top: unit(((@grid_gutter-width * 2) / @base-font-size-px), em); margin-bottom: unit(((@grid_gutter-width * 2) / @base-font-size-px), em); - &__border-top { + &--border-top { border-top: 1px solid @block__border-top; } - &__border-right { + &--border-right { border-right: 1px solid @block__border-right; } - &__border-bottom { + &--border-bottom { border-bottom: 1px solid @block__border-bottom; } - &__border-left { + &--border-left { border-left: 1px solid @block__border-left; } - &__border { + &--border { border: 1px solid @block__border; } - &__flush-top { + &--flush-top { margin-top: 0 !important; &.block__border, @@ -369,7 +369,7 @@ } } - &__flush-bottom { + &--flush-bottom { margin-bottom: 0 !important; &.block__border, @@ -378,7 +378,7 @@ } } - &__flush-sides { + &--flush-sides { margin-right: -(@grid_gutter-width / 2); margin-left: -(@grid_gutter-width / 2); @@ -399,7 +399,7 @@ }); } - &__flush { + &--flush { margin-top: 0 !important; margin-right: -(@grid_gutter-width / 2); margin-bottom: 0 !important; @@ -429,7 +429,7 @@ }); } - &__bg { + &--bg { padding: unit((@grid_gutter-width / @base-font-size-px), em) unit(((@grid_gutter-width / 2) / @base-font-size-px), em); padding-bottom: unit(((@grid_gutter-width * 2) / @base-font-size-px), em); @@ -442,24 +442,24 @@ }); } - &__padded-top { + &--padded-top { padding-top: unit((@grid_gutter-width / @base-font-size-px), em); margin-top: unit((@grid_gutter-width / @base-font-size-px), em); } - &__padded-bottom { + &--padded-bottom { padding-bottom: unit((@grid_gutter-width / @base-font-size-px), em); margin-bottom: unit((@grid_gutter-width / @base-font-size-px), em); } - &__sub { + &--sub { margin-top: unit((@grid_gutter-width / @base-font-size-px), em); margin-bottom: unit((@grid_gutter-width / @base-font-size-px), em); } // Overrides for when .block is also a column .content-l_col&, - .content-l_col&__sub { + .content-l_col&--sub { // Tablet and above. .respond-to-min(@bp-sm-min, { margin-top: 0; @@ -542,7 +542,7 @@ .grid_wrapper(); }); - &__match-content { + &--match-content { padding-left: @grid_gutter-width / 2; padding-right: @grid_gutter-width / 2; diff --git a/packages/cfpb-layout/src/molecules/card.less b/packages/cfpb-layout/src/molecules/card.less index 2a7d7b4e71..4b54cf6dcc 100644 --- a/packages/cfpb-layout/src/molecules/card.less +++ b/packages/cfpb-layout/src/molecules/card.less @@ -3,8 +3,8 @@ // @h = `:hover` state. // @f = `:focus` state. // @a = `:active` state. -.u-link-card__colors( @c, @v, @h, @f, @a ) { - .m-card_footer > span { +.u-link-card--colors( @c, @v, @h, @f, @a ) { + .m-card__footer > span { display: inline; border-width: 0; border-bottom-width: 1px; @@ -15,7 +15,7 @@ text-decoration: none; } - & > a:visited .m-card_footer > span { + & > a:visited .m-card__footer > span { border-color: @v; color: @v; } @@ -24,18 +24,18 @@ // element, so for consistency we trigger the hover styles on the parent // instead of on the link. This differs from the visited, focus, // and active states, which add styles onto the link. - &:hover .m-card_footer > span { + &:hover .m-card__footer > span { border-style: solid; border-color: @h; color: @h; } - & > a:focus .m-card_footer > span { + & > a:focus .m-card__footer > span { border-color: @f; color: @f; } - & > a:active .m-card_footer > span { + & > a:active .m-card__footer > span { border-color: @a; border-style: solid; color: @a; @@ -58,24 +58,24 @@ .m-card { position: relative; - &:not(.m-card__breakout) { + &:not(.m-card--breakout) { & > a { padding: unit((@grid_gutter-width / @base-font-size-px), em); } - .m-card_footer { + .m-card__footer { margin-top: auto; } } - &:not(.m-card__breakout, .m-card__topic) { + &:not(.m-card--breakout, .m-card--topic) { background: @white; border: 1px solid @gray-20; border-bottom-width: 3px; padding: unit((@grid_gutter-width / @base-font-size-px), em); } - &:not(.m-card__breakout, .m-card__topic), + &:not(.m-card--breakout, .m-card--topic), & > a { display: flex; flex-direction: column; @@ -89,33 +89,33 @@ outline-offset: 2px; } - &_footer > a { + &__footer > a { font-weight: 500; border-bottom-width: 1px; } // Shrink heading at smaller screen sizes. - &_heading { + &__heading { .respond-to-max(@bp-med-min, { .h3(); }); } // Regular cards. - &_heading > a { + &__heading > a { color: @black; &:hover { color: @pacific; } - & .m-card_icon { + & .m-card__icon { font-size: 1em; margin-bottom: 0; padding-right: unit((7.5px / @base-font-size-px), em); } - & .m-card_icon, + & .m-card__icon, & span { display: table-cell; } @@ -127,7 +127,7 @@ } // Topic cards. - &__topic { + &--topic { text-align: center; width: 170px; background: @white; @@ -137,7 +137,7 @@ border-bottom-width: 3px; } - .m-card_icon { + .m-card__icon { font-size: unit((30px / @base-font-size-px), em); color: @green; margin-bottom: unit((5px / @base-font-size-px), em); @@ -155,11 +155,11 @@ } // Arguments: default, `:visited`, `:hover`, `:focus`, and `:active` states. - .u-link-card__colors( @pacific, @teal, @pacific-dark, @pacific-dark, @pacific-dark ); + .u-link-card--colors( @pacific, @teal, @pacific-dark, @pacific-dark, @pacific-dark ); } - &__topic-action { - .m-card_icon { + &--topic-action { + .m-card__icon { color: @pacific; } } @@ -167,7 +167,7 @@ // Breakout cards. @card_img_width: 210px; @card_img_height: 120px; - &__breakout { + &--breakout { min-width: 210px; text-align: center; @@ -176,7 +176,7 @@ padding-top: (@card_img_height / 2); } - .m-card_inner-wrapper { + .m-card__inner-wrapper { position: relative; z-index: 0; min-height: (@card_img_height + (@grid_gutter-width / 2)); @@ -186,7 +186,7 @@ border-bottom-width: 3px; } - .m-card_img { + .m-card__img { position: absolute; z-index: 1; top: 0; @@ -198,13 +198,13 @@ margin-left: -(@card_img_width / 2); } - .m-card_footer { + .m-card__footer { // Subtract 6px to accommodate heading-3 size. margin-top: (@card_img_height / 2) + @grid_gutter-width - 6px; } &:hover { - .m-card_inner-wrapper { + .m-card__inner-wrapper { box-shadow: 0 2px 0 0 inset @gray-20, 2px 0 0 0 inset @gray-20, @@ -215,10 +215,10 @@ } // Arguments: default, `:visited`, `:hover`, `:focus`, and `:active` states. - .u-link-card__colors( @pacific, @teal, @pacific-dark, @pacific, @navy ); + .u-link-card--colors( @pacific, @teal, @pacific-dark, @pacific, @navy ); // Breakout cards have larger links. - .m-card_footer > span { + .m-card__footer > span { .heading-3(); } } diff --git a/packages/cfpb-layout/src/molecules/heroes.less b/packages/cfpb-layout/src/molecules/heroes.less index 8a53c64649..e1623d6920 100644 --- a/packages/cfpb-layout/src/molecules/heroes.less +++ b/packages/cfpb-layout/src/molecules/heroes.less @@ -7,7 +7,7 @@ .m-hero { background-color: @gray-5; - &_wrapper { + &__wrapper { display: grid; max-width: (@grid_wrapper-width - @grid_gutter-width); margin: 0 auto; @@ -15,28 +15,28 @@ padding-bottom: @grid_gutter-width; } - &_text { + &__text { padding-right: (@grid_gutter-width / 2); padding-left: (@grid_gutter-width / 2); } - &_heading { + &__heading { .heading-1(); } - &_subhead { + &__subhead { // Not using the `.heading-3()` mixin here because we want the weight // to remain Regular on smaller screens. font-size: @size-iii; line-height: 1.25; } - &_image-wrapper { + &__image-wrapper { box-sizing: border-box; overflow: hidden; } - &_image { + &__image { background-position: center; background-repeat: no-repeat; background-size: contain; @@ -53,21 +53,21 @@ } } - &__knockout { + &--knockout { background-color: @gray; color: @white; } - &__overlay { - .m-hero_wrapper { + &--overlay { + .m-hero__wrapper { background-position: center; background-repeat: no-repeat; background-size: cover; } } - &__jumbo, - &__50-50 { + &--jumbo, + &--50-50 { background-color: @white; .u-jumbo-text(); @@ -77,20 +77,20 @@ // Mobile only. .respond-to-max( @bp-xs-max, { .m-hero { - &_image-wrapper { + &__image-wrapper { margin-top: unit( ( @grid_gutter-width / @base-font-size-px ), em ); } - &__overlay { - .m-hero_wrapper { + &--overlay { + .m-hero__wrapper { // Overwrite the image that is set in the markup because // we are showing the image container below instead. background-image: none !important; } } - &__jumbo { - .m-hero_wrapper { + &--jumbo { + .m-hero__wrapper { // Keep hero image flush with container on mobile padding-bottom: 0; } @@ -101,11 +101,11 @@ // Tablet and below. .respond-to-max( @bp-sm-max, { .m-hero { - &_heading { + &__heading { .heading-2(); } - &_subhead { + &__subhead { font-size: @size-iv; } } @@ -114,7 +114,7 @@ // Tablet and above. .respond-to-min( @bp-sm-min, { .m-hero { - &_wrapper { + &__wrapper { grid-template-columns: 7fr 5fr; padding-right: ( @grid_gutter-width / 2); padding-left: ( @grid_gutter-width / 2); @@ -122,11 +122,11 @@ min-height: @hero-desktop-height - ( @grid_gutter-width * 2 ); } - &_text { + &__text { margin: auto; } - &_image-wrapper { + &__image-wrapper { padding-right: ( @grid_gutter-width / 2 ); padding-left: ( @grid_gutter-width / 2 ); @@ -135,14 +135,14 @@ align-items: center; } - &__bleeding { - .m-hero_image-wrapper { + &--bleeding { + .m-hero__image-wrapper { width: 100%; margin-top: unit( ( @grid_gutter-width / @base-font-size-px ), em ) * -1; margin-bottom: unit( ( @grid_gutter-width / @base-font-size-px ), em ) * -1; } - .m-hero_image { + .m-hero__image { // Remove the flexible container padding so that the image is a consistent width. padding-bottom: 0 !important; height: 100%; @@ -151,26 +151,26 @@ } } - &__overlay { - .m-hero_image { + &--overlay { + .m-hero__image { display: none; } } - &__jumbo { - .m-hero_wrapper { + &--jumbo { + .m-hero__wrapper { background-position: 50%; background-repeat: no-repeat; background-size: cover; } - .m-hero_image { + .m-hero__image { display: none; } } - &__50-50 { - .m-hero_wrapper { + &--50-50 { + .m-hero__wrapper { grid-template-columns: 1fr 1fr; border: 1px solid @gray-40; @@ -181,7 +181,7 @@ background-size: 50%; } - .m-hero_image { + .m-hero__image { display: none; } } @@ -191,21 +191,21 @@ // Large desktop. .respond-to-min( @bp-lg-min, { .m-hero { - &_wrapper { + &__wrapper { padding-top: unit( ( ( @grid_gutter-width * 1.5 ) / @base-font-size-px ), em ); padding-bottom: unit( ( ( @grid_gutter-width * 1.5 ) / @base-font-size-px ), em ); min-height: @hero-desktop-height - ( ( @grid_gutter-width * 1.5 ) * 2 ); } - &__bleeding { - .m-hero_image-wrapper { + &--bleeding { + .m-hero__image-wrapper { margin-top: unit( ( ( @grid_gutter-width * 1.5 ) / @base-font-size-px ), em ) * -1; margin-bottom: unit( ( ( @grid_gutter-width * 1.5 ) / @base-font-size-px ), em ) * -1; } } - &__50-50 { - .m-hero_wrapper { + &--50-50 { + .m-hero__wrapper { // Enlarge the 50/50 height on large screens to maximize the image size min-height: @hero-desktop-height + ( @grid_gutter-width * 2 ); } @@ -215,26 +215,26 @@ // Jumbo hero text mixin. .u-jumbo-text() { - .m-hero_subhead { + .m-hero__subhead { .lead-paragraph(); } // Tablet and above. .respond-to-min( @bp-sm-min, { - .m-hero_subhead { + .m-hero__subhead { .heading-3(); } } ); // Large desktop. .respond-to-min( @bp-lg-min, { - .m-hero_wrapper { + .m-hero__wrapper { min-height: @hero-desktop-height; } - .m-hero_heading { + .m-hero__heading { .superheading(); } - .m-hero_subhead { + .m-hero__subhead { .heading-2(); font-weight:400; } diff --git a/packages/cfpb-layout/src/organisms/card-group.less b/packages/cfpb-layout/src/organisms/card-group.less index 1209028770..6a2981afcc 100644 --- a/packages/cfpb-layout/src/organisms/card-group.less +++ b/packages/cfpb-layout/src/organisms/card-group.less @@ -4,11 +4,11 @@ margin-bottom: unit((30px / @base-font-size-px), rem); } - &__column-2 &_cards { + &--column-2 &__cards { grid-template-columns: 1fr 1fr; } - &__column-3 &_cards { + &--column-3 &__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); // Convert to 2-column layout at small screen sizes; @@ -17,7 +17,7 @@ }); } - &_cards { + &__cards { display: grid; grid-column-gap: unit((20px / @base-font-size-px), em); grid-row-gap: unit((20px / @base-font-size-px), em); @@ -29,7 +29,7 @@ }); } - &__bg-green { + &--bg-green { padding: unit((30px / @base-font-size-px), em); background: @green-20; } @@ -41,7 +41,7 @@ /* stylelint-disable selector-type-no-unknown */ _:-ms-lang(x), -.o-card-group_cards { +.o-card-group__cards { display: block; .m-card { @@ -52,23 +52,23 @@ _:-ms-lang(x), } _:-ms-lang(x), -.o-card-group__column-2 { - .o-card-group_cards .m-card { +.o-card-group--column-2 { + .o-card-group__cards .m-card { width: 48%; margin-right: 2%; } - .o-card-group_cards .m-card:last-child { + .o-card-group__cards .m-card:last-child { margin-right: 0; } } _:-ms-lang(x), -.o-card-group__column-3 { - .o-card-group_cards .m-card { +.o-card-group--column-3 { + .o-card-group__cards .m-card { width: 32%; margin-right: 1%; } - .o-card-group_cards .m-card:last-child { + .o-card-group__cards .m-card:last-child { margin-right: 0; } } @@ -86,9 +86,9 @@ _:-ms-lang(x), .o-card-group { /* stylelint-enable no-duplicate-selectors */ // Name the card grid areas. - &__count-2, - &__count-3, - &__count-4 { + &--count-2, + &--count-3, + &--count-4 { .m-card:nth-of-type(1) { grid-area: card1; } @@ -106,12 +106,12 @@ _:-ms-lang(x), } } - &__count-2 &_cards { + &--count-2 &__cards { grid-template-columns: 1fr 1fr; grid-template-areas: 'card1 card2'; } - &__count-3 &_cards { + &--count-3 &__cards { grid-template-columns: 1fr 1fr; grid-template-areas: 'card1 card2' @@ -130,7 +130,7 @@ _:-ms-lang(x), } } - &__count-4 &_cards { + &--count-4 &__cards { grid-template-columns: 1fr 1fr; grid-template-areas: 'card1 card2' @@ -138,8 +138,8 @@ _:-ms-lang(x), } // Flexbox-based "flow" card group layout. - &__flow { - .o-card-group_cards { + &--flow { + .o-card-group__cards { display: flex; flex-wrap: wrap; justify-content: center; @@ -150,7 +150,7 @@ _:-ms-lang(x), // Tablet only. .respond-to-range(@bp-sm-min, @bp-sm-max, { .o-card-group { - &__count-3 &_cards { + &--count-3 &__cards { grid-template-columns: 1fr 1fr; grid-template-areas: 'card1 card1' @@ -162,13 +162,13 @@ _:-ms-lang(x), // Mobile only. .respond-to-max(@bp-xs-max, { .o-card-group { - &__count-2 &_cards { + &--count-2 &__cards { grid-template-columns: 1fr; grid-template-areas: 'card1' 'card2'; } - &__count-3 &_cards { + &--count-3 &__cards { grid-template-columns: 1fr; grid-template-areas: 'card1' @@ -176,7 +176,7 @@ _:-ms-lang(x), 'card3'; } - &__count-4 &_cards { + &--count-4 &__cards { grid-template-columns: 1fr; grid-template-areas: 'card1' @@ -185,8 +185,8 @@ _:-ms-lang(x), 'card4'; } - &__flow { - .o-card-group_cards { + &--flow { + .o-card-group__cards { display: block; .m-card { diff --git a/packages/cfpb-layout/src/organisms/email-signup.less b/packages/cfpb-layout/src/organisms/email-signup.less index bb6245a686..337d1bc0a2 100644 --- a/packages/cfpb-layout/src/organisms/email-signup.less +++ b/packages/cfpb-layout/src/organisms/email-signup.less @@ -9,7 +9,7 @@ max-width: unit((370px / @base-font-size-px), rem); } - &_buttons { + &__buttons { display: flex; margin-top: unit((@grid_gutter-width / 2 / @base-font-size-px), em); align-items: center; diff --git a/packages/cfpb-layout/src/organisms/featured-content-module.less b/packages/cfpb-layout/src/organisms/featured-content-module.less index 2e8b273cfd..2c0c63c0ca 100644 --- a/packages/cfpb-layout/src/organisms/featured-content-module.less +++ b/packages/cfpb-layout/src/organisms/featured-content-module.less @@ -8,29 +8,29 @@ border: 1px solid @gray-40; background-color: @gray-5; - &_text { + &__text { padding-top: unit((@grid_gutter-width / @base-font-size-px), em); padding-bottom: unit((@grid_gutter-width / @base-font-size-px), em); } - &_img { + &__img { display: block; } // Mobile only. .respond-to-max(@bp-xs-max, { - &_text { + &__text { padding-right: unit( ( @grid_gutter-width / 2 / @base-font-size-px ), em ); padding-left: unit( ( @grid_gutter-width / 2 / @base-font-size-px ), em ); } - &_visual { + &__visual { padding-right: unit( ( @grid_gutter-width / 2 / @base-font-size-px ), em ); padding-bottom: unit( ( @grid_gutter-width / 2 / @base-font-size-px ), em ); padding-left: unit( ( @grid_gutter-width / 2 / @base-font-size-px ), em ); } - &_img { + &__img { margin-right: auto; margin-left: auto; } @@ -38,12 +38,12 @@ // Tablet and above. .respond-to-min(@bp-sm-min, { - &_text { + &__text { padding-right: @fcm-visual-width + @grid_gutter-width; padding-left: unit( ( @grid_gutter-width / @base-font-size-px ), em ); } - &_visual { + &__visual { height: 100%; overflow: hidden; position: absolute; @@ -52,7 +52,7 @@ width: @fcm-visual-width; } - &_img { + &__img { max-width: none; height: 100%; position: absolute; @@ -66,7 +66,7 @@ }); // Modifiers - &__left { + &--left { /* Left modifier doesn't have a border/background. If in the future we have a left arranged FCM we'll want to make the border/background its own modifer */ diff --git a/packages/cfpb-notifications/src/molecules/notification.less b/packages/cfpb-notifications/src/molecules/notification.less index 902b3be8c3..04a591f4f1 100644 --- a/packages/cfpb-notifications/src/molecules/notification.less +++ b/packages/cfpb-notifications/src/molecules/notification.less @@ -14,7 +14,7 @@ fill: @notification-icon; } - &__success { + &--success { background: @notification-bg-success; border-color: @notification-border-success; @@ -23,7 +23,7 @@ } } - &__warning { + &--warning { background: @notification-bg-warning; border-color: @notification-border-warning; @@ -32,7 +32,7 @@ } } - &__error { + &--error { background: @notification-bg-error; border-color: @notification-border-error; @@ -41,26 +41,26 @@ } } - &__visible { + &--visible { display: block; } // Only adding left padding if an icon is present. - .cf-icon-svg + &_content { + .cf-icon-svg + &__content { padding-left: unit((25px / @base-font-size-px), em); } - &_message { + &__message { margin-bottom: 0; } - &_explanation { + &__explanation { margin-top: unit((5px / @base-font-size-px), em); margin-bottom: unit((15px / @base-font-size-px), em); } // We need to provide a margin for links if an explanation is absent. - &_message + .m-list { + &__message + .m-list { margin-top: unit((15px / @base-font-size-px), em); } @@ -74,7 +74,7 @@ } // Remove default margin between explanation and list of links. - &_explanation { + &__explanation { margin-bottom: 0; } @@ -84,7 +84,7 @@ } // Decrease the margin between link items. - .m-list_item { + .m-list__item { margin-bottom: unit( ( 5px / @base-font-size-px ), em ); } }); @@ -92,7 +92,7 @@ // Handle right-to-left (RTL) adjustments. html[lang='ar'] .m-notification { - .cf-icon-svg + .m-notification_content { + .cf-icon-svg + .m-notification__content { padding-left: initial; padding-right: unit((25px / @base-font-size-px), em); } diff --git a/packages/cfpb-notifications/src/organisms/banner.less b/packages/cfpb-notifications/src/organisms/banner.less index 7784378c7e..695cfd2c04 100644 --- a/packages/cfpb-notifications/src/organisms/banner.less +++ b/packages/cfpb-notifications/src/organisms/banner.less @@ -17,13 +17,13 @@ border: none; padding: 0; - &_icon { + &__icon { left: 0; top: 0; } } - &__dark { + &--dark { background: @teal-mid-dark; border-color: @teal-mid-dark; color: @white; diff --git a/packages/cfpb-pagination/src/molecules/pagination.less b/packages/cfpb-pagination/src/molecules/pagination.less index 0102e837ec..30a8c3b855 100644 --- a/packages/cfpb-pagination/src/molecules/pagination.less +++ b/packages/cfpb-pagination/src/molecules/pagination.less @@ -5,7 +5,7 @@ .m-pagination { position: relative; - &_form { + &__form { padding: unit((5px / @base-font-size-px), em); border-radius: unit((4px / @base-font-size-px), em); background: @pagination-bg; @@ -13,7 +13,7 @@ text-align: center; } - &_current-page { + &__current-page { // 45px is a magic number to provide enough room for three digits // and the number spinners for type="number" inputs on desktop width: unit((45px / @base-font-size-px), em); @@ -25,7 +25,7 @@ text-align: right; } - &_label { + &__label { display: inline-block; // 10px + a normal inline single space ~= spec'ed value of 15px @@ -33,13 +33,13 @@ vertical-align: middle; } - &_btn-submit { + &__btn-submit { margin: 0; vertical-align: middle; } - &_btn-prev, - &_btn-next { + &__btn-prev, + &__btn-next { min-width: @pagination-btn-min-width-px; // 22px is a magic number to vertically center the type in the button @@ -47,39 +47,39 @@ line-height: 22px; text-align: center; - &.a-btn__disabled { + &.a-btn--disabled { background-color: @pagination-bg; border-color: transparent; } } - &_btn-next { + &__btn-next { position: absolute; right: 0; } // Mobile only. .respond-to-max(@bp-xs-max, { - &_btn-prev, - &_btn-next { + &__btn-prev, + &__btn-next { margin-bottom: unit( ( 15px / @base-font-size-px ), em ); } }); // Tablet and above. .respond-to-min(@bp-sm-min, { - &_btn-prev, - &_btn-next { + &__btn-prev, + &__btn-next { height: 100%; } - &_btn-prev { + &__btn-prev { position: absolute; border-top-right-radius: 0; border-bottom-right-radius: 0; } - &_btn-next { + &__btn-next { border-top-left-radius: 0; border-bottom-left-radius: 0; } diff --git a/packages/cfpb-tables/src/cfpb-tables.less b/packages/cfpb-tables/src/cfpb-tables.less index 127734a771..bc053ed5c4 100644 --- a/packages/cfpb-tables/src/cfpb-tables.less +++ b/packages/cfpb-tables/src/cfpb-tables.less @@ -28,11 +28,11 @@ } } -.o-table_cell__right-align { +.o-table__cell--right-align { text-align: right; } -.o-table-wrapper__scrolling { +.o-table-wrapper--scrolling { box-sizing: border-box; overflow-y: hidden; table { @@ -43,7 +43,7 @@ // Tablet and above. .respond-to-min(@bp-sm-min, { - .o-table__striped { + .o-table--striped { .striped-table(); } }); @@ -55,14 +55,14 @@ width: 100%; } - .o-table__striped tr:nth-child(even) { + .o-table--striped tr:nth-child(even) { & > th, & > td { background: @table-cell-bg; } } - .o-table__stack-on-small { + .o-table--stack-on-small { border-top: 1px solid @gray-40; tr, @@ -100,7 +100,7 @@ } } - .o-table__entry-header-on-small { + .o-table--entry-header-on-small { & > tbody td:first-child { padding-bottom: 0.75em; border-bottom: 1px solid @table-border; diff --git a/packages/cfpb-typography/src/atoms/headings.less b/packages/cfpb-typography/src/atoms/headings.less index 6ad81acec5..2e78ac48f8 100644 --- a/packages/cfpb-typography/src/atoms/headings.less +++ b/packages/cfpb-typography/src/atoms/headings.less @@ -4,7 +4,7 @@ color: @heading__icon; a& { - .u-link__colors( @heading__icon, @heading__icon__hover ); + .u-link--colors( @heading__icon, @heading__icon__hover ); border-width: 0; } diff --git a/packages/cfpb-typography/src/atoms/links.less b/packages/cfpb-typography/src/atoms/links.less index f22a549367..31a3240b86 100644 --- a/packages/cfpb-typography/src/atoms/links.less +++ b/packages/cfpb-typography/src/atoms/links.less @@ -3,16 +3,16 @@ // Required for jump link modifier // -.a-link__icon, -.a-link__jump { +.a-link--icon, +.a-link--jump { border-bottom-width: 0; - .a-link_text { + .a-link__text { border-bottom-width: 1px; border-bottom-style: inherit; } - &.a-link__no-wrap { + &.a-link--no-wrap { white-space: nowrap; } } @@ -21,7 +21,7 @@ // Jump link // -.a-link__jump { +.a-link--jump { font-weight: 500; // Mobile only. @@ -36,19 +36,19 @@ bottom: 50%; } - &.a-link__icon-after-text { + &.a-link--icon-after-text { padding-right: 1.25em; } - &.a-link__icon-after-text .cf-icon-svg { + &.a-link--icon-after-text .cf-icon-svg { right: 0; } - &.a-link__icon-before-text { + &.a-link--icon-before-text { padding-left: 1.25em; } - &.a-link__icon-before-text .cf-icon-svg { + &.a-link--icon-before-text .cf-icon-svg { left: 0; } }); @@ -73,7 +73,7 @@ // 100% width is needed when block or jump link are applied to a