/* * These styles apply ONLY to the header and footer assets. This is Vanilla's default CSS */ * { padding: 0; margin: 0; box-sizing: border-box; } .footer { background: #f5f5f6; color: #555a62; font-size: 14px; line-height: 1.5; padding: 18px 0; } .footer-wrap { padding-left: 18px; padding-right: 18px; max-width: 1236px; margin: 0 auto; } .footer a { color: #0291db; } .footer a:hover { color: #0276b3; } .footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin: -3px; } .footer-col { padding: 0 3px; } .footer-col-copyRight { justify-content: flex-start; } .footer-col-logo { justify-content: flex-end; } .footer-col-copyRight, .footer-col-logo { flex: 1; display: flex; } .logo { width: 124px; height: 27px; opacity: 0.6; } @media screen and (max-width: 768px) { .footer-row { display: block; } .footer-col { width: 100%; text-align: center; margin: 6px 0; } .footer-col:first-child { margin-top: 0; } .footer-col:last-child { margin-bottom: 0; } .footer-col-copyRight, .footer-col-logo { justify-content: center; } .logo { margin: 0 auto; } } /*# START ALL DOMO CENTRAL CSS */ /*# sourceMappingURL=styles.css.map */ /** * References: * https://www.hongkiat.com/blog/css-only-accordion/ */ /* Normalize */ .DCN * { box-sizing: border-box; font-family: "Open Sans"; margin: 0; padding: 0; text-decoration: none; } /* Variables */ .DCN { --color-brand: #99ccee; --color-primary-200: #e7f2fe; --color-primary-300: #cbe6fc; --color-primary-400: var(--color-brand); --color-neutral-500: #888888; --color-neutral-600: #555555; --color-neutral-800: #222222; --color-neutral-900: #111111; --shade-black-5: rgba(0, 0, 0, 0.05); --shade-black-10: rgba(0, 0, 0, 0.1); --shade-black-15: rgba(0, 0, 0, 0.15); --shade-black-70: rgba(0, 0, 0, 0.7); --shade-black-90: rgba(0, 0, 0, 0.9); --shade-white-100: rgba(255, 255, 255, 1); --shade-brand-10: rgba(153, 204, 238, 0.1); --space-1: 8px; --space-half: calc(var(--space-1) / 2); --space-1-half: calc(var(--space-1) + var(--space-half)); --space-2: calc(var(--space-1) * 2); --space-3: calc(var(--space-1) * 3); --space-4: calc(var(--space-1) * 4); --space-5: calc(var(--space-1) * 5); --space-6: calc(var(--space-1) * 6); --space-7: calc(var(--space-1) * 7); --space-8: calc(var(--space-1) * 8); --size-1: 8px; --size-half: calc(var(--size-1) / 2); --size-1-half: calc(var(--size-1) + var(--size-half)); --size-2: calc(var(--size-1) * 2); --size-3: calc(var(--size-1) * 3); --size-4: calc(var(--size-1) * 4); --size-5: calc(var(--size-1) * 5); --size-6: calc(var(--size-1) * 6); --size-7: calc(var(--size-1) * 7); --size-11: calc(var(--size-1) * 11); --header-height-mobile: 60px; --header-height-desktop: var(--size-11); --container-lg: 1100px; --radius-sm: var(--space-half); --font-size-12: 12px; --font-size-14: 14px; --font-size-16: 16px; --font-weight-regular: 400; --font-weight-semibold: 600; --line-height-lg: 1.5; --letter-spacing-lg: 0.15px; --letter-spacing-xl: 0.25px; --letter-spacing-xxl: 0.4px; } /**** HEADER ****/ .DCN__header { background: var(--shade-white-100); border-bottom: 1px solid var(--shade-black-15); box-sizing: border-box; height: var(--header-height-mobile); left: 0; padding: 0 var(--space-2); position: fixed; top: 0; white-space: nowrap; width: 100%; z-index: 9999; } .DCN__header__container { align-items: center; display: flex; height: 100%; justify-content: space-between; margin-left: auto; margin-right: auto; max-width: var(--container-lg); } /* Logo */ .DCN__header__logo { height: 40px; width: 106px; } /* Hamburger & Content */ #DCN__hamburger__checkbox { display: none; } .DCN__hamburger { cursor: pointer; height: 40px; position: relative; width: 40px; } .DCN__hamburger:before, .DCN__hamburger:after { background-color: var(--color-neutral-900); border-radius: 1px; bottom: 0; content: ""; display: block; height: 2px; left: 0; margin: auto; position: absolute; right: 0; top: 0; transform: translateY(-4px) rotate(0deg); transition: transform 0s ease 0s; width: 60%; } .DCN__hamburger:after { transform: translateY(4px) rotate(0deg); } #DCN__hamburger__checkbox:checked + .DCN__hamburger:before { transform: translateY(0px) rotate(45deg); } #DCN__hamburger__checkbox:checked + .DCN__hamburger:after { transform: translateY(0px) rotate(-45deg); } #DCN__hamburger__checkbox:checked ~ .DCN__header__content { display: block; } .DCN__header__content { background-color: var(--shade-white-100); display: none; height: calc(100% - var(--header-height-mobile)); left: 0; overflow-y: scroll; position: fixed; top: var(--header-height-mobile); width: 100%; } /* Navigation */ .DCN__header__navigation { position: relative; } .DCN__header__navigation__link { position: relative; } .DCN__header__navigation__link + .DCN__header__navigation__link { margin-top: 1px; } .DCN__header__navigation__link__label { align-items: center; background-color: var(--color-primary-300); color: var(--color-neutral-900); cursor: default; display: flex; font-size: var(--font-size-16); font-weight: var(--font-weight-semibold); height: var(--size-7); justify-content: space-between; letter-spacing: var(--letter-spacing-lg); line-height: var(--line-height-lg); padding: 0 var(--space-3); } .DCN__header__navigation__link__label__icon { flex: 0 0 20px; } /* Menu */ .DCN__header__menu__checkbox { cursor: pointer; display: block; height: var(--size-7); left: 0; opacity: 0; position: absolute; top: 0; width: 100%; z-index: 1; } .DCN__header__menu__checkbox:checked ~ .DCN__header__navigation__link__label .DCN__header__navigation__link__label__icon { transform: rotate(180deg); } .DCN__header__menu__checkbox:checked ~ .DCN__header__menu__wrapper { display: block; } .DCN__header__menu__wrapper { border-top: 1px solid var(--shade-white-100); display: none; position: relative; } .DCN__header__menu { background-color: var(--color-primary-200); padding: var(--space-1) 0; } .DCN__header__menu__category { display: none; } .DCN__header__menu__link { display: block; padding: var(--space-1-half) var(--space-3); white-space: normal; } .DCN__header__menu__link__label { color: var(--color-neutral-600); display: block; font-size: var(--font-size-14); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-xl); line-height: var(--line-height-lg); } .DCN__header__menu__link__description { display: none; } /* Spacer */ .DCN__header__spacer { flex: 1 1 100%; } /* DCN__header__ctas & Search */ .DCN__header__ctas__container { align-items: center; display: flex; flex-direction: column-reverse; margin: 0 auto; max-width: 450px; padding: var(--space-3); } .DCN__header__ctas { align-items: center; display: flex; justify-content: space-around; margin-top: var(--space-3); width: 100%; } .DCN__header__ctas__cta { align-items: center; color: var(--shade-black-70); display: flex; font-size: var(--font-size-14); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-xl); line-height: var(--line-height-lg); padding: 2px var(--space-1); } .DCN__header__ctas__divider { background-color: var(--shade-black-10); flex: 0 0 1px; height: var(--size-3); width: 1px; } @media (hover: hover) { .DCN__header__ctas__cta:hover { color: var(--shade-black-90); } } .DCN__header__search__field { /** @author pkelly@higherlogic.com This has to be hidden because we use an identical on injected into the DOM **/ visibility: hidden; align-items: center; background-color: var(--shade-black-5); border-radius: var(--radius-sm); display: flex; height: var(--size-4); margin-top: var(--space-1); padding-left: var(--space-1); width: 100%; } @media (hover: hover) { .DCN__header__search__field:hover { background-color: var(--shade-black-10); } } .DCN__header__search__field:focus-within { background-color: var(--shade-black-5) !important; } .DCN__header__search__field:focus-within .DCN__header__search__field__icon { color: var(--color-primary-400); } .DCN__header__search__field__icon { color: var(--shade-black-70); flex: 0 0 20px; } .DCN__header__search__field__input { background-color: transparent; border: none; color: var(--color-neutral-800); flex: 1 1 100%; font-family: inherit; font-size: var(--font-size-14); font-weight: var(--font-weight-normal); height: 100%; letter-spacing: var(--letter-spacing-xl); outline: none; padding: 0 var(--space-half); } /** DESKTOP (HEADER) **/ @media only screen and (min-width: 960px) { .DCN__header { height: var(--header-height-desktop); } /* Logo */ .DCN__header__logo { height: 56px; width: 148px; } /* Hamburger & Content */ #DCN__hamburger__checkbox, .DCN__hamburger { display: none; } .DCN__header__content { align-items: center; display: flex !important; flex: 1 1 100%; height: 100%; justify-content: space-between; overflow-y: visible; position: relative; top: 0; } /* Navigation */ .DCN__header__navigation { align-items: center; display: flex; height: 100%; margin-left: var(--space-4); } .DCN__header__navigation__link { height: 100%; margin-top: 0px !important; position: static; } .DCN__header__navigation__link__label { align-items: center; background-color: transparent; color: var(--color-neutral-600); display: flex; font-weight: var(--font-weight-regular); height: 100%; justify-content: center; padding: 0 var(--space-2); width: 120px; } .DCN__header__navigation__link__label__icon { display: none; } .DCN__header__navigation__link.self-menu { position: relative; } @media (hover: hover) { .DCN__header__navigation__link:hover .DCN__header__navigation__link__label { background-color: var(--shade-brand-10); box-shadow: inset 0px -4px 0px var(--color-brand); } .DCN__header__navigation__link:hover .DCN__header__menu__wrapper { display: block !important; } } /* Menu */ .DCN__header__menu__checkbox { display: none; } .DCN__header__menu__wrapper { border-top: none; display: none !important; left: 0px; padding-top: var(--space-half); position: absolute; top: calc(var(--header-height-desktop) - 1px); } .DCN__header__menu { border-radius: var(--radius-sm); box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15); padding: 0; } .DCN__header__menu__overview { border-bottom: 1px solid var(--shade-black-15); padding: var(--space-1); } .DCN__header__menu__columns { display: flex; padding: var(--space-1); } .DCN__header__menu__column { flex: 1 1 50%; min-width: 350px; } .DCN__header__menu__category { color: var(--color-neutral-500); display: block; font-size: var(--font-size-12); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-xxl); line-height: var(--line-height-lg); padding: var(--space-2); padding-top: var(--space-1); text-transform: uppercase; } .DCN__header__menu__link { border-radius: var(--radius-sm); padding: var(--space-2); } .DCN__header__menu__link__label { color: var(--color-neutral-900); } .DCN__header__menu__link__description { color: var(--color-neutral-600); display: block; font-size: var(--font-size-14); font-weight: var(--font-weight-regular); letter-spacing: var(--letter-spacing-xl); line-height: var(--line-height-lg); } @media (hover: hover) { .DCN__header__menu__link:hover { background-color: var(--shade-black-5); } } /* Ctas & Search */ .DCN__header__ctas__container { flex-direction: column; padding: 0px; } .DCN__header__ctas { margin-top: 0px; } .DCN__header__search__field { margin-top: var(--space-1); } } /**** FOOTER ****/ .DCN__footer { background-color: var(--color-neutral-800); padding-top: var(--space-5); } .DCN__footer__container { margin-left: auto; margin-right: auto; max-width: var(--container-lg); } .DCN__footer__logo { display: block; height: 56px; margin-left: var(--space-2); width: 148px; } .DCN__footer__menu__checkbox { display: none; } .DCN__footer__menu__checkbox:checked ~ .DCN__footer__menu { display: block; } .DCN__footer__menu__checkbox:checked + .DCN__footer__menu__label .DCN__footer__menu__label__icon { transform: rotate(180deg); } .DCN__footer__columns { margin-top: var(--space-5); padding: 0 var(--space-2); } .DCN__footer__column + .DCN__footer__column { border-top: 1px solid var(--color-neutral-600); } .DCN__footer__menu__label { align-items: center; color: var(--shade-white-100); cursor: pointer; display: flex; font-size: var(--font-size-16); height: var(--size-6); letter-spacing: var(--letter-spacing-lg); justify-content: space-between; } .DCN__footer__menu__label__icon { flex: 0 0 20px; margin-right: var(--space-1); } .DCN__footer__menu { display: none; padding-bottom: var(--space-2); } .DCN__footer__menu__link { color: var(--color-neutral-500); display: block; font-size: var(--font-size-16); font-weight: var(--font-weight-regular); line-height: var(--size-4); padding-left: var(--space-1); } @media (hover: hover) { .DCN__footer__menu__link:hover { color: var(--color-brand); text-decoration: underline; } } .DCN__subfooter { background-color: var(--color-neutral-900); margin-top: var(--space-5); padding: var(--space-6) 0px; text-align: center; } .DCN__subfooter__socials__social { color: var(--shade-white-100); margin: 0 var(--space-1-half); } .DCN__subfooter__copyright { margin-top: var(--space-4); } .DCN__subfooter__copyright, .DCN__subfooter__privacies__privacy { color: var(--color-neutral-600); font-size: 12px; font-weight: var(--font-weight-regular); } .DCN__subfooter__privacies { align-items: center; display: flex; justify-content: center; margin-top: var(--space-half); } .DCN__subfooter__privacies__divider { background-color: var(--color-neutral-600); display: block; flex: 0 0 1px; height: var(--size-1-half); margin: 0 var(--space-1); width: 1px; } @media (hover: hover) { .DCN__subfooter__socials__social:hover { color: var(--color-brand); } .DCN__subfooter__privacies__privacy:hover { color: var(--shade-white-100); text-decoration: underline; } } /** DESKTOP (FOOTER) **/ @media only screen and (min-width: 960px) { .DCN__footer { padding-top: var(--space-8); } .DCN__footer__logo { margin: 0 auto; } .DCN__footer__columns { display: flex; justify-content: space-around; margin-top: var(--space-8); } .DCN__footer__column { border-top: none !important; } .DCN__footer__menu { display: block !important; } .DCN__footer__menu__label { cursor: default; font-weight: var(--font-weight-semibold); height: auto; letter-spacing: var(--letter-spacing-xxl); padding-bottom: var(--space-2); text-transform: uppercase; } .DCN__footer__menu__label__icon { display: none; } .DCN__footer__menu { padding-bottom: 0px; } .DCN__footer__menu__link { padding-left: 0px; } .DCN__subfooter { margin-top: var(--space-8); } } /*# END ALL DOMO CENTRAL CSS */

Domo.com Support

Story Examples

user007486

January 2021 edited March 13 in Scheduled Reports

Hey everyone,

Is there a good place to look at public examples of Domo Stories? I've been googling, but not seeing a whole lot. I've been building stuff for a bit and struggling to make my stories really pop. For example, in Domo University there is a "Gravitate Marketing" example (attached below) that really looks nice. Would love to get a closer look at dashboards like this for inspiration.

Thanks,

Jason

Data Story Example.png 318.6K

0

Best Answer

MarkSnodgrass Coach

January 2021 Answer ✓

This video provides a nice walkthrough of building a nice story page:
https://www.domo.com/help-center/videos/watch/yXFS2uvD5Es/cat/PLc_JazWEwlVqiRoWcbD5My1Bw0_IpMX8z
More videos can be found here:
https://www.domo.com/help-center/videos/label/dashboards-and-cards

Domo created a couple real-life examples regarding COVID-19 and the election if you haven't seen them. You can see them here:
COVID-19: https://www.domo.com/covid19/daily-pulse/
Election: https://www.domo.com/election/

Hope these help

**Check out my Domo Tips & Tricks Videos

**Make sure to any users posts that helped you.
**Please mark as accepted the ones who solved your issue.
0

Answers

MarkSnodgrass Coach

January 2021 Answer ✓

This video provides a nice walkthrough of building a nice story page:
https://www.domo.com/help-center/videos/watch/yXFS2uvD5Es/cat/PLc_JazWEwlVqiRoWcbD5My1Bw0_IpMX8z
More videos can be found here:
https://www.domo.com/help-center/videos/label/dashboards-and-cards

Domo created a couple real-life examples regarding COVID-19 and the election if you haven't seen them. You can see them here:
COVID-19: https://www.domo.com/covid19/daily-pulse/
Election: https://www.domo.com/election/

Hope these help

**Check out my Domo Tips & Tricks Videos

**Make sure to any users posts that helped you.
**Please mark as accepted the ones who solved your issue.
0
user007486

January 2021

Thanks Mark. Its really helpful to see these type of styling videos.

0

This discussion has been closed.

Categories

/* * These styles apply ONLY to the header and footer assets. This is Vanilla's default CSS */ * { padding: 0; margin: 0; box-sizing: border-box; } .footer { background: #f5f5f6; color: #555a62; font-size: 14px; line-height: 1.5; padding: 18px 0; } .footer-wrap { padding-left: 18px; padding-right: 18px; max-width: 1236px; margin: 0 auto; } .footer a { color: #0291db; } .footer a:hover { color: #0276b3; } .footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin: -3px; } .footer-col { padding: 0 3px; } .footer-col-copyRight { justify-content: flex-start; } .footer-col-logo { justify-content: flex-end; } .footer-col-copyRight, .footer-col-logo { flex: 1; display: flex; } .logo { width: 124px; height: 27px; opacity: 0.6; } @media screen and (max-width: 768px) { .footer-row { display: block; } .footer-col { width: 100%; text-align: center; margin: 6px 0; } .footer-col:first-child { margin-top: 0; } .footer-col:last-child { margin-bottom: 0; } .footer-col-copyRight, .footer-col-logo { justify-content: center; } .logo { margin: 0 auto; } } /*# START ALL DOMO CENTRAL CSS */ /*# sourceMappingURL=styles.css.map */ /** * References: * https://www.hongkiat.com/blog/css-only-accordion/ */ /* Normalize */ .DCN * { box-sizing: border-box; font-family: "Open Sans"; margin: 0; padding: 0; text-decoration: none; } /* Variables */ .DCN { --color-brand: #99ccee; --color-primary-200: #e7f2fe; --color-primary-300: #cbe6fc; --color-primary-400: var(--color-brand); --color-neutral-500: #888888; --color-neutral-600: #555555; --color-neutral-800: #222222; --color-neutral-900: #111111; --shade-black-5: rgba(0, 0, 0, 0.05); --shade-black-10: rgba(0, 0, 0, 0.1); --shade-black-15: rgba(0, 0, 0, 0.15); --shade-black-70: rgba(0, 0, 0, 0.7); --shade-black-90: rgba(0, 0, 0, 0.9); --shade-white-100: rgba(255, 255, 255, 1); --shade-brand-10: rgba(153, 204, 238, 0.1); --space-1: 8px; --space-half: calc(var(--space-1) / 2); --space-1-half: calc(var(--space-1) + var(--space-half)); --space-2: calc(var(--space-1) * 2); --space-3: calc(var(--space-1) * 3); --space-4: calc(var(--space-1) * 4); --space-5: calc(var(--space-1) * 5); --space-6: calc(var(--space-1) * 6); --space-7: calc(var(--space-1) * 7); --space-8: calc(var(--space-1) * 8); --size-1: 8px; --size-half: calc(var(--size-1) / 2); --size-1-half: calc(var(--size-1) + var(--size-half)); --size-2: calc(var(--size-1) * 2); --size-3: calc(var(--size-1) * 3); --size-4: calc(var(--size-1) * 4); --size-5: calc(var(--size-1) * 5); --size-6: calc(var(--size-1) * 6); --size-7: calc(var(--size-1) * 7); --size-11: calc(var(--size-1) * 11); --header-height-mobile: 60px; --header-height-desktop: var(--size-11); --container-lg: 1100px; --radius-sm: var(--space-half); --font-size-12: 12px; --font-size-14: 14px; --font-size-16: 16px; --font-weight-regular: 400; --font-weight-semibold: 600; --line-height-lg: 1.5; --letter-spacing-lg: 0.15px; --letter-spacing-xl: 0.25px; --letter-spacing-xxl: 0.4px; } /**** HEADER ****/ .DCN__header { background: var(--shade-white-100); border-bottom: 1px solid var(--shade-black-15); box-sizing: border-box; height: var(--header-height-mobile); left: 0; padding: 0 var(--space-2); position: fixed; top: 0; white-space: nowrap; width: 100%; z-index: 9999; } .DCN__header__container { align-items: center; display: flex; height: 100%; justify-content: space-between; margin-left: auto; margin-right: auto; max-width: var(--container-lg); } /* Logo */ .DCN__header__logo { height: 40px; width: 106px; } /* Hamburger & Content */ #DCN__hamburger__checkbox { display: none; } .DCN__hamburger { cursor: pointer; height: 40px; position: relative; width: 40px; } .DCN__hamburger:before, .DCN__hamburger:after { background-color: var(--color-neutral-900); border-radius: 1px; bottom: 0; content: ""; display: block; height: 2px; left: 0; margin: auto; position: absolute; right: 0; top: 0; transform: translateY(-4px) rotate(0deg); transition: transform 0s ease 0s; width: 60%; } .DCN__hamburger:after { transform: translateY(4px) rotate(0deg); } #DCN__hamburger__checkbox:checked + .DCN__hamburger:before { transform: translateY(0px) rotate(45deg); } #DCN__hamburger__checkbox:checked + .DCN__hamburger:after { transform: translateY(0px) rotate(-45deg); } #DCN__hamburger__checkbox:checked ~ .DCN__header__content { display: block; } .DCN__header__content { background-color: var(--shade-white-100); display: none; height: calc(100% - var(--header-height-mobile)); left: 0; overflow-y: scroll; position: fixed; top: var(--header-height-mobile); width: 100%; } /* Navigation */ .DCN__header__navigation { position: relative; } .DCN__header__navigation__link { position: relative; } .DCN__header__navigation__link + .DCN__header__navigation__link { margin-top: 1px; } .DCN__header__navigation__link__label { align-items: center; background-color: var(--color-primary-300); color: var(--color-neutral-900); cursor: default; display: flex; font-size: var(--font-size-16); font-weight: var(--font-weight-semibold); height: var(--size-7); justify-content: space-between; letter-spacing: var(--letter-spacing-lg); line-height: var(--line-height-lg); padding: 0 var(--space-3); } .DCN__header__navigation__link__label__icon { flex: 0 0 20px; } /* Menu */ .DCN__header__menu__checkbox { cursor: pointer; display: block; height: var(--size-7); left: 0; opacity: 0; position: absolute; top: 0; width: 100%; z-index: 1; } .DCN__header__menu__checkbox:checked ~ .DCN__header__navigation__link__label .DCN__header__navigation__link__label__icon { transform: rotate(180deg); } .DCN__header__menu__checkbox:checked ~ .DCN__header__menu__wrapper { display: block; } .DCN__header__menu__wrapper { border-top: 1px solid var(--shade-white-100); display: none; position: relative; } .DCN__header__menu { background-color: var(--color-primary-200); padding: var(--space-1) 0; } .DCN__header__menu__category { display: none; } .DCN__header__menu__link { display: block; padding: var(--space-1-half) var(--space-3); white-space: normal; } .DCN__header__menu__link__label { color: var(--color-neutral-600); display: block; font-size: var(--font-size-14); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-xl); line-height: var(--line-height-lg); } .DCN__header__menu__link__description { display: none; } /* Spacer */ .DCN__header__spacer { flex: 1 1 100%; } /* DCN__header__ctas & Search */ .DCN__header__ctas__container { align-items: center; display: flex; flex-direction: column-reverse; margin: 0 auto; max-width: 450px; padding: var(--space-3); } .DCN__header__ctas { align-items: center; display: flex; justify-content: space-around; margin-top: var(--space-3); width: 100%; } .DCN__header__ctas__cta { align-items: center; color: var(--shade-black-70); display: flex; font-size: var(--font-size-14); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-xl); line-height: var(--line-height-lg); padding: 2px var(--space-1); } .DCN__header__ctas__divider { background-color: var(--shade-black-10); flex: 0 0 1px; height: var(--size-3); width: 1px; } @media (hover: hover) { .DCN__header__ctas__cta:hover { color: var(--shade-black-90); } } .DCN__header__search__field { /** @author pkelly@higherlogic.com This has to be hidden because we use an identical on injected into the DOM **/ visibility: hidden; align-items: center; background-color: var(--shade-black-5); border-radius: var(--radius-sm); display: flex; height: var(--size-4); margin-top: var(--space-1); padding-left: var(--space-1); width: 100%; } @media (hover: hover) { .DCN__header__search__field:hover { background-color: var(--shade-black-10); } } .DCN__header__search__field:focus-within { background-color: var(--shade-black-5) !important; } .DCN__header__search__field:focus-within .DCN__header__search__field__icon { color: var(--color-primary-400); } .DCN__header__search__field__icon { color: var(--shade-black-70); flex: 0 0 20px; } .DCN__header__search__field__input { background-color: transparent; border: none; color: var(--color-neutral-800); flex: 1 1 100%; font-family: inherit; font-size: var(--font-size-14); font-weight: var(--font-weight-normal); height: 100%; letter-spacing: var(--letter-spacing-xl); outline: none; padding: 0 var(--space-half); } /** DESKTOP (HEADER) **/ @media only screen and (min-width: 960px) { .DCN__header { height: var(--header-height-desktop); } /* Logo */ .DCN__header__logo { height: 56px; width: 148px; } /* Hamburger & Content */ #DCN__hamburger__checkbox, .DCN__hamburger { display: none; } .DCN__header__content { align-items: center; display: flex !important; flex: 1 1 100%; height: 100%; justify-content: space-between; overflow-y: visible; position: relative; top: 0; } /* Navigation */ .DCN__header__navigation { align-items: center; display: flex; height: 100%; margin-left: var(--space-4); } .DCN__header__navigation__link { height: 100%; margin-top: 0px !important; position: static; } .DCN__header__navigation__link__label { align-items: center; background-color: transparent; color: var(--color-neutral-600); display: flex; font-weight: var(--font-weight-regular); height: 100%; justify-content: center; padding: 0 var(--space-2); width: 120px; } .DCN__header__navigation__link__label__icon { display: none; } .DCN__header__navigation__link.self-menu { position: relative; } @media (hover: hover) { .DCN__header__navigation__link:hover .DCN__header__navigation__link__label { background-color: var(--shade-brand-10); box-shadow: inset 0px -4px 0px var(--color-brand); } .DCN__header__navigation__link:hover .DCN__header__menu__wrapper { display: block !important; } } /* Menu */ .DCN__header__menu__checkbox { display: none; } .DCN__header__menu__wrapper { border-top: none; display: none !important; left: 0px; padding-top: var(--space-half); position: absolute; top: calc(var(--header-height-desktop) - 1px); } .DCN__header__menu { border-radius: var(--radius-sm); box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15); padding: 0; } .DCN__header__menu__overview { border-bottom: 1px solid var(--shade-black-15); padding: var(--space-1); } .DCN__header__menu__columns { display: flex; padding: var(--space-1); } .DCN__header__menu__column { flex: 1 1 50%; min-width: 350px; } .DCN__header__menu__category { color: var(--color-neutral-500); display: block; font-size: var(--font-size-12); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-xxl); line-height: var(--line-height-lg); padding: var(--space-2); padding-top: var(--space-1); text-transform: uppercase; } .DCN__header__menu__link { border-radius: var(--radius-sm); padding: var(--space-2); } .DCN__header__menu__link__label { color: var(--color-neutral-900); } .DCN__header__menu__link__description { color: var(--color-neutral-600); display: block; font-size: var(--font-size-14); font-weight: var(--font-weight-regular); letter-spacing: var(--letter-spacing-xl); line-height: var(--line-height-lg); } @media (hover: hover) { .DCN__header__menu__link:hover { background-color: var(--shade-black-5); } } /* Ctas & Search */ .DCN__header__ctas__container { flex-direction: column; padding: 0px; } .DCN__header__ctas { margin-top: 0px; } .DCN__header__search__field { margin-top: var(--space-1); } } /**** FOOTER ****/ .DCN__footer { background-color: var(--color-neutral-800); padding-top: var(--space-5); } .DCN__footer__container { margin-left: auto; margin-right: auto; max-width: var(--container-lg); } .DCN__footer__logo { display: block; height: 56px; margin-left: var(--space-2); width: 148px; } .DCN__footer__menu__checkbox { display: none; } .DCN__footer__menu__checkbox:checked ~ .DCN__footer__menu { display: block; } .DCN__footer__menu__checkbox:checked + .DCN__footer__menu__label .DCN__footer__menu__label__icon { transform: rotate(180deg); } .DCN__footer__columns { margin-top: var(--space-5); padding: 0 var(--space-2); } .DCN__footer__column + .DCN__footer__column { border-top: 1px solid var(--color-neutral-600); } .DCN__footer__menu__label { align-items: center; color: var(--shade-white-100); cursor: pointer; display: flex; font-size: var(--font-size-16); height: var(--size-6); letter-spacing: var(--letter-spacing-lg); justify-content: space-between; } .DCN__footer__menu__label__icon { flex: 0 0 20px; margin-right: var(--space-1); } .DCN__footer__menu { display: none; padding-bottom: var(--space-2); } .DCN__footer__menu__link { color: var(--color-neutral-500); display: block; font-size: var(--font-size-16); font-weight: var(--font-weight-regular); line-height: var(--size-4); padding-left: var(--space-1); } @media (hover: hover) { .DCN__footer__menu__link:hover { color: var(--color-brand); text-decoration: underline; } } .DCN__subfooter { background-color: var(--color-neutral-900); margin-top: var(--space-5); padding: var(--space-6) 0px; text-align: center; } .DCN__subfooter__socials__social { color: var(--shade-white-100); margin: 0 var(--space-1-half); } .DCN__subfooter__copyright { margin-top: var(--space-4); } .DCN__subfooter__copyright, .DCN__subfooter__privacies__privacy { color: var(--color-neutral-600); font-size: 12px; font-weight: var(--font-weight-regular); } .DCN__subfooter__privacies { align-items: center; display: flex; justify-content: center; margin-top: var(--space-half); } .DCN__subfooter__privacies__divider { background-color: var(--color-neutral-600); display: block; flex: 0 0 1px; height: var(--size-1-half); margin: 0 var(--space-1); width: 1px; } @media (hover: hover) { .DCN__subfooter__socials__social:hover { color: var(--color-brand); } .DCN__subfooter__privacies__privacy:hover { color: var(--shade-white-100); text-decoration: underline; } } /** DESKTOP (FOOTER) **/ @media only screen and (min-width: 960px) { .DCN__footer { padding-top: var(--space-8); } .DCN__footer__logo { margin: 0 auto; } .DCN__footer__columns { display: flex; justify-content: space-around; margin-top: var(--space-8); } .DCN__footer__column { border-top: none !important; } .DCN__footer__menu { display: block !important; } .DCN__footer__menu__label { cursor: default; font-weight: var(--font-weight-semibold); height: auto; letter-spacing: var(--letter-spacing-xxl); padding-bottom: var(--space-2); text-transform: uppercase; } .DCN__footer__menu__label__icon { display: none; } .DCN__footer__menu { padding-bottom: 0px; } .DCN__footer__menu__link { padding-left: 0px; } .DCN__subfooter { margin-top: var(--space-8); } } /*# END ALL DOMO CENTRAL CSS */

Community

Help

University

Developer

Copyright © 2011 — 2023 Domo, Inc.

Cookie Preferences Privacy & Cookie Policy Patents

<iframe src="https://www.googletagmanager.com/ns.html?id=G-KCXF7VX0J3" height="0" width="0" style="display:none;visibility:hidden"></iframe>