Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="layout">
  <header class="top-area">
    <div>
      <span class="icon-element asset-icon"><i class="material-icons">article</i> </span>
      <span class="asset-id text-title">S-01201</span>
    </div>
    <div>
      <nav>
        <span class="active">Details</span>
        <span class="">History</span>
        <span class="">Visualize</span>
        <span class="">Delivery</span>
      </nav>
      <span class="edit">
        <button class="v1-button">Edit <i class="material-icons">keyboard_arrow_down</i></span>
      </button>
      <span class="asset-actions">
        <span><i class="material-icons">share</i></span>
        <span><i class="material-icons">launch</i></span>
        <span><i class="material-icons">clear</i></span>
      </span>
    </div>
  </header>
    <main>
    <input id="spToggle" type="checkbox" unchecked />
    <aside class="sidepanel">
      <nav>
        <label for="spToggle" class="icon-element menu-icon"><i class="material-icons">mark_chat_unread</i> </label>
        <span class="icon-element menu-icon"><i class="material-icons">waves</i> </span>
      </nav>
      <section class="side-drawer">
        <div class="panel">
          <h3>Conversations</h3>
          <div class="s-a-c">
            <i class="material-icons">account_circle</i> Start a conversation
          </div>
          <div class="search">
            <i class="material-icons">search</i> Find in Stream
          </div>
        </div>
      </section>
    </aside>
      <section class="content-container">
        <header class="content-top">
          <span class="asset-title">Correct Error to Warehouse</span>
        </header>
        <nav class="content-nav">
          <span class="relation-items">Links <span class="relation-count">0</span></span>
          <span class="relation-items">Attachments <span class="relation-count">0</span></span>
          
        </nav>
        <section class="content-arena">
          <section class="area">
            <input type="checkbox" id="columnSwap" unchecked /> 
            <input type="checkbox" id="sixtySixLeft" unchecked /> 
            <input type="checkbox" id="sixtySixRight" unchecked /> 
            <section class="custom-area">
              <section class="column rich-text">
              <div class="form-ele">
                <label for="description"><i class="material-icons">subject</i> Description</label>
                <textarea placeholder="Remember, be nice!" id="description">WHEN the subway finally screeched into the Franklin Street station, Brooke was nearly sick with anxiety. She checked her watch for the tenth time in as many minutes and tried to remind herself that it wasn’t the end of the world; her best friend, Nola, would forgive her, had to forgive her, even if she was inexcusably late. She made her way through the rush-hour throngs of commuters toward the door, instinctively holding her breath in the midst of so many bodies, and allowed herself to be pushed toward the stairwell. On autopilot now, Brooke and her fellow riders each pulled their cell phones from their purses and jacket pockets, filed silently into a straight line and, zombielike, marched like choreographed soldiers up the right side of the cement stairs while staring blankly at the tiny screens in their palms.

“Shit!” she heard an overweight woman up ahead call out, and in a moment she knew why. The rain hit her forcefully and without warning the instant she emerged from the stairwell. What had been a chilly but decent enough March evening only twenty minutes earlier had deteriorated into a freezing, thundering misery, where the winds whipped the rain down and made it utterly impossible to stay dry.

“Dammit!” she added to the cacophony of expletives people were shouting all around her as they struggled to pull umbrellas from their briefcases or arrange newspapers over their heads. Since she’d run home to change after work, Brooke had nothing but a tiny (and admittedly cute) silver clutch to shield herself from the onslaught. Good-bye, hair, she thought as she began to sprint the three blocks to the restaurant. I’ll miss you, eye makeup. Nice knowing you, gorgeous new suede boots that ate up half my weekly salary.
                </textarea>
              </div>
              <div class="form-ele">
                <label for="ort"><i class="material-icons">subject</i> Release Notes <span class="important">!</span></label>
                <textarea placeholder="Remember, be nice!" id="ort">
                  They exchanged a triple cheek-kiss—Brooke had protested the full three kisses in the beginning but Luca insisted—before Brooke took a deep breath and walked back to their table. Nola was tucked neatly into the banquette, her suit jacket flung across the back bench and her navy cashmere shell showing off tightly toned arms and contrasting nicely with her gorgeous olive skin. Her shoulder-length layered cut was stylish and sexy, her blond highlights glowed under the restaurant’s soft lights, and her makeup looked dewy and fresh. No one would ever know from looking at her that Nola had just clocked in twelve hours on a trading desk screaming into a headset.

