root
/
css-mastery-16-master


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
							<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Responsive flexbox widget, without media queries.</title>

  <style>
    .ordering-widget {
      list-style: none;
      margin: 0;
      padding: 0;
      font-family: 'Avenir Next', Avenir, SegoeUI, sans-serif;
    }
    .ordering-widget * {
      -moz-box-sizing: border-box;
           box-sizing: border-box;
    }
    /**
    * bug fix for IE10-11, which doesn't apply flexbox styling to
    * elements that are not displayed as blocks by default. Since our
    * elements are mostly span:s, we need to set the to display as block
    * *before* turning them into flexbox items.
    */ 
    .item-name,
    .item-controls,
    .item-decrease,
    .item-increase {
      display: block;
    }

    .item {
      color: #fff;
      background-color: #129490;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      font-size: 1.5em;
      padding: 0;
      margin-bottom: .25em;
    }

    .item-name {
      padding: .25em;
      -webkit-flex: 1 0 13em;
      -ms-flex: 1 0 13em;
      flex: 1 0 13em;
    }
    .item-controls {
      -webkit-flex: 1 0 4em;
      -ms-flex: 1 0 4em;
      flex: 1 0 4em;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
    }
    .item-control {
      -webkit-flex: 1;
      -ms-flex: 1;
      flex: 1;
      text-align: center;
      padding: .25em;
      cursor: pointer;
      width: 100%;
      margin: 0;
      border: 0;
      color: #fff;
      font-size: inherit;
    }
    .item-increase {
      background-color: #1e6f6d;
    }
    .item-decrease {
      background-color: #1c5453;
    }
  </style>
</head>
<body>
  <ul class="ordering-widget">
    <li class="item">
      <span class="item-name">Flux capacitor regulator</span>
      <span class="item-controls">
        <button class="item-control item-increase" aria-label="Increase">+</button>
        <button class="item-control item-decrease" aria-label="Decrease">-</button>
      </span>
    </li>
    <li class="item">
      <span class="item-name">Multiverse unicorn wrench</span>
      <span class="item-controls">
        <button class="item-control item-increase" aria-label="Increase">+</button>
        <button class="item-control item-decrease" aria-label="Decrease">-</button>
      </span>
    </li>
    <li class="item">
      <span class="item-name">Singularity transmogrifier</span>
      <span class="item-controls">
        <button class="item-control item-increase" aria-label="Increase">+</button>
        <button class="item-control item-decrease" aria-label="Decrease">-</button>
      </span>
    </li>
    <li class="item">
      <span class="item-name">Time-reverse sensitive oil</span>
      <span class="item-controls">
        <button class="item-control item-increase" aria-label="Increase">+</button>
        <button class="item-control item-decrease" aria-label="Decrease">-</button>
      </span>
    </li>
  </ul>
</body>
</html>