@barguide/style-guide/dist/index.css

BarGuide.io | CSS Style Guide

:root{
  --spot-black:rgba(0,0,0, 1);
  --spot-grey-9:rgba(17,17,17, 1);
  --spot-grey-8:rgba(34,34,34, 1);
  --spot-grey-7:rgba(51,51,51, 1);
  --spot-grey-6:rgba(68,68,68, 1);
  --spot-grey-5:rgba(85,85,85, 1);
  --spot-grey-4:rgba(153,153,153, 1);
  --spot-grey-3:rgba(179,179,179, 1);
  --spot-grey-2:rgba(204,204,204, 1);
  --spot-grey-1:rgba(229,229,229, 1);
  --spot-grey-0:rgba(238,238,238, 1);
  --spot-white:rgba(255,255,255, 1);
  --spot-red:rgba(255,0,0, 1);
  --spot-red-alt:rgba(170,17,0, 1);
  --spot-orange:rgba(255,119,0, 1);
  --spot-orange-alt:rgba(255,68,0, 1);
  --spot-yellow:rgba(255,221,0, 1);
  --spot-yellow-alt:rgba(255,187,17, 1);
  --spot-green:rgba(0,255,0, 1);
  --spot-green-alt:rgba(85,170,0, 1);
  --spot-blue:rgba(0,0,255, 1);
  --spot-blue-alt:rgba(0,0,85, 1);
  --spot-indigo:rgba(138,43,226, 1);
  --spot-indigo-alt:rgba(49,0,98, 1);
  --spot-violet:rgba(199,125,243, 1);
  --spot-violet-alt:rgba(75,0,130, 1);
  --spot-primary:var(--spot-red);
  --spot-primary-alt:var(--spot-red);
  --spot-secondary:var(--spot-grey-9);
  --spot-secondary-alt:var(--spot-grey-9);
  --spot-focus-ring:rgba(85,85,85, .2);
  --spot-focus-ring-secondary:rgba(100,149,237, .5);
}
:root{
  --font-family-primary:'Exo', georgia, cursive;
  --font-family-secondary:'Roboto', sans-serif;
  --font-family-exo:'Exo', georgia, cursive;
  --font-family-roboto:'Roboto', sans-serif;
  --font-size-10:10px;
  --font-size-12:12px;
  --font-size-14:14px;
  --font-size-16:16px;
  --font-size-18:18px;
  --font-size-20:20px;
  --font-size-24:24px;
  --font-size-32:32px;
  --font-size-36:36px;
  --font-weight-light:300;
  --font-weight-regular:500;
  --font-weight-bold:700;
  --font-weight-extra-bold:900;
}
:root{
  --grid-1xs:4px;
  --grid-1x:8px;
  --grid-2xs:12px;
  --grid-2x:16px;
  --grid-3xs:20px;
  --grid-3x:24px;
  --grid-4xs:28px;
  --grid-4x:32px;
  --grid-5xs:36px;
  --grid-5x:40px;
  --grid-6xs:44px;
  --grid-6x:48px;
  --grid-7xs:52px;
  --grid-7x:56px;
  --grid-8xs:60px;
  --grid-8x:64px;
  --grid-9xs:68px;
  --grid-9x:72px;
  --grid-10xs:76px;
  --grid-10x:80px;
}
:root{
  --screen-xs:var(--min-width);
  --screen-sm:640px;
  --screen-md:768px;
  --screen-lg:1024px;
  --screen-xl:1280px;
  --screen-2xl:1536px;
}
@screen sm{
}
@screen md{
}
@screen lg{
}
@screen xl{
}
@screen 2xl{
}
:root{
  --theme-background:#f5f8fa;
  --theme-background-light:#fff;
  --theme-background-lighter:#fff;
  --theme-background-transparent:rgb(255 255 255 / 85%);
  --theme-border:#cfd7dd;
  --theme-border-input:#cfd7dd;
  --theme-copy:#24292e;
  --theme-copy-light:#57606a;
}
@media (prefers-color-scheme: dark){
  :root{
    --theme-background:#0e1117;
    --theme-background-light:#161b22;
    --theme-background-lighter:#161b22;
    --theme-background-transparent:rgb(0 0 0 / 85%);
    --theme-border:#30363c;
    --theme-border-input:#30363c;
    --theme-copy:#c8d1d9;
    --theme-copy-light:#8b949e;
  }
}
*,
*:before,
*:after{
  box-sizing:border-box;
}
*{
  margin:0;
}
html,
body{
  height:100%;
}
body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
  text-rendering:geometricPrecision;
}
canvas,
img,
picture,
svg,
video{
  display:block;
  max-width:100%;
}
button,
input,
select,
textarea{
  font:inherit;
}
h1,
h2,
h3,
h4,
h5,
h6,
p{
  overflow-wrap:break-word;
}
#root,
#__next{
  isolation:isolate;
}
html,
body{
  background-color:var(--theme-background);
  color:var(--theme-copy);
  font-size:15px;
  height:100vh;
  margin:0;
  padding:0;
}
html{
  scroll-behavior:smooth;
}
body{
  font-family:var(--font-family-exo);
  font-size:14px;
  line-height:1.6;
  min-height:100vh;
  min-width:var(--min-width);
  padding-bottom:0;
  padding-bottom:constant(safe-area-inset-bottom, 0);
  padding-bottom:env(safe-area-inset-bottom, 0);
  padding-top:0;
  padding-top:constant(safe-area-inset-top, 0);
  padding-top:env(safe-area-inset-top, 0);
}
h1,
h2,
h3,
h4,
h5,
h6{
  color:var(--theme-copy);
  font-family:var(--font-family-roboto);
  font-weight:normal;
  line-height:1.2;
  padding:0;
  text-transform:unset;
}
p{
  line-height:1.6;
  margin-bottom:1.4rem;
  padding:0;
}
p:last-of-type{
  margin-bottom:0;
}
.no-js .js-req{
  display:none;
}
.u-visually-hidden{
  border:none;
  clip:rect(0 0 0 0);
  height:1px;
  margin:-1px;
  overflow:hidden;
  padding:0;
  position:absolute;
  width:1px;
}
.u-no-focus:focus{
  box-shadow:none;
  -webkit-focus-ring-color:transparent;
  outline:0;
}
@font-face{
  font-display:swap;
  font-family:Roboto;
  font-style:normal;
  font-weight:400;
  src:local('Roboto'), local('Roboto-Regular'), local('sans-serif'), url('https://fonts.gstatic.com/s/roboto/v19/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-display:swap;
  font-family:Exo;
  font-style:normal;
  font-weight:300;
  src:url('https://fonts.gstatic.com/s/exo/v12/4UaZrEtFpBI4f1ZSIK9d4LjJ4g03OwRmPXws9Iq2uA.woff') format('woff');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-display:swap;
  font-family:Exo;
  font-style:normal;
  font-weight:400;
  src:local('Exo Regular'), local('Exo-Regular'), url('https://fonts.gstatic.com/s/exo/v8/4UaOrEtFpBISc36j2jDu5w.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-display:swap;
  font-family:Exo;
  font-style:normal;
  font-weight:500;
  src:url('https://fonts.gstatic.com/s/exo/v12/4UaZrEtFpBI4f1ZSIK9d4LjJ4mE3OwRmPXws9Iq2uA.woff') format('woff');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-display:swap;
  font-family:Exo;
  font-style:normal;
  font-weight:600;
  src:url('https://fonts.gstatic.com/s/exo/v12/4UaZrEtFpBI4f1ZSIK9d4LjJ4o0wOwRmPXws9Iq2uA.woff') format('woff');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@keyframes loader{
  0%{
    border-left-color:theme('colors.primary');
    transform:rotate(0deg);
  }

  5%{
    border-left-color:theme('colors.primary');
  }

  45%,
  75%{
    border-left-color:theme('colors.white');
  }

  95%{
    border-left-color:theme('colors.primary');
  }

  100%{
    border-left-color:theme('colors.primary');
    transform:rotate(2turn);
  }
}
.ui-blockquote{
  color:var(--theme-copy);
  font-family:var(--font-family-exo);
  font-size:var(--font-size-24);
  font-style:italic;
  font-weight:var(--font-weight-bold);
  margin:var(--grid-8x) auto;
  max-width:800px;
  text-align:center;
}
.ui-blockquote cite{
  color:var(--spot-primary);
  display:block;
  font-size:var(--font-size-20);
  font-weight:var(--font-weight-extra-bold);
  margin-top:var(--grid-2x);
  text-align:right;
}
.ui-button,
.ui-button-text{
  -webkit-appearance:none;
          appearance:none;
  outline:none;
}
.ui-button{
  background-color:transparent;
  border:none;
  margin:0;
  padding:0;
}
.ui-btn-text{
  -webkit-appearance:none;
          appearance:none;
  background-color:transparent;
  border:none;
  margin:0;
  outline:none;
  padding:0;
}
.ui-container{
  margin:auto;
  max-width:1280px;
}
.ui-container-sm,
.ui-container-md,
.ui-container-lg,
.ui-container-xl,
.ui-container-2xl{
  margin:0 auto;
}
.ui-container-sm{
  max-width:640px;
}
.ui-container-md{
  max-width:768px;
}
.ui-container-lg{
  max-width:1024px;
}
.ui-container-xl{
  max-width:1280px;
}
.ui-container-2xl{
  max-width:1536px;
}
input,
textarea{
  color:theme('colors.secondary');
}
.ui-input,
.ui-label,
.ui-select,
.ui-textarea{
  -webkit-appearance:unset;
          appearance:unset;
  background-color:var(--theme-background-light);
  border:1px solid var(--theme-border-input);
  border-radius:4px;
  color:var(--theme-copy);
  padding:theme('spacing.1x');
  transition:background-color 200ms ease-out;
}
.ui-input-sm,
.ui-label-sm,
.ui-select-sm,
.ui-textarea-sm{
  padding:theme('spacing.1xs') theme('spacing.1x');
}
.ui-input:focus,
.ui-label:focus,
.ui-select:focus,
.ui-textarea:focus{
  background-color:var(--theme-background-lighter);
  border:1px solid theme('colors.gray.4');
  outline:none;
}
.ui-wysiwyg{
  padding:0;
}
.ui-grid{
  display:grid;
  flex-wrap:wrap;
  grid-template-columns:1fr;
  justify-content:space-between;
}
.ui-grid-item{
  width:100%;
}
@screen sm{
  .ui-grid{
    grid-template-columns:1fr 1fr;
  }
}
@screen lg{
  .ui-grid{
    grid-template-columns:1fr 1fr 1fr;
  }
}
@screen xl{
  .ui-grid{
    grid-template-columns:1fr 1fr 1fr 1fr;
  }
}
@screen 2xl{
  .ui-grid{
    grid-template-columns:1fr 1fr 1fr 1fr 1fr;
  }
}
@media (min-width: 2000px){
  .ui-grid{
    grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr;
  }
}
@media (min-width: 2500px){
  .ui-grid{
    grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  }
}
.ui-heading{
  font-size:1.3em;
}
.ui-heading-sm{
  font-size:0.8em;
}
.ui-heading-md{
  font-size:1em;
}
.ui-heading-lg{
  font-size:1.5em;
}
.ui-link{
  color:theme('colors.primary');
  text-decoration:none;
}
.ui-link:hover{
  text-decoration:underline;
}
.ui-link-absolute{
  bottom:0;
  left:0;
  position:absolute;
  right:0;
  text-indent:-9999px;
  top:0;
}
.ui-main{
  align-items:center;
  background-color:var(--theme-background);
  min-height:calc(100vh - var(--header-height));
  padding-bottom:0;
  padding-bottom:constant(safe-area-inset-bottom, 0);
  padding-bottom:env(safe-area-inset-bottom, 0);
}
@screen md{
  .ui-main{
    min-height:calc(100vh - var(--header-height) - var(--footer-height));
  }
}
.ui-reflow{
  display:flex;
}
@media (max-width: 768px){
  .ui-reflow{
    flex-direction:column;
  }
}
.ui-desktop,
.ui-desktop-block{
  display:none;
}
.ui-mobile{
  display:initial;
}
.ui-mobile-block{
  display:block;
}
@screen md{
  .ui-desktop{
    display:initial;
  }

  .ui-desktop-block{
    display:block;
  }

  .ui-mobile,
  .ui-mobile-block{
    display:none;
  }
}
.ui-spacer{
  flex:0 0 var(--grid-8x);
}
.ui-spacer.small{
  flex:0 0 var(--grid-2x);
}
.ui-spacer.medium{
  flex:0 0 var(--grid-4x);
}
.ui-spacer.large{
  flex:0 0 var(--grid-8x);
}
@media (max-width: 768px){
  .ui-spacer{
    flex-basis:0;
  }
}
.ui-wysiwyg{
}
.ui-wysiwyg h1,
.ui-wysiwyg h2,
.ui-wysiwyg h3,
.ui-wysiwyg h4,
.ui-wysiwyg h5,
.ui-wysiwyg h6{
  font-size:1.3em;
  margin-bottom:1em;
}
.ui-page{
  padding:theme('spacing.3x') theme('spacing.3xs');
}
.ui-btn{
  border:3px solid theme('colors.black');
  font-size:theme('fontSize.14');
  height:theme('spacing.6x');
  min-width:240px;
  padding:10px;
  position:relative;
}
.ui-shadow{
  box-shadow:2px 2px 2px rgba(0 0 0 / 20%);
}
.ui-list-disc{
  list-style-type:disc;
  margin-bottom:1em;
  padding-left:1.4em;
}