Brooke and Nola didn’t meet until second semester senior year at Cornell, although Brooke—like the rest of the student body—recognized Nola and was equal parts terrified of and fascinated by her. Compared to her hoodie-and-Ugg-wearing fellow students, the model-thin Nola favored high-heeled boots and blazers and never, ever tied her hair in a ponytail. She’d grown up in elite prep schools in New York, London, Hong Kong, and Dubai, places her investment banker father worked, and had enjoyed the requisite freedom that goes along with being the only child of extremely busy parents.
                </textarea>
              </div>
                            <div class="form-ele">
                              <label for="ort"><i class="material-icons">subject</i> Opp Risk </label>
                <textarea placeholder="Remember, be nice!" id="ort">
                  How she ended up at Cornell instead of Cambridge or Georgetown or the Sorbonne was anyone’s guess, but it didn’t take a lot of imagination to see she wasn’t particularly impressed by it all. When the rest of them were busy rushing sororities, meeting for lunch at the Ivy Room, and getting drunk at various Collegetown bars, Nola kept to herself. There were glimpses into her life—the well-known affair with the archaeology professor, the frequent appearances of sexy, mysterious men on campus who vanished soon thereafter—but for the most part, Nola attended her classes, aced everything she took, and hightailed it back to Manhattan the moment Friday afternoon rolled around. When the two girls found themselves assigned to workshop each other’s short stories in a creative writing elective their senior year, Brooke was so intimidated she could barely speak. Nola, as usual, didn’t appear particularly pleased or upset, but when she returned Brooke’s first submission a week later—a fictional piece on a character struggling to adapt to her Peace Corps assignment in Congo—it was filled with thoughtful, insightful commentary and suggestions. Then, on the last page, after scrawling out her lengthy and serious feedback, Nola had written, “P.S. Consider sex scene in Congo?” and Brooke had laughed so hard she had to excuse herself from class to calm down.

