kitchn/recipes/src/styles/app.scss

@import './_variables.scss';


body {
  margin: 0;
  padding: 0;
  font-family: $font-family-text;
  font-size: $font-size-regular;
  color: $grey-900;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: $grey-100;
}

::selection { 
  background: $yellow;
  color: black;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;

}

h1 {
  font-family: $font-family-display;
  text-transform: uppercase;
  font-weight: $font-weight-bold;
  font-size: $font-size-xx-large;
}

h6 {
  font-family: $font-family-display;
  font-weight: $font-weight-bold;
  font-size: $font-size-x-large;
}

h4 {
  margin: 0;
  font-family: $font-family-display;
  font-weight: $font-weight-bold;
  font-size: $font-size-xx-large;
  line-height: 1.5rem;
}

h4:after {
  content: "";
  display: block;
  margin: 0 auto;
  width: 50px;
  margin-top: -14px;
  border-bottom: 16px solid;
  border-bottom-color: $grey-300;
  margin-left: -4px;
}

h5 {
  margin: 0;
  font-family: $font-family-display;
  font-size: $font-size-large;
  font-weight: $font-weight-bold;
  letter-spacing: $letter-spacing-enhanced;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}

#root {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  height: 100vh;
}

.cbk-app-drawer {
  flex-basis: 16rem;
  flex-grow: 1;
}

.cbk-main {
  flex-basis: 0;
  flex-grow: 9999;

  .mdc-layout-grid {
    display: flex;
    flex-direction: column;
    width: 100%;
    
    .mdc-layout-grid__inner {
      width: 100%;
    }
  }

}

input,
label,
textarea
{
	margin:0;
	border:0;
	padding:0;
	display:inline-block;
	vertical-align:middle;
	white-space:normal;
	background:none;
	line-height:1;
}

/* Remove the stupid outer glow in Webkit */
input:focus,
textarea:focus
{
	outline:0;
}

/* Box Sizing Reset
-----------------------------------------------*/

/* All of our custom controls should be what we expect them to be */
input,
textarea
{
	-webkit-box-sizing:content-box;
	-moz-box-sizing:content-box;
	box-sizing:content-box;
}

/* 
  ##Device = Low Resolution Tablets, Mobiles 
*/

@media (max-width: 839px) {
  
  #root {
    flex-direction: column;
    display: flex;
    flex-wrap: unset;

    .cbk-app-drawer {
      flex-basis: unset;

      .cbk-drawer {
        width: 100%;
        flex-direction: row;
        padding: 1rem;
        h1.mdc-drawer__title {
          display: none;
        }
        .mdc-drawer__header,
        .mdc-list {
          min-height: unset;
          padding: 0;
          display: flex;
          flex-direction: row;
          font-size: $font-size-small;
          .mdc-list-item {
            margin: 0;
            a {
              font-size: $font-size-regular;
            }
          }
        }

        .cbk-icon svg {
          width: 35px!important;
        }
      }
    }
  }
  
}