Fieldset

Fieldset

Sit dolor culpa laborum aliquip
Ut et in commodo in
Fugiat occaecat ut eu dolore
Irure pariatur consequat ipsum minim
Sit pariatur ut aute enim
Id nulla occaecat proident pariatur
Cupidatat excepteur anim ut proident
Nostrud anim dolor dolore deserunt
<fieldset class="e-fieldset">
  <div class="e-row">
    <div class="e-col-12">
      <div class="e-fieldset__item e-fieldset__item-chart">
        Aute dolore aliqua voluptate ut 
      </div>
      <div class="e-fieldset__item e-fieldset__item-chart e-fieldset__item-chart-active">
        Id dolore ex occaecat aute 
      </div>
      <div class="e-fieldset__item e-fieldset__item-chart">
        Laborum in qui enim incididunt 
      </div>
      <div class="e-fieldset__item e-fieldset__item-chart">
        Adipiscing est cupidatat in qui 
      </div>
      <div class="e-fieldset__item e-fieldset__item-chart">
        Proident cillum magna aliqua non 
      </div>
      <div class="e-fieldset__item e-fieldset__item-chart">
        Duis ea nulla cupidatat in 
      </div>
      <div class="e-fieldset__item e-fieldset__item-chart">
        Sint anim dolore laborum non 
      </div>
      <div class="e-fieldset__item e-fieldset__item-chart">
        Enim nulla duis est nisi 
      </div>
    </div>
  </div>
</fieldset>

                        <fieldset class="e-fieldset">
                          <div class="e-row">
                            <div class="e-col-12">
                              <div class="e-fieldset__item e-fieldset__item-chart">Sed magna qui lorem aute 
                              </div>
                              <div class="e-fieldset__item e-fieldset__item-chart e-fieldset__item-chart-active">Officia amet dolore nisi ut 
                              </div>
                              <div class="e-fieldset__item e-fieldset__item-chart">Commodo cillum nostrud minim dolor 
                              </div>
                              <div class="e-fieldset__item e-fieldset__item-chart">Voluptate qui proident est eu 
                              </div>
                              <div class="e-fieldset__item e-fieldset__item-chart">Adipiscing laboris do in voluptate 
                              </div>
                              <div class="e-fieldset__item e-fieldset__item-chart">In sunt magna eiusmod magna 
                              </div>
                              <div class="e-fieldset__item e-fieldset__item-chart">Eiusmod cillum ut ut pariatur 
                              </div>
                              <div class="e-fieldset__item e-fieldset__item-chart">Amet ullamco id in nisi 
                              </div>
                            </div>
                          </div>
                        </fieldset>

Fieldset in textarea

Label
150/140
English - 32%
Russian - 7.5%
Deutsch - 2.6%
French - 56%
Turkish - 86%
Hungarian - 12%
Spanish - 0.13%
Swedish - 0.13%
Manage Language
<div class="e-field">
  <div class="e-field__label">
    Label
  </div>
  <div class="e-toolbox">
    <div class="e-toolbox__content">
      <div class="e-toolbox__actions">
        <e-tooltip content="tooltip content" class="float-left">
          <div class="e-btn e-btn-onlyicon e-svgclickfix">
            <e-icon icon="user"></e-icon>
          </div>
        </e-tooltip>
      </div>
      <e-tooltip content="tooltip content" class="float-right">
        <div class="text-color-warning">
          <e-icon icon="warning" color="warning" type="table"></e-icon>
          <strong>
            150/140
          </strong>
        </div>
      </e-tooltip>
    </div>
  </div>
  <div class="e-flex e-flex-sticky">
    <textarea placeholder="Textarea placeholder" class="e-flex__item e-flex__item-auto e-input e-input-textarea e-input-auto_height"></textarea>
    <div class="e-flex__item">
      <div class="e-fieldset e-fieldset-sidebar">
        <div class="e-fieldset__item e-fieldset__item-chart">
          English -
          <span class="text-color-shade">
            &nbsp;32%
          </span>
        </div>
        <div class="e-fieldset__item e-fieldset__item-chart e-fieldset__item-chart-active">
          Russian -
          <span class="text-color-shade">
            &nbsp;7.5%
          </span>
        </div>
        <div class="e-fieldset__item e-fieldset__item-chart">
          Deutsch -
          <span class="text-color-shade">
            &nbsp;2.6%
          </span>
        </div>
        <div class="e-fieldset__item e-fieldset__item-chart">
          French -
          <span class="text-color-shade">
            &nbsp;56%
          </span>
        </div>
        <div class="e-fieldset__item e-fieldset__item-chart">
          Turkish -
          <span class="text-color-shade">
            &nbsp;86%
          </span>
        </div>
        <div class="e-fieldset__item e-fieldset__item-chart">
          Hungarian -
          <span class="text-color-shade">
            &nbsp;12%
          </span>
        </div>
        <div class="e-fieldset__item e-fieldset__item-chart">
          Spanish -
          <span class="text-color-shade">
            &nbsp;0.13%
          </span>
        </div>
        <div class="e-fieldset__item e-fieldset__item-chart">
          Swedish -
          <span class="text-color-shade">
            &nbsp;0.13%
          </span>
        </div>
      </div>
      <a class="e-btn e- e-btn-fieldset">
        <e-icon icon="cog"></e-icon>
        Manage Language
      </a>
    </div>
  </div>