After class Nola invited Brooke to a little coffee place in the basement of one of the academic buildings, a place none of Brooke’s friends ever hung out, and within a couple weeks Brooke was going to New York with Nola on weekends. Even after all these years, Nola was too fabulous for words, but it helped Brooke knowing that her friend sobbed during news segments featuring soldiers coming home from war, was secretly obsessed with one day having a perfect white picket fence in the suburbs despite being openly derisive about it, and had a pathological fear of small, yappy dogs (Walter, Brooke’s dog, not included).
                </textarea>
              </div>
            </section>
              <section class="column vert-hr">
              <label for="columnSwap" class="col-control swapper" title="Swap Columns"><i class="material-icons">vertical_split</i></label>
              <label for="sixtySixLeft" class="col-control sixtysix-left" title="Resize Columns"><i class="material-icons">view_compact</i></label>
                <label for="sixtySixRight" class="col-control sixtysix-right" title="Resize Columns"><i class="material-icons">view_compact</i></label>
            </section>
            <section class="column list-items">
              <div class="form-ele">
                <label>Planning Level <span class="required">*</span></label>
                <input type="text" value="Release 1.0" />
              </div>
              <div class="form-ele">
                <label>Portfolio Item <span class="important">!</span></label>
                <input type="text" value="Roadmap Performance Improvments" />
              </div>
              <div class="form-ele">
                <label>Oldest Supported Major Release <span class="important">!</span></label>
                <input type="text" placeholder="0.0" value="" />
              </div>
              <div class="form-ele">
                <label>Point Release Note Type <span class="important">!</span></label>
                <input type="text" value="Ready" />
              </div>
              <div class="form-ele">
                <label>Iteration </label>
                <input type="text" value="20.4" />
              </div>
              <div class="form-ele">
                <label>Team</label>
                <input type="text" value="The Shady Bunch" />
              </div>
              <div class="form-ele">
                <label>Backlog Group</label>
                <input type="text" value="Reporting" />
              </div>
              <div class="form-ele">
                <label>Owners</label>
                <input type="text" value="Danny Developer" />
              </div>
               <div class="form-ele">
                <label>Status</label>
                <input type="text" value="Developing" />
              </div>
              <div class="form-ele">
                <label>Estimate (pts)</label>
                <input type="text" value="3.00" />
              </div>
              <div class="form-ele">
                <label>Priority</label>
                <input type="text" value="high" />
              </div>
              <div class="form-ele">
                <label>T Shirt Size</label>
                <input type="text" value="M" />
              </div>
              <input type="checkbox" id="ShowHide" unchecked />
              <label class="sh-toggle" for="ShowHide">
                <span class="lm less">less &middot;&middot;&middot;</span>
                <span class="lm more">more &middot;&middot;&middot;</span>
              </label>
              <div class="show-hide">
                <div class="form-ele">
                <label>Class of Service</label>
                <input type="text" value="System Integration" />
              </div>
              <div class="form-ele">
                <label>Risk</label>
                <input type="text" value="Low" />
              </div>
              <div class="form-ele">
                <label>Tags</label>
                <input type="text" value="Warehouse" />
              </div>
              <div class="form-ele">
                <label>Incumbent Tools</label>
                <input type="text" value="System Clear" />
              </div>
                <div class="form-ele">
                <label>Modules Interested In</label>
                <input type="text" value="What is this" />
              </div>
                <div class="form-ele">
                <label>Other Tools Evaluating</label>
                <input type="text" value="Tools tools and more" />
              </div>
                <div class="form-ele">
                <label>Scheuled On</label>
                <input type="text" value="1/2/2020" />
              </div>
                <div class="form-ele">
                <label>Style Status</label>
                <input type="text" value="Designing" />
              </div>
                <div class="form-ele">
                <label>Tools Landscape</label>
                <input type="text" value="Sahara" />
              </div>
                <div class="form-ele">
                <label>Test Branch</label>
                <input type="text" value="RL-23042" />
              </div>
                <div class="form-ele">
                <label>Test Type</label>
                <input type="text" value="Shock" />
              </div>
                <div class="form-ele">
                <label>Incumbent Tools</label>
                <input type="text" value="What" />
              </div>
                <div class="form-ele">
                <label>Customer</label>
                <input type="text" value="FedEx" />
              </div>
                 <div class="form-ele">
                <label>Reference</label>
                <input type="text" value="Bob Wilkins" />
              </div>
                 <div class="form-ele">
                <label>Requested By</label>
                <input type="text" value="Josh Huebert" />
              </div>
                 <div class="form-ele">
                <label>Source</label>
                <input type="text" value="Origin" />
              </div>
                 <div class="form-ele">
                <label>Build</label>
                <input type="text" value="R92" />
              </div>
                 <div class="form-ele">
                <label>Retrospective</label>
                <input type="text" value="Wednesday" />
              </div>
                
              </div>
            </section>
            </section>
            <section class="column readonly">
              <div class="form-ele">
                <label>Task Status</label>
                <span class="progress-bar forty-percent task"></span>
              </div>
              <div class="form-ele">
                <label>Test Status</label>
                <span class="progress-bar sixtyfive-percent test"></span>
              </div>
              <div class="form-ele">
                <label>Total Detail Estimate (hrs)</label>
                <input type="text" value="50.00" disabled />
              </div>
              <div class="form-ele">
                <label>Total To Do (hrs)</label>
                <input type="text" value="23.00" disabled />
              </div>
               <div class="form-ele">
                <label>Total Done (hrs)</label>
                <input type="text" value="27.00" disabled />
              </div>
              <div class="form-ele">
                <label>Delivery Category</label>
                <input type="text" value="Expedited" disabled />
              </div>
               <div class="form-ele">
                <label>Code Complexity Risk (0-100)</label>
                <input type="text" value="34" disabled />
              </div>
              <div class="form-ele">
                <label>Split From ID</label>
                <div class="form-ele"><a href="#">E-01201</a></div>
              </div>
              <div class="form-ele">
                <label>Completed by</label>
                <input type="text" value="Boris Admin" disabled />
              </div>
              <div class="form-ele">
                <label>Date Completed</label>
                <input type="text" value="4/9/2020 3:40PM" disabled />
              </div>
              <div class="form-ele">
                <label>Created by</label>
                <input type="text" value="Boris Admin" disabled />
              </div>
              <div class="form-ele">
                <label>Create Date</label>
                <input type="text" value="3/5/2020 11:03AM" disabled />
              </div>
              <div class="form-ele">
                <label>Changed By</label>
                <input type="text" value="Bob Tester" disabled />
              </div>
              <div class="form-ele">
                <label>Change Date</label>
                <input type="text" value="3/5/2020 11:03AM" disabled />
              </div>
            </section>
          </section>
          <section class="relation-button">
            <button class="relationships">Show Relationships</button>
          </section>
        </section>
      </section>
  </main>
