HLS DOM

by lgedeon

HTML

<div class="io-header io-header--inline io-header--dark">
  <div class="im-radiobar">
    <div class="ia-radio__thumb">
      <img src="https://ionehellobeautiful.files.wordpress.com/2020/06/15910264715948.jpg?quality=85&strip=all&w=78&h=78&zoom=2" class="ia-radio__image" />
    </div>
    <div class="ia-radio__text">
      <p class="ia-radio__now-playing">
        Now Playing
      </p>
      <p class="ia-radio__title">
        This is the song...
      </p>
      <p class="ia-radio__artist">
        Artist's Name
      </p>
      <input type="button" class="ia-button ia-button--round ia-button--play" value="&#x25BA; Listen Live" />
    </div>

    <div class="ia-radio__background">
    </div>
  </div>
  <div class="im-headerbar">
    <input type="button" class="ia-button" value="&#x2630;" />
    <div class="im-site-logo">
      <a href="https://hellobeautiful.com/" class="im-site-logo__link">
        <img src="https://ionehellobeautiful.files.wordpress.com/2019/05/15584703612176.png?w=121&quality=85&strip=all" class="im-site-logo__image" />
      </a>
    </div>
    <div class="im-navbar">
      <ul class="im-navbar__list">
        <li class="im-navbar__list-item im-dropdown">
          <a href="/" class="im-navbar__link im-dropdown--toggle">Style &amp; Beauty</a>
          <ul class="im-dropdown__menu">
            <li class="im-dropdown__item">
              <a href="/" class="im-dropdown__link">Style</a>
              <ul>
                <li><a href="/">CSS</a></li>
                <li><a href="/">SASS</a></li>
                <li><a href="/">Oops... did you mean fashion?</a></li>
              </ul>
            </li>
            <li><a href="/">Beauty</a></li>
          </ul>
        </li>
        <li><a href="/">Hair</a></li>
        <li><a href="/">Lifestyle</a></li>
        <li><a href="/">HBTV</a></li>
        <li><a href="/">Newsletter</a></li>
      </ul>
    </div>
    <input type="button" class="ia-button" value="Subscribe" />
    <input...

SCSS

/*----------------------------------------------------------------*\
* BEM REFERENCES
* -------------------------------
* http://getbem.com/introduction/ | http://getbem.com/naming/
* https://css-tricks.com/bem-101/
* https://seesparkbox.com/foundry/bem_by_example ("Do's and Don'ts")
* https://github.com/danielguillan/bem-constructor
* -------------------------------
* STYLEGUIDE
* -------------------------------
* XD | https://xd.adobe.com/view/35e8987a-7d4a-40bf-4d9c-284e18fd4595-43d9/screen/e9edcbe0-568e-4e07-b861-21436faf1517/
* Full Screen Preview | https://xd.adobe.com/view/35e8987a-7d4a-40bf-4d9c-284e18fd4595-43d9/screen/e9edcbe0-568e-4e07-b861-21436faf1517/?fullscreen
\*----------------------------------------------------------------*/

/*------------------------------------*\
VARIABLES
\*------------------------------------*/
/* color */
$black: #000;
$white: #fff;
$gold: #F3B236;

/* typography */
$primary-font: 'Harriet Display Bold', serif;
$secondary-font: 'Nitt Grotesk', sans-serif;

/* responsive widths */
$phone-small:320px;
$phone:375px;
$phone-large:414px;
$phone-small-wide:568px;
$phone-wide:667px;
$phone-medium-wide:736px;
$phone-large-wide:812px;
$tablet:768px;
$tablet-wide:1024px;
$tablet-medium-wide:1366px;
$small-desk:1280;
$desk:1440px;
$desk-medium:1720px;
$desk-wide:1920px;


/*
* @at-root #{&}__element{}
* @at-root #{&}--modifier{}
*/

/*
*.io- Object
* .im- modifier
*/

/*------------------------------------*\
Resets
\*------------------------------------*/
body{
  padding:0;
  margin:0;
  background:#ccc;
}
p{margin:0;}
/*------------------------------------*\
Blocks
\*------------------------------------*/
.io-header {
  display:block;
  width:100%;
  max-width:$desk-wide;
  margin-bottom: 100px;
  @at-root #{&}--inline{ /* Modifier: Style 1 */
    
  }
  @at-root #{&}--dark{ /* Modifier: Light */
    //background:$black;
    color:$white;
    border-color:$white;
  }
  @at-root #{&}--light{
     background:$white;
   ...