CSS fieldset

by lpugin

HTML

<div class="vrv-wrapper">
  <div class="vrv-editor-tool-panel">
    <div>
      <fieldset>
        <legend>
         Hello
        </legend>
        <form>
          
        </form>
      </fieldset>
            <fieldset>
        <legend>
         Hello
        </legend>
        <form>
          
        </form>
      </fieldset>
    </div>
  </div>
</div>

SCSS

////////////////////////////////////////////////////////////////////////
// To change dark / light theme - also rename icons directories
////////////////////////////////////////////////////////////////////////
$dark-theme: true;

$background: lightgrey;
$background-light: lighten($background, 10%);
$background-extra-light: lighten($background, 20%);
$background-active: darken($background, 20%);
$background-toggled: darken($background, 10%);
$background-border: darken($background, 10%);
$text-color: black;
$dialog-color: lighten($background, 10%);
$dialog-background: rgba(245, 245, 245, 0.8);
$doc-background: whitesmoke;
$disabled-opacity: 0.2;
$primary: #8B0000;

$hover-filter: invert(100%);
$filtered-primary: invert($primary);
$filtered-background-grey-active: invert($background-active);

@if $dark-theme ==true {
    $background: rgb(60, 60, 60);
    $background-light: lighten($background, 10%);
    $background-extra-light: lighten($background, 20%);
    $background-active: darken($background, 15%);
    $background-toggled: darken($background, 10%);
    $background-border: lighten($background, 10%);
    $text-color: white;
    $dialog-color: rgb(50, 50, 50);
    $dialog-background: rgba(95, 95, 95, 0.8);
    $doc-background: grey;
    $disabled-opacity: 0.5;

    $hover-filter: invert(0%);
    $filtered-primary: $primary;
    $filtered-background-grey-active: $background-active;
}

////////////////////////////////////////////////////////////////////////
// Some dimensions
////////////////////////////////////////////////////////////////////////

$toolbar-height: 36px;
$menu-height: 18px;
$statusbar-height: 20px;
$editor-tool-panel-width: 300px;
$editor-keyboard-height: 110px;
$btn-height: 40px;
$dialog-gh-list-height: 350px;

$z-index-valid: 5;
$z-index-menu: 6;
$z-index-dialog: 7;
$z-index-notification: 8;
$z-index-tooltip: 9;

$font-family: Helvetica Neue, Helvetica, Arial, sans-serif;

////////////////////////////////////////////////////////////////////////
//...