-
Notifications
You must be signed in to change notification settings - Fork 8
Expand file tree
/
Copy path5253.css.map
More file actions
1 lines (1 loc) · 41.6 KB
/
5253.css.map
File metadata and controls
1 lines (1 loc) · 41.6 KB
1
{"version":3,"file":"5253.css","mappings":"AAEA;AMAA;ACAA","sources":["webpack://data-transparency-ui/./styles/components/table/_table.scss","webpack://data-transparency-ui/./styles/global/_vars.scss","webpack://data-transparency-ui/./styles/components/table/_tableHeader.scss","webpack://data-transparency-ui/./styles/global/_mixins.scss","webpack://data-transparency-ui/./styles/components/table/_tableStacked.scss","webpack://data-transparency-ui/./styles/components/table/_topfiveTable.scss","webpack://data-transparency-ui/./styles/components/_messages.scss","webpack://data-transparency-ui/./styles/components/_picker.scss"],"sourcesContent":["@import \"../../global/index\";\r\n\r\ntable.usda-table {\r\n border-spacing: 0;\r\n border-collapse: collapse;\r\n font-family: $font-sans;\r\n color: $color-gray;\r\n overflow-x: scroll;\r\n\r\n thead.usda-table__head {\r\n @import './tableHeader';\r\n }\r\n\r\n tbody.usda-table__body {\r\n font-size: rem(14);\r\n\r\n td.usda-table__cell {\r\n text-align: left;\r\n vertical-align: baseline;\r\n\r\n &.usda-table__cell_right {\r\n text-align: right;\r\n }\r\n }\r\n\r\n td.usda-table__cell.stickyColumn {\r\n position: sticky;\r\n left: 0;\r\n border-right: solid 1px $gray-cool-10 !important;\r\n }\r\n\r\n tr.usda-table__row {\r\n td.usda-table__cell {\r\n padding: rem(15);\r\n }\r\n\r\n td.usda-table__cell.stickyColumn {\r\n background-color: $color-white;\r\n }\r\n\r\n &.usda-table__row_expandable {\r\n button.usda-table__expand-button {\r\n @include button-unstyled;\r\n color: $color-primary;\r\n margin-right: rem(8);\r\n }\r\n\r\n td.usda-table__cell {\r\n padding-right: rem(35);\r\n\r\n .usda-table__expandable-cell-content {\r\n display: flex;\r\n align-items: flex-start;\r\n }\r\n }\r\n\r\n td.usda-table__cell_name {\r\n // add extra padding when no arrow is present because there are no children\r\n padding-left: rem(30);\r\n }\r\n }\r\n\r\n .table-header_body-header {\r\n // First column headers\r\n padding: rem(15);\r\n }\r\n }\r\n\r\n .usda-table__message-cell {\r\n border: solid rem(1) $gray-cool-10;\r\n }\r\n\r\n tr.usda-table__child-row {\r\n background-color: $color-white;\r\n\r\n &.usda-table__child-row_divider {\r\n font-weight: $font-semibold;\r\n }\r\n\r\n td.usda-table__cell {\r\n &.usda-table__cell_child {\r\n padding: 0;\r\n\r\n .usda-table__child-cell-content {\r\n padding: rem(10) rem(15);\r\n margin-right: rem(20);\r\n }\r\n\r\n &:first-of-type {\r\n // add extra padding to the first cell of every child row\r\n padding-left: rem(20);\r\n\r\n .usda-table__child-cell-content {\r\n padding-left: rem(30);\r\n border-left: solid rem(1) $gray-cool-10;\r\n }\r\n }\r\n }\r\n }\r\n\r\n &.usda-table__child-row_last {\r\n // on the last row's first cell, add space below the line\r\n td.usda-table__cell {\r\n &.usda-table__cell_child {\r\n &:first-of-type {\r\n padding-bottom: rem(5);\r\n\r\n .usda-table__child-cell-content {\r\n padding-bottom: rem(5);\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n &.table-for-new-search-page {\r\n margin-top: 0;\r\n margin-bottom: 0;\r\n .usda-table__body-special-color {\r\n background-color: $blue-warm-5;\r\n }\r\n\r\n th {\r\n border: none;\r\n border-top: rem(1) solid $gray-cool-10;\r\n border-right: rem(1) solid $gray-cool-10;\r\n border-bottom: rem(1) solid $gray-cool-10;\r\n }\r\n\r\n td {\r\n border: none;\r\n border-right: rem(1) solid $gray-cool-10;\r\n border-bottom: rem(1) solid $gray-cool-10;\r\n }\r\n\r\n\r\n td.stickyColumn {\r\n border-left:rem(1) solid $gray-cool-10;\r\n }\r\n th.stickyColumn:first-of-type {\r\n border-left:rem(1) solid $gray-cool-10;\r\n }\r\n\r\n thead.usda-table__head {\r\n th.table-header {\r\n color: $theme-color-headline;\r\n &:first-of-type {\r\n border-top-left-radius: rem(4);\r\n }\r\n &:last-of-type {\r\n border-top-right-radius: rem(4);\r\n }\r\n\r\n .table-header__content {\r\n padding: rem(12) rem(16);\r\n }\r\n }\r\n }\r\n\r\n tbody.usda-table__body {\r\n color: $gray-90;\r\n line-height: 1.5;\r\n\r\n tr:last-of-type {\r\n td:first-of-type {\r\n border-bottom-left-radius: rem(4);\r\n }\r\n\r\n td:last-of-type {\r\n border-bottom-right-radius: rem(4);\r\n }\r\n }\r\n\r\n .usda-table__row {\r\n &:hover {\r\n background-color: $gray-cool-2;\r\n\r\n &.special-hover-color-7 td:nth-last-of-type(-n + 7) {\r\n background-color: $blue-warm-10;\r\n }\r\n\r\n &.special-hover-color-6 td:nth-last-of-type(-n + 6) {\r\n background-color: $blue-warm-10;\r\n }\r\n\r\n &.special-hover-color-5 td:nth-last-of-type(-n + 5) {\r\n background-color: $blue-warm-10;\r\n }\r\n\r\n &.special-hover-color-4 td:nth-last-of-type(-n + 4) {\r\n background-color: $blue-warm-10;\r\n }\r\n\r\n &.special-hover-color-3 td:nth-last-of-type(-n + 3) {\r\n background-color: $blue-warm-10;\r\n }\r\n\r\n &.special-hover-color-2 td:nth-last-of-type(-n + 2) {\r\n background-color: $blue-warm-10;\r\n }\r\n\r\n &.special-hover-color-1 td:nth-last-of-type(-n + 1) {\r\n background-color: $blue-warm-10;\r\n }\r\n }\r\n\r\n td.usda-table__cell {\r\n padding: rem(8) rem(16);\r\n height: inherit;\r\n\r\n @media (max-width: ($tablet-screen - 1)) {\r\n padding: 0 rem(16) rem(12);\r\n }\r\n }\r\n\r\n // if the td contains an a tag, we want the entire cell to be clickable\r\n // so we move the padding into the a tag\r\n td.usda-table__cell:has(a) {\r\n padding: 0;\r\n\r\n a {\r\n padding: rem(8) rem(16);\r\n display: block;\r\n width: 100%;\r\n height: inherit;\r\n color: $theme-color-1;\r\n\r\n &:hover {\r\n color: $blue-vivid-70;\r\n }\r\n\r\n &:visited {\r\n color: $violet-70v;\r\n }\r\n }\r\n\r\n svg {\r\n display: none;\r\n }\r\n\r\n @media (max-width: ($tablet-screen - 1)) {\r\n padding: 0 rem(16) rem(12);\r\n\r\n a {\r\n padding: 0;\r\n }\r\n\r\n svg {\r\n display: unset;\r\n padding-left: rem(4);\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n &.award-results-table-dtui {\r\n // this is needed to make the right border and the box shadow appear on the sticky column\r\n border-collapse: separate;\r\n th.table-header:last-of-type {\r\n border-right: rem(1) solid $gray-cool-10;\r\n }\r\n\r\n thead.usda-table__head {\r\n th {\r\n position: -webkit-sticky; /* Safari */\r\n position: sticky;\r\n top: 0;\r\n }\r\n }\r\n\r\n tbody.usda-table__body {\r\n .usda-table__row {\r\n td.usda-table__cell {\r\n vertical-align: top;\r\n // because of overlapping css rules, we need to delete the borders here\r\n // to avoid double borders\r\n // and add the bottom border\r\n\r\n &:last-of-type {\r\n border-right: rem(1) solid $gray-cool-10;\r\n }\r\n }\r\n\r\n &:hover {\r\n background-color: $gray-cool-2;\r\n\r\n td.usda-table__cell.stickyColumn {\r\n background-color: $gray-cool-2;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n}\r\n\r\n@import './tableStacked';\r\n@import './topfiveTable';\r\n","// Typography\r\n// $em-base must be declared before using the rem() function\r\n$em-base: 10px;\r\n\r\n$font-size-56: 5.6rem;\r\n$font-size-48: 4.8rem;\r\n$font-size-40: 4rem;\r\n\r\n$font-size-32: 3.2rem;\r\n$font-size-28: 2.8rem;\r\n$font-size-24: 2.4rem;\r\n$font-size-20: 2rem;\r\n$font-size-16: 1.6rem;\r\n$font-size-12: 1.2rem;\r\n\r\n$font-size-14: 1.4rem;\r\n\r\n$base-font-size: $font-size-16;\r\n$small-font-size: $font-size-14;\r\n$smallest-font-size: 1.1rem;\r\n$lead-font-size: $font-size-20;\r\n$title-font-size: 5.2rem;\r\n\r\n$h1-font-size: $font-size-56;\r\n$h2-font-size: $font-size-40;\r\n$h3-font-size: $font-size-32;\r\n$h4-font-size: $font-size-28;\r\n$h5-font-size: $font-size-20;\r\n$h6-font-size: 1.9rem;\r\n\r\n$base-line-height: 1.5;\r\n$heading-line-height: 1.2;\r\n$lead-line-height: 1.7;\r\n\r\n$font-light: 200;\r\n$font-normal: 400;\r\n$font-semibold: 600;\r\n$font-bold: 700;\r\n\r\n$image-path: './img';\r\n\r\n// USWDS Color Tokens\r\n$yellow-20v: #face00;\r\n$orange-30v: #FA9441;\r\n$orange-warm-40v: #FF580A;\r\n$orange-warm-10v: #ffe2d1;\r\n$mint-5: #dbf6ed;\r\n$mint-40: #34A37E;\r\n$cyan-5v: #e5faff;\r\n$cyan-10: #ccecf2;\r\n$cyan-30v: #00BDE3;\r\n$cyan-40: #449dac;\r\n$cyan-40v: #009ec1;\r\n$cyan-50: #168092;\r\n$cyan-60v: #00687d;\r\n$cyan-vivid-70: #0e4f5c;\r\n$cyan-vivid-80: #093b44;\r\n$blue-5: #eff6fb;\r\n$blue-10: #D9E8F6;\r\n$blue-50: #2378C3;\r\n$blue-60v: #005ea2;\r\n$blue-70v: #0B4778;\r\n$blue-80v: #002d3f;\r\n$blue-warm-5: #ecf1f7;\r\n$blue-warm-10: #e1e7f1;\r\n$blue-warm-20: #bbcae4;\r\n$blue-vivid-5v: #e8f5ff;\r\n$blue-warm-5v: #edf5ff;\r\n$blue-warm-40v: #5994f6;\r\n$blue-warm-60v: #0050d8;\r\n$blue-warm-70v: #1A4480;\r\n$indigo-5v: #f0f0ff;\r\n$indigo-50v: #656bd7;\r\n$indigo-60v: #4a50c4;\r\n$indigo-70v: #3333a3;\r\n$indigo-cool-80v: #1B2B85;\r\n$violet-50v: #9355DC;\r\n$violet-60v: #783cb9;\r\n$violet-70v: #54278f;\r\n\r\n$gray-2: #F9F9F9;\r\n$gray-10: #E6E6E6;\r\n$gray-60: #5C5C5C;\r\n$gray-90: #1B1B1B;\r\n$gray-cool-1: #FBFCFD;\r\n$gray-cool-2: #f7f9fa;\r\n$gray-cool-3: #f5f6f7;\r\n$gray-cool-5: #edeff0;\r\n$gray-cool-10: #dfe1e2;\r\n$gray-cool-20: #c6cace;\r\n$gray-cool-30: #a9aeb1;\r\n$gray-cool-50: #71767a;\r\n$gray-cool-60: #565C65;\r\n$gray-cool-90: #1c1d1f;\r\n\r\n// Theme Colors\r\n$theme-color-1: $blue-50;\r\n$theme-color-2: $cyan-50;\r\n$theme-color-3: $blue-warm-70v;\r\n$theme-color-4: $indigo-cool-80v;\r\n$theme-color-5: $blue-warm-5v;\r\n$theme-color-6: $blue-60v;\r\n$theme-color-7: $cyan-10;\r\n$theme-color-accent-1: $mint-40;\r\n$theme-color-accent-2: $cyan-30v;\r\n$theme-color-accent-3: $violet-50v;\r\n$theme-color-accent-4: $orange-warm-40v;\r\n$theme-color-accent-4-light: $orange-warm-10v;\r\n$theme-color-accent-5: $orange-30v;\r\n$theme-color-accent-6: $cyan-40;\r\n$theme-color-accent-7: $blue-vivid-5v;\r\n$theme-color-accent-8: $blue-60v;\r\n$theme-color-accent-9: $mint-5;\r\n$theme-color-accent-10: $cyan-5v;\r\n$theme-color-accent-11: $indigo-5v;\r\n$theme-color-accent-12: $cyan-40v;\r\n$theme-color-accent-13: $violet-60v;\r\n$theme-color-accent-14: $indigo-60v;\r\n$theme-color-accent-15: $blue-warm-60v;\r\n$theme-color-accent-16: $indigo-50v;\r\n\r\n$theme-color-headline: $gray-90;\r\n$theme-color-headline-inverse: $gray-2;\r\n$theme-color-body: $gray-60;\r\n$theme-color-body-inverse: $gray-10;\r\n\r\n$theme-color-underline: $gray-cool-20;\r\n\r\n\r\n// Color\r\n$color-primary: #0071bc;\r\n$color-primary-darker: #205493;\r\n$color-primary-darkest: #112e51;\r\n\r\n$color-primary-alt: #02bfe7;\r\n$color-primary-alt-dark: #00a6d2;\r\n$color-primary-alt-darkest: #046b99;\r\n$color-primary-alt-light: #9bdaf1; // lighten($color-primary-alt, 60%)\r\n$color-primary-alt-lightest: #e1f3f8; // lighten($color-primary-alt, 90%)\r\n$blue-warm-70v: #1A4480;\r\n$blue-50: #2378c3;\r\n$blue-vivid-70: #0b4778;\r\n$blue-vivid-80: #002d3f;\r\n\r\n$color-secondary: #e31c3d;\r\n$color-secondary-dark: #cd2026;\r\n$color-secondary-darkest: #981b1e;\r\n$color-secondary-light: #e59393; // lighten($color-secondary, 60%)\r\n$color-secondary-lightest: #f9dede; // lighten($color-secondary, 90%)\r\n\r\n$color-white: #fff;\r\n$color-black: #000;\r\n$color-base: #555;\r\n$color-link: $color-primary;\r\n$color-gray-dark: #323a45;\r\n$color-gray: #5b616b; // lighten($color-gray-dark, 20%)\r\n$color-gray-medium: #757575; // lightest gray that passes color contrast\r\n$color-gray-light: #aeb0b5; // lighten($color-gray-dark, 60%)\r\n$color-gray-lighter: #d6d7d9; // lighten($color-gray-dark, 80%)\r\n$color-gray-lightest: #f1f1f1; // lighten($color-gray-dark, 91%)\r\n$color-gray-border: #D8D8D8;\r\n$gray-cool-10: #dfe1e2;\r\n$gray-cool-5: #edeff0;\r\n$gray-cool-1: #fbfcfd;\r\n$gray-2: #f9f9f9;\r\n$gray-10: #e6e6e6;\r\n$green-cool-50: #4d8055;\r\n\r\n$color-gray-warm-dark: #494440;\r\n$color-gray-warm-light: #e4e2e0;\r\n$color-gray-cool-light: #dce4ef;\r\n\r\n$color-gold: #fdb81e;\r\n$color-gold-light: #f9c642; // lighten($color-gold, 20%)\r\n$color-gold-lighter: #fad980; // lighten($color-gold, 60%)\r\n$color-gold-lightest: #fff1d2; // lighten($color-gold, 83%)\r\n$color-green: #2e8540;\r\n$color-green-light: #4aa564;\r\n$color-green-lighter: #94bfa2;\r\n$color-green-lightest: #e7f4e4;\r\n$green-cool-50: #4d8055;\r\n$color-cool-blue: $color-primary-darker;\r\n$color-cool-blue-light: #4773aa;\r\n$color-cool-blue-lighter: #8ba6ca;\r\n$color-cool-blue-lightest: $color-gray-cool-light;\r\n\r\n$color-warning: #FCF8E3;\r\n$color-warning-dark: #F0AD4E;\r\n\r\n$color-vis-lightest:\t\t #d0e9ef;\r\n$color-vis-lighter:\t\t \t #a7c2ca;\r\n$color-vis-light:\t\t \t #7f9ba7;\r\n$color-vis-dark:\t\t \t #597785;\r\n$color-vis-darker:\t\t \t #335565;\r\n$color-vis-darkest:\t\t \t #083546;\r\n\r\n$color-vis-green-light: #45bb8c;\r\n$color-vis-green-dark: #0d817c;\r\n$color-vis-green-darkest: #1b4956;\r\n\r\n$color-active:\t\t\t\t #F2B733;\r\n$color-focus: #3e94cf;\r\n$color-visited: #4c2c92;\r\n$color-shadow: rgba(#000, 0.3);\r\n$color-tab-inactive:\t $color-gray-lightest;\r\n$color-gray-border: #D8D8D8;\r\n\r\n$color-placeholder: #747474;\r\n\r\n$color-disaster-covid-19: #6E338E;\r\n$color-covid-19-obligations: #B699C6;\r\n$color-covid-dark-purple: #3B005B;\r\n\r\n$colors-grants-nff: #47AAA7;\r\n$colors-loans-subsidy: #8c6e86;\r\n$colors-loans-face-value: #ded5db;\r\n\r\n$colors-obligated: $color-cool-blue-light;\r\n$colors-current: #8ba6c9;\r\n$colors-potential: #dce4ee;\r\n$colors-outlayed: #0b2e5a;\r\n\r\n$color-infrastructure-obligations: #afcdd5;\r\n$color-infrastructure-outlays: #2d6878;\r\n\r\n$headline-color: $gray-90;\r\n$body-color: $gray-60;\r\n$card-outline-color: $gray-cool-10;\r\n$color-base: #555;\r\n\r\n// Font Sizes\r\n$em-base: 10px;\r\n$small-font-size: 1.4rem;\r\n$base-font-size: 1.6rem;\r\n\r\n// Font Weights:\r\n$font-light:\t\t 200;\r\n$font-normal: 400;\r\n$font-semibold: \t 600;\r\n$font-bold: 700;\r\n\r\n// Font Families:\r\n$helvetica: \"Helvetica Neue\", \"Helvetica\", \"Roboto\", \"Arial\", sans-serif;\r\n$georgia: \"Georgia\", \"Cambria\", \"Times New Roman\", \"Times\", serif;\r\n$font-sans: 'Source Sans Pro';\r\n$font-serif: 'Merriweather', $georgia;\r\n\r\n$color-disaster-covid-19: #6E338E;\r\n$color-covid-19-obligations: #B699C6;\r\n$color-covid-dark-purple: #3B005B;\r\n\r\n$colors-grants-nff: #47AAA7;\r\n$colors-loans-subsidy: #8c6e86;\r\n$colors-loans-face-value: #ded5db;\r\n\r\n//$colors-obligated: $color-cool-blue-light;\r\n$colors-current: #8ba6c9;\r\n$colors-potential: #dce4ee;\r\n$colors-outlayed: #0b2e5a;\r\n\r\n$color-infrastructure-obligations: #afcdd5;\r\n$color-infrastructure-outlays: #2d6878;\r\n\r\n$headline-color: $gray-90;\r\n$body-color: $gray-60;\r\n$card-outline-color: $gray-cool-10;\r\n\r\n// Shadows\r\n$shadow-sm: 0 4px 8px rgba(0, 0, 0, 0.1); //USWDS Shadow 2\r\n$shadow-md: 0 8px 16px rgba(0, 0, 0, 0.1);\r\n$shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.1);\r\n\r\n\r\n// Global Padding and Margins\r\n// (example usage {padding: ($global-pad * 4);} = 60px of padding.)\r\n$global-pad-mrg: 1.5rem;\r\n$global-pad: $global-pad-mrg;\r\n$global-mrg: $global-pad-mrg;\r\n\r\n// Global Padding and Margins (new units for 2022 homepage redesign)\r\n// (example usage {padding: ($global-padding * 4);} = 32px of padding.)\r\n$global-spacing-unit: 0.8rem;\r\n$global-padding: $global-spacing-unit;\r\n$global-margin: $global-spacing-unit;\r\n\r\n// Grid Sizes\r\n$grid-column: 8.33%;\r\n\r\n// Mobile First Breakpoints\r\n$small-screen: 320px;\r\n$tablet-screen: 768px;\r\n$medium-screen: 992px;\r\n$large-screen: 1200px;\r\n$m-large-screen: 1400px;\r\n$x-large-screen: 1640px;\r\n\r\n// Misc:\r\n$color-shadow: rgba(#000, 0.3);\r\n$box-shadow: 0 0 2px $color-shadow;\r\n\r\n// 44 x 44 pixels hit target following Apple iOS Human Interface Guidelines\r\n$hit-area: 4.4rem;\r\n\r\n// z-indices (to use, add a number 0-9 to the layer you want to use)\r\n// this keeps out z-indices in check without going to absurdly high numbers\r\n$z-base: 0;\r\n$z-header: 100;\r\n$z-guide: 200;\r\n$z-modal: 300;\r\n$z-mobile-filter: 400;\r\n$z-mobile-nav: 800;\r\n\r\n// new colors w/ same names as design\r\n$color-grass-light: #78BF8F;\r\n$color-grass-lighter: #BBDFC7;\r\n\r\n// drop shadow\r\n$shadow-3: 0 8px 16px 0 rgba(0,0,0,0.1);\r\n","tr.usda-table__row {\r\n vertical-align: baseline;\r\n}\r\nth.table-header {\r\n background-color: $gray-cool-3;\r\n padding: 0;\r\n &.nested-header {\r\n .table-header__content {\r\n padding: 0;\r\n flex-wrap: wrap;\r\n }\r\n .table-header__label {\r\n text-indent: rem(10);\r\n text-align: left;\r\n }\r\n }\r\n .table-header__content {\r\n display: flex;\r\n flex-wrap: wrap;\r\n padding: rem(15);\r\n text-align: left;\r\n .table-header__label {\r\n flex: (0 0 auto);\r\n font-size: rem(14);\r\n font-weight: $font-semibold;\r\n line-height: rem(18);\r\n width: auto;\r\n display: flex;\r\n position: relative;\r\n max-width: 100%;\r\n align-items: flex-start;\r\n }\r\n &.table-header__content_right {\r\n justify-content: flex-end;\r\n text-align: right;\r\n }\r\n .table-header__sort {\r\n margin-left: rem(8);\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n button.table-header__icon {\r\n @include button-unstyled;\r\n color: $color-gray-light;\r\n display: block;\r\n height: rem(9);\r\n &:focus {\r\n outline: none;\r\n }\r\n svg {\r\n vertical-align: 0;\r\n margin-top: rem(-9);\r\n pointer-events: none;\r\n width: rem(13);\r\n color: $color-gray-lighter;\r\n }\r\n &.table-header__icon_active svg {\r\n color: $color-gold;\r\n }\r\n }\r\n }\r\n }\r\n &.table-header_body-header {\r\n background-color: transparent;\r\n border: 0;\r\n }\r\n}\r\n\r\n.stickyColumn {\r\n position: sticky;\r\n left: 0;\r\n z-index: 1;\r\n border-right: solid 1px $gray-cool-10;\r\n\r\n &.add-box-shadow {\r\n // same as $shadow-sm, but only on right side\r\n box-shadow: 4px 0 8px -2px rgba(0, 0, 0, 0.1);\r\n }\r\n}\r\n\r\n.table-header__subaward-color-7:nth-last-of-type(-n + 7) {\r\n background-color: $blue-warm-20;\r\n}\r\n\r\n.table-header__subaward-color-6:nth-last-of-type(-n + 6) {\r\n background-color: $blue-warm-20;\r\n}\r\n\r\n.table-header__subaward-color-5:nth-last-of-type(-n + 5) {\r\n background-color: $blue-warm-20;\r\n}\r\n\r\n.table-header__subaward-color-4:nth-last-of-type(-n + 4) {\r\n background-color: $blue-warm-20;\r\n}\r\n\r\n.table-header__subaward-color-3:nth-last-of-type(-n + 3) {\r\n background-color: $blue-warm-20;\r\n}\r\n\r\n.table-header__subaward-color-2:nth-last-of-type(-n + 2) {\r\n background-color: $blue-warm-20;\r\n}\r\n\r\n.table-header__subaward-color-1:nth-last-of-type(-n + 1) {\r\n background-color: $blue-warm-20;\r\n}\r\n","@mixin for-phone-only {\r\n @media (max-width: $tablet-screen) { @content; }\r\n}\r\n@mixin for-tablet-portrait-up {\r\n @media (min-width: $tablet-screen) { @content; }\r\n}\r\n@mixin for-tablet-portrait-down {\r\n @media (max-width: $medium-screen - 1) { @content; }\r\n}\r\n@mixin for-tablet-landscape-up {\r\n @media (min-width: $medium-screen) { @content; }\r\n}\r\n@mixin for-desktop-up {\r\n @media (min-width: $large-screen) { @content; }\r\n}\r\n@mixin for-big-desktop-up {\r\n @media (min-width: $x-large-screen) { @content; }\r\n}\r\n\r\n@mixin unstyled-list() {\r\n margin: 0;\r\n list-style-type: none;\r\n padding-left: 0;\r\n\r\n > li {\r\n margin-bottom: 0;\r\n &:before {\r\n display: none;\r\n }\r\n &:after {\r\n display: none;\r\n }\r\n }\r\n}\r\n\r\n@mixin button-unstyled {\r\n background-color: transparent;\r\n border: 0;\r\n border-radius: 0;\r\n font-weight: $font-normal;\r\n margin: 0;\r\n padding: 0;\r\n text-align: left;\r\n &:hover {\r\n background-color: transparent;\r\n }\r\n}","// Responsive Stacked Table Variation\r\n\r\ntable.usa-dt-table__stacked, div.usa-dt-table__stacked {\r\n max-width: 100%;\r\n\r\n @media all and (max-width: ($tablet-screen - 1)){\r\n display: block;\r\n width: 100%;\r\n\r\n [class*=\"usda-table__cell\"] {\r\n box-sizing: border-box;\r\n }\r\n\r\n thead.usda-table__head, div.usda-table__head {\r\n display: none;\r\n }\r\n\r\n tbody.usda-table__body, div.usda-table__body {\r\n display: inline-table;\r\n width: 100%;\r\n\r\n tr.usda-table__row, div.usda-table__row {\r\n display: block;\r\n width: 100%;\r\n\r\n\r\n @media (max-width: $tablet-screen - 1) {\r\n font-weight: $font-semibold;\r\n\r\n .usda-table__cell-heading {\r\n color: $gray-60;\r\n }\r\n\r\n .usda-table__cell-text {\r\n font-size: $small-font-size;\r\n }\r\n\r\n td:first-of-type {\r\n background-color: $blue-warm-70v;\r\n font-size: rem(18);\r\n margin-bottom: rem(12);\r\n color: $gray-2;\r\n\r\n .usda-table__cell-heading {\r\n color: $gray-10;\r\n }\r\n\r\n a {\r\n color: $gray-2 !important;\r\n text-decoration: underline;\r\n }\r\n }\r\n }\r\n\r\n td.usda-table__cell, div.usda-table__cell {\r\n // keep display block (vs. flex) for accessibility\r\n display: block;\r\n width: 100%;\r\n padding: 0 0 rem(12) rem(16);\r\n line-height: 1.5;\r\n word-break: break-all;\r\n text-align: left;\r\n\r\n @media (max-width: $tablet-screen - 1) {\r\n padding: 0 rem(12) rem(12) rem(16);\r\n }\r\n\r\n .usda-table__cell-heading-container {\r\n display: flex;\r\n flex-wrap: nowrap;\r\n justify-content: space-between;\r\n\r\n .usda-table__cell-heading {\r\n font-weight: $font-semibold;\r\n\r\n @media (max-width: $tablet-screen - 1) {\r\n font-weight: normal;\r\n font-size: rem(12);\r\n text-transform: uppercase;\r\n }\r\n }\r\n\r\n .usda-table__cell-message {\r\n font-size: $small-font-size;\r\n font-weight: $font-semibold;\r\n line-height: 1.5;\r\n color: $blue-50;\r\n\r\n svg {\r\n font-size: $small-font-size;\r\n padding-top: rem(2);\r\n color: $blue-50;\r\n }\r\n }\r\n }\r\n\r\n &:first-child {\r\n border-top: solid rem(4) $color-gray-lighter;\r\n padding-top: rem(12);\r\n }\r\n }\r\n\r\n &.usda-table__row_expandable {\r\n\r\n td.usda-table__cell_name{\r\n padding-left: rem(32);\r\n }\r\n\r\n td.usda-table__cell {\r\n padding-left: rem(32);\r\n\r\n .usda-table__expandable-cell-content {\r\n align-items: center;\r\n position: relative;\r\n }\r\n\r\n .usda-table__expand-button {\r\n padding: 0;\r\n margin: 0;\r\n width: rem(32);\r\n height: rem(24);\r\n text-align: center;\r\n position: absolute;\r\n top: rem(-2);\r\n left: rem(-32);\r\n font-size: rem(14);\r\n z-index: 1;\r\n }\r\n }\r\n }\r\n\r\n &.usda-table__row_is-expanded {\r\n\r\n td.usda-table__cell {\r\n position: relative;\r\n }\r\n\r\n td.usda-table__cell:first-child:after {\r\n height: calc(100% - #{rem(56)});\r\n top: auto;\r\n bottom: 0;\r\n }\r\n td.usda-table__cell:after {\r\n content: '';\r\n border-left: solid rem(1) $color-gray-light;\r\n position: absolute;\r\n top: 0;\r\n left: rem(16);\r\n height: 100%;\r\n }\r\n }\r\n }\r\n\r\n tr.usda-table__child-row, div.usda-table__child-row {\r\n display: block;\r\n width: 100%;\r\n\r\n &.usda-table__child-row_divider {\r\n // TODO: Cross-check this\r\n display: none;\r\n }\r\n\r\n td.usda-table__cell, div.usda-table__cell {\r\n // keep display block (vs. flex) for accessibility\r\n display: block;\r\n width: 100%;\r\n padding: 0 rem(16) rem(16);\r\n line-height: 1.5;\r\n word-break: break-all;\r\n text-align: left;\r\n\r\n &:before {\r\n content: attr(data-label) ' ';\r\n font-weight: $font-semibold;\r\n display: block;\r\n width: 100%;\r\n text-align: left;\r\n word-break: break-all;\r\n }\r\n\r\n &.usda-table__cell_child {\r\n padding: 0 rem(16) rem(12);\r\n padding-left: rem(48);\r\n position: relative;\r\n\r\n &:after {\r\n content: '';\r\n border-left: solid rem(1) $color-gray-light;\r\n position: absolute;\r\n top: 0;\r\n left: rem(16);\r\n height: 100%;\r\n }\r\n\r\n .usda-table__child-cell-content {\r\n padding: 0;\r\n }\r\n\r\n &:first-of-type {\r\n padding-left: rem(48);\r\n\r\n .usda-table__child-cell-content {\r\n padding: 0;\r\n border-width: 0;\r\n }\r\n }\r\n }\r\n }\r\n\r\n &.usda-table__child-row_last {\r\n\r\n td.usda-table__cell, div.usda-table__cell{\r\n\r\n &.usda-table__cell_child {\r\n\r\n &:first-of-type {\r\n padding-bottom: rem(12);\r\n\r\n .usda-table__child-cell-content {\r\n padding-bottom: 0;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n // additional styles for redone mobile table\r\n div.usda-table__cell-heading {\r\n margin-bottom: 0 !important;\r\n line-height: 18px;\r\n }\r\n div.usda-table__cell-heading-container {\r\n margin-bottom: 0 !important;\r\n }\r\n div.collapsible-row-div {\r\n span.collapsible-row-button {\r\n display: flex;\r\n align-items: center;\r\n font-size: 12px;\r\n font-weight: $font-semibold;\r\n line-height: 18px;\r\n padding-left: 16px;\r\n padding-bottom: 16px;\r\n // padding-top: 16px;\r\n color: $blue-50;\r\n\r\n svg {\r\n margin-left: 4px;\r\n }\r\n\r\n }\r\n div.usda-table__cell:first-of-type {\r\n padding-top: 0 !important;\r\n background-color: unset;\r\n }\r\n\r\n #mobile-row-gradient {\r\n height: 56px;\r\n position: relative;\r\n background: linear-gradient(\r\n to top,\r\n #1b4485 0%,\r\n #1b4485 50%,\r\n #768eb5 50%,\r\n #768eb5 100%);\r\n }\r\n }\r\n\r\n .usda-table__body {\r\n .mobile-table-rows {\r\n div.usda-table__cell.usda-mobile__header {\r\n background-color: $blue-warm-70v;\r\n margin-bottom: 12px;\r\n .usda-table__cell-heading {\r\n color: $gray-10;\r\n }\r\n a {\r\n color: $gray-2;\r\n text-decoration: underline;\r\n }\r\n\r\n .usda-table__cell-text {\r\n color: $gray-2 !important;\r\n font-size: rem(18) !important;\r\n }\r\n }\r\n\r\n div.usda-table__cell { \r\n padding-bottom: 12px !important;\r\n }\r\n\r\n }\r\n }\r\n }\r\n}\r\n\r\n.usa-dt-table__stacked-picker {\r\n width: 100%;\r\n z-index: 1;\r\n display: flex;\r\n flex-wrap: wrap;\r\n align-items: center;\r\n margin: rem(16) 0 rem(8);\r\n\r\n @media all and (min-width: $tablet-screen){\r\n display: none;\r\n }\r\n\r\n label {\r\n font-size: $base-font-size;\r\n line-height: 1.5;\r\n }\r\n\r\n .usa-dt-picker .usa-dt-picker__dropdown-container {\r\n\r\n .usa-dt-picker__button {\r\n padding: rem(4) rem(8);\r\n margin: 0;\r\n display: flex;\r\n align-items: center;\r\n\r\n .usa-dt-picker__button-text {\r\n font-size: $base-font-size;\r\n margin-right: rem(8);\r\n line-height: 1.5;\r\n font-weight: $font-normal;\r\n }\r\n\r\n .usa-dt-picker__button-icon {\r\n flex: 0 0 auto;\r\n\r\n svg {\r\n width: rem(12);\r\n height: rem(12);\r\n color: $color-link;\r\n }\r\n }\r\n }\r\n\r\n .usa-dt-picker__list {\r\n min-width: rem(200);\r\n }\r\n\r\n .usa-dt-picker__list .usa-dt-picker__item {\r\n font-size: $small-font-size;\r\n }\r\n }\r\n}\r\n","table.usda-table {\r\n &.topfive-table__table {\r\n font-size: $small-font-size;\r\n border-collapse: separate;\r\n border: solid $color-gray-border rem(1);\r\n border-radius: rem(5);\r\n -moz-border-radius: rem(5);\r\n margin: 0;\r\n border-bottom: none;\r\n\r\n tbody.usda-table__body tr.usda-table__row td.usda-table__cell {\r\n color: $color-base;\r\n padding: rem(10) rem(15);\r\n border: 0;\r\n border-bottom: solid rgba(174, 176, 181, 0.5) rem(1);\r\n background-color: transparent;\r\n font-weight: 400;\r\n text-align: center;\r\n max-width: 0;\r\n\r\n div {\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n overflow: hidden;\r\n }\r\n\r\n &:first-child {\r\n text-align: left;\r\n width: 55%;\r\n }\r\n\r\n &:nth-child(2) {\r\n width: 25%;\r\n }\r\n\r\n &:last-child {\r\n width: 20%;\r\n }\r\n }\r\n\r\n tbody.usda-table__body tr.usda-table__row:last-child td.usda-table__cell {\r\n &:first-child {\r\n border-bottom-left-radius: rem(5);\r\n }\r\n\r\n &:last-child {\r\n border-bottom-right-radius: rem(5);\r\n }\r\n }\r\n\r\n\r\n thead.usda-table__head th.table-header.table-header {\r\n color: $color-base;\r\n background: none;\r\n padding: rem(10) rem(15);\r\n border: 0;\r\n background-color: transparent;\r\n border-bottom: solid $color-gray-border rem(1);\r\n font-weight: 600;\r\n text-align: center;\r\n\r\n &:first-child {\r\n text-align: left;\r\n }\r\n\r\n .table-header__content {\r\n color: $color-base;\r\n padding: 0;\r\n justify-content: center;\r\n }\r\n }\r\n\r\n thead.usda-table__head th.table-header.table-header:first-child .table-header__content {\r\n justify-content: flex-start;\r\n }\r\n }\r\n\r\n .usda-table__label {\r\n color: $color-base;\r\n }\r\n}","@import \"../global/index\";\r\n\r\n.usda-message {\r\n text-align: center;\r\n background-color: $color-gray-lightest;\r\n padding: 10rem 0;\r\n color: $color-base;\r\n width: 100%;\r\n .usda-message__icon {\r\n font-size: 3.6rem;\r\n }\r\n .usda-message__title {\r\n font-size: 2rem;\r\n line-height: 4.5rem;\r\n font-weight: $font-semibold;\r\n }\r\n .usda-message__description {\r\n font-size: $base-font-size;\r\n }\r\n &.usda-message_loading {\r\n .usda-message__icon {\r\n color: $color-primary;\r\n }\r\n }\r\n &.usda-message_error {\r\n .usda-message__icon {\r\n color: $color-secondary-dark;\r\n }\r\n }\r\n}\r\n\r\n.usda-loading-animation__container {\r\n flex: 1 1 auto;\r\n max-width: rem(200);\r\n margin-left: auto;\r\n margin-right: auto;\r\n\r\n @include for-tablet-portrait-up {\r\n flex: 0 0 auto;\r\n max-width: rem(600);\r\n }\r\n .usda-loading-animation {\r\n width: rem(50);\r\n height: rem(50);\r\n margin-left: auto;\r\n margin-right: auto;\r\n svg.usda-loading-bars {\r\n @keyframes loading-bar-animation {\r\n 0% {\r\n transform: translate(0px, 40px) scaleY(0.2);\r\n }\r\n 50% {\r\n transform: translate(0px, 10px) scaleY(0.8);\r\n }\r\n 100% {\r\n transform: translate(0px, 40px) scaleY(0.2);\r\n }\r\n }\r\n\r\n @keyframes loading-bars-loading {\r\n 0% {\r\n opacity: 0;\r\n }\r\n 100% {\r\n opacity: 1;\r\n }\r\n }\r\n\r\n animation: loading-bars-loading 0.2s ease-in forwards;\r\n\r\n rect {\r\n fill: $color-gray-light;\r\n animation: loading-bar-animation 1s infinite ease-in-out both;\r\n &.bar-two {\r\n animation: loading-bar-animation 1s infinite ease-in -0.6s;\r\n }\r\n &.bar-three{\r\n animation: loading-bar-animation 1s infinite ease-in -0.9s;\r\n }\r\n &.bar-four {\r\n animation: loading-bar-animation 1s infinite ease-in -0.3s;\r\n }\r\n }\r\n }\r\n }\r\n .loading-message {\r\n font-size: rem(36);\r\n line-height: rem(45);\r\n color: $color-gray-light;\r\n text-align: center;\r\n }\r\n}\r\n","@import \"../global/index\";\r\n\r\n.usa-dt-picker {\r\n display: flex;\r\n align-items: center;\r\n position: relative;\r\n background-color: white;\r\n\r\n .hide {\r\n visibility: hidden;\r\n }\r\n\r\n .usa-dt-picker__icon {\r\n margin-right: rem(5);\r\n\r\n svg {\r\n width: rem(30);\r\n height: rem(30);\r\n fill: $gray-cool-10;\r\n }\r\n }\r\n\r\n .usa-dt-picker__dropdown-container {\r\n display: flex;\r\n flex: 0 1 auto;\r\n align-self: flex-end;\r\n width: auto;\r\n flex-wrap: wrap;\r\n\r\n &:hover{\r\n color: $gray-cool-5;\r\n }\r\n &:active {\r\n color: $gray-cool-1;\r\n }\r\n .usa-dt-picker__button { \r\n &.side-margin {\r\n margin: 0 rem(5);\r\n }\r\n @include button-unstyled;\r\n display: flex;\r\n justify-content: center;\r\n outline: none;\r\n align-items: flex-end;\r\n margin: 0 rem(15);\r\n padding: rem(10) 0;\r\n width: 100%;\r\n .usa-dt-picker__button-text {\r\n flex: 1 1 auto;\r\n margin-right: rem(8);\r\n font-weight: $font-light;\r\n font-size: rem(20);\r\n line-height: rem(25);\r\n color: $gray-cool-10;\r\n }\r\n\r\n .usa-dt-picker__button-icon {\r\n button {\r\n @include button-unstyled;\r\n }\r\n &:hover{\r\n color: $gray-cool-5;\r\n }\r\n &:active {\r\n color: $gray-cool-1;\r\n }\r\n flex: 0 0 rem(20);\r\n svg {\r\n width: rem(20);\r\n height: rem(20);\r\n fill: $color-primary-alt;\r\n }\r\n }\r\n }\r\n .usa-dt-picker__list {\r\n &.padding {\r\n padding: 8px 0px;\r\n }\r\n\r\n &.top-margin {\r\n margin-top: 20px;\r\n }\r\n\r\n &.min-width {\r\n min-width: 15rem;\r\n }\r\n @include unstyled-list;\r\n position: absolute;\r\n border: 1px solid $color-gray-light;\r\n background-color: #fff;\r\n display: block;\r\n width: 100%;\r\n overflow-y: scroll;\r\n .usa-dt-picker__list-item {\r\n border-top: 1px solid $color-gray-light;\r\n\r\n &:first-child {\r\n border-top: none;\r\n }\r\n }\r\n\r\n .usa-dt-picker__item {\r\n @include button-unstyled;\r\n color: $color-gray;\r\n font-size: rem(18);\r\n text-align: left;\r\n\r\n padding: rem(10) rem(15);\r\n width: 100%;\r\n\r\n &:hover {\r\n color: $color-link;\r\n background-color: $color-gray-lightest;\r\n cursor: pointer;\r\n }\r\n &.active {\r\n color: $color-link;\r\n }\r\n }\r\n }\r\n }\r\n}\r\n"],"names":[],"sourceRoot":""}