</div>
              
            
!

CSS

              
                @layer0: #e1ecf1;
@layer1: white;
@layer2: #b8d3de;
@color1: #438098;
@color2: #244451;
@asset-color: #3d8b40;
@bar: 60px;
@drawer: 400px;
@padding: 8px;

html, body {
// min-height: 100vh;
}

body {
  font-size: 14px;
  color: @color2;
  font-family: 'Cabin', sans-serif;
}

.required {
  color: red;
}

input::placeholder {
  color: rgba(@color1, .5);
}

.important {
  display: inline-block;
  color: orange;
  border: 1px solid;
  border-radius:50%;
  padding: (@padding / 4) (@padding / 1.2);
  font-size: 10px;
  font-weight: 600;
  vertical-align: 20%;
}

.layout {
  background-color: @layer0;
  width: 100%;
  height:inherit;
  min-height: 100vh;
  .top-area {
    height: @bar;
    width: 100%;
    box-sizing: border-box;
    background-color: @layer1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 @padding;
    
    div {
      display: inherit;
      align-items: inherit;
      justify-content: inherit;
      
      span {
        margin: 0 (@padding / 2);
      }
    }
  }
}

.icon-element, .text-element {
  display: inline-block;
  background: @layer0;
}

.icon-element {
  width: 16px;
  height: 16px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: @color2;
  
  .material-icons {
    font-size: 18px;
  }
}

.menu-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.asset-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: @asset-color;
  color: white;
}

.asset-id, .asset-title {
  font-size: 24px;
}

.text-element {
  width: 50px;
  height: 18px;
  border-radius: 16px;
}

.active {
  border-bottom: 3px solid;
}

.text-title {
  height: 26px;
  width: 100px;
}

.v1-button {
  display: inline-flex;
  align-items: center;
  border:1px solid @layer2;
  background-color: @layer0;
  border-radius: 16px;
}