</div>

                        <div class="e-field">
                          <div class="e-field__label">Label</div>
                          <div class="e-toolbox">
                            <div class="e-toolbox__content">
                              <div class="e-toolbox__actions">
                                <e-tooltip content="tooltip content" class="float-left">
                                  <div class="e-btn e-btn-onlyicon e-svgclickfix">
                                    <e-icon icon="user"></e-icon>
                                  </div>
                                </e-tooltip>
                              </div>
                              <e-tooltip content="tooltip content" class="float-right">
                                <div class="text-color-warning">
                                  <e-icon icon="warning" color="warning" type="table"></e-icon><strong>150/140</strong>
                                </div>
                              </e-tooltip>
                            </div>
                          </div>
                          <div class="e-flex e-flex-sticky">
                            <textarea placeholder="Textarea placeholder" class="e-flex__item e-flex__item-auto e-input e-input-textarea e-input-auto_height"></textarea>
                            <div class="e-flex__item">
                              <div class="e-fieldset e-fieldset-sidebar">
                                <div class="e-fieldset__item e-fieldset__item-chart">English -<span class="text-color-shade">&nbsp;32%</span></div>
                                <div class="e-fieldset__item e-fieldset__item-chart e-fieldset__item-chart-active">Russian -<span class="text-color-shade">&nbsp;7.5%</span></div>
                                <div class="e-fieldset__item e-fieldset__item-chart">Deutsch -<span class="text-color-shade">&nbsp;2.6%</span></div>
                                <div class="e-fieldset__item e-fieldset__item-chart">French -<span class="text-color-shade">&nbsp;56%</span></div>
                                <div class="e-fieldset__item e-fieldset__item-chart">Turkish -<span class="text-color-shade">&nbsp;86%</span></div>
                                <div class="e-fieldset__item e-fieldset__item-chart">Hungarian -<span class="text-color-shade">&nbsp;12%</span></div>
                                <div class="e-fieldset__item e-fieldset__item-chart">Spanish -<span class="text-color-shade">&nbsp;0.13%</span></div>
                                <div class="e-fieldset__item e-fieldset__item-chart">Swedish -<span class="text-color-shade">&nbsp;0.13%</span></div>
                              </div><a class="e-btn e- e-btn-fieldset">
                                <e-icon icon="cog"></e-icon>Manage Language</a>
                            </div>
                          </div>
                        </div>

Fieldset

