123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100 |
- /**
- * Reset specific elements to make them easier to style in other contexts.
- */
- html,
- body,
- p,
- ol,
- ul,
- li,
- dl,
- dt,
- dd,
- blockquote,
- figure,
- fieldset,
- form,
- legend,
- textarea,
- pre,
- iframe,
- hr,
- h1,
- h2,
- h3,
- h4,
- h5,
- h6 {
- padding: 0;
- margin: 0;
- -moz-osx-font-smoothing: grayscale;
- -webkit-font-smoothing: antialiased;
- }
- /**
- * Apply generic border-box to all elements.
- * See:
- * https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
- */
- /**
- * Apply border-box across the entire page.
- */
- html {
- box-sizing: border-box;
- }
- /**
- * Relax the definition a bit, to allow components to override it manually.
- */
- * {
- &,
- &::before,
- &::after {
- box-sizing: inherit;
- }
- }
- /**
- * HTML resets
- */
- html {
- // Set mobile font-size to one step lower for mobile
- font-size: #{map-deep-get($config-global, "font", "size", "root") / map-deep-get($config-global, "font", "size", "ratio")};
- @include font-family( map-deep-get($config-global, "font", "family", "secondary") );
- line-height: #{map-deep-get($config-global, "font", "line-height", "body")};
- // Set mobile and ^ font-size to normal root
- @include media(mobile) {
- font-size: #{map-deep-get($config-global, "font", "size", "root")};
- }
- }
- body {
- font-size: #{map-deep-get($config-global, "font", "size", "base")};
- font-weight: normal;
- color: #{map-deep-get($config-global, "color", "foreground", "default")};
- text-align: left;
- background-color: #{map-deep-get($config-global, "color", "background", "default")};
- }
- /**
- * Links styles
- */
- a {
- color: #{map-deep-get($config-global, "color", "primary", "default")};
- &:hover {
- color: #{map-deep-get($config-global, "color", "primary", "hover")};
- }
- .has-primary-background-color &:not(.has-text-color) {
- color: #{map-deep-get($config-global, "color", "background", "default")};
- }
- }
- button,
- a {
- cursor: pointer;
- }
|