main {
  height: calc(100% - @bar);
  display: flex;
  align-items: stretch;
  
  #spToggle {
      display: none;
    }
  
  #spToggle:checked ~ .sidepanel {
    min-width: @bar;
    .side-drawer {
      display: none;
    }
  }
  
  .sidepanel {
    min-width: calc(@bar + @drawer);
    height: 100vh;
    min-height: calc(100vh - @bar);
    background-color: @layer1;
    border-top: 1px solid @layer0;
    box-sizing: border-box;
    display: flex;
    
    nav {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: @bar;
      border-right: 1px solid @layer0;
      height: inherit;
      & > * {
        margin: 5px;
      }
    }
    
    .side-drawer {
      width: @drawer;
      .panel {
        width: 100%;
        box-sizing: border-box;
        padding: 16px;
        
        .s-a-c {
          background-color: @layer0;
          padding: 16px;
          display: flex;
          border-radius: 8px;
          align-items: center;
          grid-gap: 8px;
        }
        
        .search {
          padding: 16px;
          display: flex;
          border-radius: 8px;
          align-items: center;
          grid-gap: 8px;
        }
      }
    }
  }
  .content-container {
    width: calc(100% - @bar);
      .content-top {
        width: 100%;
        height: @bar;
        background-color: @layer2;
        display: flex;
        align-items: center;
        
        .text-element {
          background-color: @color1;
        }
        
        & > * {
          margin: 0 @padding;
        }
      }
    }
}

.content-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(@bar / 2);
  width: 100%;
  > span {
          margin: 0 (@padding);
          span {
            background: @layer2;
            display: inline-block;
            width: 18px;
            height: 18px;
            text-align: center;
            line-height: 18px;
            border-radius: 50%;
          }
        }
}

.content-arena {
  width: calc(100% - (@padding * 2));
  height: calc(100% - (@bar * 1.5) - @padding);
  box-sizing: border-box;
  background-color: @layer1;
  margin: 0 @padding @padding;
  border-radius: @padding;
  padding: (@padding * 2);
  
  .area {
    display: flex;
    justify-content: flex-start;
    border-bottom: 1px solid @layer0;
    grid-gap: 32px;
    
    .custom-area {
      display: grid;
      width: 100%;
      position: relative;
      white-space: nowrap;
      overflow: hidden;
      grid-template-columns: 1fr 1px 1fr;
      grid-template-areas: "col1 col-action col3";
      grid-gap: 16px;
      
      .column {
        display: inline-block;
        vertical-align: top;
        height: 100%;
        box-sizing: border-box;
        padding: 0 8px;
        
           &.vert-hr {
            width: 1px;
            border-left: 1px solid @layer2;
            border-radius: 0;
             position: relative;
             grid-area: col-action;
             
             .swapper {
                transform: rotate(180deg);
             }
          }
        
        &.rich-text {
         grid-area: col1;
          min-width: 500px;
        }
        
        &.list-items {
          display: inline-flex;
          grid-area: col3;
          min-width: 300px;
        }
      }
    }
    
    .column {
      margin: @padding 0;
      padding: @padding (@padding * 2);
      border-radius: @padding;
      
      &.readonly {
        background-color: @layer0;
        width: 10%;
        min-width: 300px;
      }
    }
  }
}

.form-ele {
  margin: @padding 0;
  label, input {
    font-size: 0.875rem;
  }
  
  label {
    display: inline-flex;
    grid-gap: 0 4px;
    margin-bottom: @padding / 3;
    align-items: center;
  }
  
  input {
    border:1px solid @layer2;
    padding: @padding (@padding * 2);
    border-radius: (@padding * 1.5);
    min-width: 200px;
    display: block;
  }
}

.divider {
  width: 1px;
  background-color: @layer0;
  min-height: 100px;
  height: 100%;
}

.readonly .text-element {
  background-color: @layer2;
}

input:disabled {
  background-color: transparent;
  border-color: transparent;
  opacity: 0.5;
}

.list-items {
  display: flex;
  flex-wrap: wrap;
  grid-gap: 0 16px;
}

.rich-text .form-ele {
    display: block;
    width: 100%;
  
    textarea {
    display: block;
    height: 200px;
    min-width: 100%;
    border:1px solid @layer2;
    border-radius: 4px;
      
            &#description {
        height: 400px;
      }
    }
}

.relation-button {
  margin: 25px auto;
  text-align: center;
}