<fieldset class="e-fieldset">
  <div class="e-row">
    <div class="e-col-12">
      <div class="e-fieldset__item e-fieldset__item-chart e-fieldset__item-chart-active">
        <input id="legend-impressions" type="checkbox" checked="checked" data-id="0" class="e-checkbox e-checkbox-impressions">
        <label title="Impressions" for="legend-impressions">
          Impressions
        </label>
        <div class="e-fieldset__item__indicator background-color-impressions"></div></div>
      <div class="e-fieldset__item e-fieldset__item-chart">
        <input id="legend-reach" type="checkbox" data-id="1" class="e-checkbox">
        <label title="Reach" for="legend-reach">
          Reach
        </label>
        <div class="e-fieldset__item__indicator"></div></div>
      <div class="e-fieldset__item e-fieldset__item-chart e-fieldset__item-chart-active">
        <input id="legend-frequency" type="checkbox" data-id="2" checked class="e-checkbox e-checkbox-frequency">
        <label title="Frequency" for="legend-frequency">
          Frequency
        </label>
        <div class="e-fieldset__item__indicator background-color-frequency"></div></div>
      <div class="e-fieldset__item e-fieldset__item-chart">
        <input id="legend-socialreach" type="checkbox" data-id="3" class="e-checkbox">
        <label title="Social reach" for="legend-socialreach">
          Social reach
        </label>
        <div class="e-fieldset__item__indicator"></div></div>
      <div class="e-fieldset__item e-fieldset__item-chart">
        <input id="legend-clicks" type="checkbox" data-id="4" class="e-checkbox">
        <label title="Clicks" for="legend-clicks">
          Clicks
        </label>
        <div class="e-fieldset__item__indicator"></div></div>
      <div class="e-fieldset__item e-fieldset__item-chart">
        <input id="legend-likes" type="checkbox" data-id="5" class="e-checkbox">
        <label title="Likes" for="legend-likes">
          Likes
        </label>
        <div class="e-fieldset__item__indicator"></div></div>
      <div class="e-fieldset__item e-fieldset__item-chart">
        <input id="legend-comments" type="checkbox" data-id="6" class="e-checkbox">
        <label title="Comments" for="legend-comments">
          Comments
        </label>
        <div class="e-fieldset__item__indicator"></div></div>
      <div class="e-fieldset__item e-fieldset__item-chart">
        <input id="legend-pageclick" type="checkbox" data-id="7" class="e-checkbox">
        <label title="Page click" for="legend-pageclick">
          Page click
        </label>
        <div class="e-fieldset__item__indicator"></div></div>
      <div class="e-fieldset__item e-fieldset__item-chart">
        <input id="legend-conversions" type="checkbox" data-id="8" class="e-checkbox">
        <label title="Conversions" for="legend-conversions">
          Conversions
        </label>
        <div class="e-fieldset__item__indicator"></div></div></div></div>
</fieldset>

                        <fieldset class="e-fieldset">
                          <div class="e-row">
                            <div class="e-col-12">
                              <div class="e-fieldset__item e-fieldset__item-chart e-fieldset__item-chart-active">
                                <input id="legend-impressions" type="checkbox" checked="checked" data-id="0" class="e-checkbox e-checkbox-impressions">
                                <label title="Impressions" for="legend-impressions">Impressions</label>
                                <div class="e-fieldset__item__indicator background-color-impressions"></div>
                              </div>
                              <div class="e-fieldset__item e-fieldset__item-chart">
                                <input id="legend-reach" type="checkbox" data-id="1" class="e-checkbox">
                                <label title="Reach" for="legend-reach">Reach</label>
                                <div class="e-fieldset__item__indicator"></div>
                              </div>
                              <div class="e-fieldset__item e-fieldset__item-chart e-fieldset__item-chart-active">
                                <input id="legend-frequency" type="checkbox" data-id="2" checked="" class="e-checkbox e-checkbox-frequency">
                                <label title="Frequency" for="legend-frequency">Frequency</label>
                                <div class="e-fieldset__item__indicator background-color-frequency"></div>
                              </div>
                              <div class="e-fieldset__item e-fieldset__item-chart">
                                <input id="legend-socialreach" type="checkbox" data-id="3" class="e-checkbox">
                                <label title="Social reach" for="legend-socialreach">Social reach</label>
                                <div class="e-fieldset__item__indicator"></div>
                              </div>
                              <div class="e-fieldset__item e-fieldset__item-chart">
                                <input id="legend-clicks" type="checkbox" data-id="4" class="e-checkbox">
                                <label title="Clicks" for="legend-clicks">Clicks</label>
                                <div class="e-fieldset__item__indicator"></div>
                              </div>
                              <div class="e-fieldset__item e-fieldset__item-chart">
                                <input id="legend-likes" type="checkbox" data-id="5" class="e-checkbox">
                                <label title="Likes" for="legend-likes">Likes</label>
                                <div class="e-fieldset__item__indicator"></div>
                              </div>
                              <div class="e-fieldset__item e-fieldset__item-chart">
                                <input id="legend-comments" type="checkbox" data-id="6" class="e-checkbox">
                                <label title="Comments" for="legend-comments">Comments</label>
                                <div class="e-fieldset__item__indicator"></div>
                              </div>
                              <div class="e-fieldset__item e-fieldset__item-chart">
                                <input id="legend-pageclick" type="checkbox" data-id="7" class="e-checkbox">
                                <label title="Page click" for="legend-pageclick">Page click</label>
                                <div class="e-fieldset__item__indicator"></div>
                              </div>
                              <div class="e-fieldset__item e-fieldset__item-chart">
                                <input id="legend-conversions" type="checkbox" data-id="8" class="e-checkbox">
                                <label title="Conversions" for="legend-conversions">Conversions</label>
                                <div class="e-fieldset__item__indicator"></div>
                              </div>
                            </div>
                          </div>
                        </fieldset>

Last update

Message refactor(icon): use new component
Date:
()
Committer: David Gyenes
Component history