.relationships {
  padding: 8px 48px;
  border-radius: 16px;
  border: 1px solid @layer2;
  background: @layer1;
}

.progress-bar {
  display: inline-block;
  position: relative;
  background-color: @layer2;
  width: 100%;
  height: 12px;
  border-radius: 6px;
  
  &.forty-percent:before {
    width: 40%;
  }
  &.sixtyfive-percent:before {
    width: 65%;
  }
  &.task:before {
    background-color: gray;
  }
  &.test:before {
     background-color: skyblue;
  }
  
  &:before {
    content: '';
    display: inline-block;
    height: inherit;
    border-radius: 6px 0 0 6px;
  }
  
}

/* ------------------ toggle less / more section ----------- */

#ShowHide {
  display: none;
}

.show-hide {
  display: inline-flex;
  flex-wrap: wrap;
  grid-gap: 0 16px;
}

.sh-toggle {
  display: block;
  width: 100%;
  height: 1px;
  margin: 25px 0;
  border-bottom: 1px solid @layer2;
  position: relative;
  
    .lm {
      display: inline-block;
      padding: 4px 48px;
      border: 1px solid @layer2;
      background: @layer1;
      border-radius: 4px;
      position: absolute;
      left: calc(50% - 100px);
      bottom: -12px;
      transition: all 0.3s linear;
      
      &:hover {
        background-color: @layer0;
      }
    }
}

#ShowHide {
    ~ .sh-toggle {
    .less {
      display: none;
    }
  }
  ~ .show-hide {
    height: 0;
    overflow: hidden;
    transition: all 0.3s linear;
  }
}

#ShowHide:checked { 
    ~ .sh-toggle {
      .more {
        display: none;
      }

      .less {
        display: inline-block;
      }
  }
  
  ~ .show-hide {
    height: auto;
  }
}


/* --------------------- column swapper --------------- */

#columnSwap, #sixtySixLeft, #sixtySixRight  {
  display: none;
}

#columnSwap:checked ~ .custom-area {
  .rich-text {
    grid-area: col3;
  }
   .list-items {
    grid-area: col1;
  }
  
  .vert-hr .swapper {
    transform: rotate(0deg);
  }
}

#sixtySixLeft:checked ~ .custom-area {
  grid-template-columns: 2fr 1px 1fr;
  
  .sixtysix-left {
    background-color: @layer0;
  }
}

#sixtySixRight:checked ~ .custom-area {
  grid-template-columns: 1fr 1px 2fr;
  .sixtysix-right {
    background-color: @layer0;
  }
}

#columnCenter:checked ~ .custom-area {
  grid-template-columns: 1fr 1px 1fr;
  
  .columnCenter {
    background-color: @layer0;
  }
}

.col-control {
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  background-color: @layer1;
  border: 1px solid @layer2;
  border-radius: 50%;
  transition: 0.3s all linear;
  position: absolute;
  left: calc((32px / -2) - 1px);
  color: @layer2;
  
  &.sixtysix-left {
    top: 36px;
    transform: scaleX(-1);
  }
  
  &.sixtysix-right {
    top: 72px;
  }
  
  &:hover {
    background-color: @layer0;
  }
}

textarea {
  resize: vertical;
  box-sizing: border-box;
  padding: 16px;
}


/* -------------------- query breaks -------------- */

@media screen and (max-width: 1726px) {
  .content-arena {
    .area {
      flex-wrap: wrap;
      .column {
        &.readonly {
          width: 100%;
          display: inline-flex;
          flex-wrap: wrap;
          grid-gap: 0 16px;
          .form-ele {
            width: 22%;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 1300px) {
  .content-arena {
     .area {
      .custom-area {
        white-space: nowrap;
        grid-template-columns: 1fr;
        grid-template-areas: "col1" "col3";
        .column {
          &.vert-hr {
            display: none;
          }
        }
      }
    }
  }
}
              
            
!

JS

              
                
              
            
!
999px

Console