<commit_before>@import 'normalize';

$font-family: Helvetica, Arial, sans-serif;
$color: #FAF2EE;
$background: #FAF4F1;
$sectionheader: #F9E7E4;
$sectionbutton: #F2D1CB;
$bordercolor: #AA412F;

* { box-sizing: border-box; }

body { background-color: $background; }

html, body { height: 100%; overflow: hidden; }

/* Card positioning. */
.card {  }
.card .side { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; }
.card .back { background-color: $sectionbutton; }

/* Two types of cards, div cards are big, button cards are the control to the big cards. */
.card div.side { overflow: auto; }
.card button.side { overflow: hidden; }

/* Transitions */
.card {
  -webkit-transform-style: preserve-3d;
  -webkit-transition: -webkit-transform 0.2s;

  transform-style: preserve-3d;
  transition: transform 0.2s;
}

.card .side {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.card .back {
  -webkit-transform: matrix3d(-1, 0, 0, 0, 0, 1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1);
  transform: matrix3d(-1, 0, 0, 0, 0, 1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1);
}
.flipped .card {
  -webkit-transform: matrix3d(-1, 0, 0, 0, 0, 1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1);
  transform: matrix3d(-1, 0, 0, 0, 0, 1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1);
}

/* This is the mostly decorative header. */
header.main { height: 40px; padding: 0 13px; background: #e1563f url('../img/navigation_background_x2.png') center top repeat-x; background-size: 320px 40px; border-bottom: 1px solid #aa412f; box-shadow: rgba(0,0,0,0.3) 0 0 2px; }
header.main {
  h1 { float: left; margin: 0; font-size: 26px; line-height: 40px; font-family: $font-family; font-weight: normal; color: $color; text-shadow: rgba(0,0,0,0.3) 0px 1px 0px; }

  .buttons { float: right; }
  button { display: inline-block; height: 26px; line-height: 26px; margin: 7px 0; padding: 0 .5em; background-color: rgba(0,0,0,.17); border: 1px solid #a93926; border-radius: 4px; box-shadow: inset rgba(255,255,255,0.17) 0 1px 1px; font-family: $font-family; font-size: 13px; color: $color; text-shadow: rgba(0,0,0,0.3) 0px 1px 0px; }
  button:hover { background-color: rgba(0,0,0,.3); }
  button + button { margin-left: 6.5px; }
}

/* Each pane */
section { position: relative; min-height: 20px; }

/* Each pane also gets a header. */
section > header { min-height: 20px; height: 20px; max-height: 20px; padding: 0 0 0 6.5px; background-color: $sectionheader; }
section > header {
  & > * { height: 20px; }
  h1 { float: left; margin: 0; font-size: 10px; line-height: 20px; text-transform: uppercase; }
  button { margin: 0; padding: 0; border: none; font-size: 10px; line-height: 20px; background-color: $sectionbutton; box-shadow: inset rgba(0,0,0,0.17) 0 1px 1px; }

  .card { float: right; width: 40px; }
}

section {
  .body { position: absolute; top: 20px; right: 0; bottom: 0; left: 0; overflow: auto; }
  .body.card { overflow: visible; }
}

/* Flexbox layout. */
.application {
  display: -webkit-flex;
  -webkit-flex-direction: column;

  display: flex;
  flex-direction: column;
}
.application { height: 100%; }
header.main { min-height: 40px; max-height: 40px; }

main {
  display: -webkit-flex;
  -webkit-flex-direction: row;

  display: flex;
  flex-direction: row;
}
main { height: 100%; }
main > .state { width: 20%; min-width: 100px; }
main > .router { width: 20%; min-width: 100px; }
main > .workspace { width: 60%; min-width: 160px; }

/* Workaround for libsass bug. */
@mixin webkitcalc($property, $expression) {
  #{$property}: -webkit-calc(#{$expression});
}

/* The state, router, and workspace sections are also flexboxes. */
.state, .router, .workspace {
  display: -webkit-flex;
  -webkit-flex-direction: column;

  display: flex;
  flex-direction: column;
}
.state, .router, .workspace { height: 100%; @include webkitcalc(height, "100% - 40px"); }

/* Crazy! the workspace is *also* a flexbox. */
.workspace .stepper { height: 10%; }
.workspace .canvas { height: 60%; }
.workspace .details { height: 30%; }

/* If the section is a card, set its height. */
.state > .card,
.router > .card { height: 100%; }

.state > .card,
.router > .card {
  textarea { width: 100%; height: 100%; display: block; }
}

.router .node { float: left; height: 20px; font-size: 10px; line-height: 20px;  border: 1px solid black; border-radius: 20px; text-align: center; }

/* Blocks to serve as resize handles. */
.resize { z-index: 100; }
main > .resize { position: absolute; width: 8px; margin: 0 -4px; height: calc(100% - 40px); cursor: ew-resize; }

/* Fake border that doesn't take up horizontal space. */
main > .resize {
  background: {
    image: linear-gradient(to bottom, $bordercolor 50%, $bordercolor 50%);
    size: 1px 7px;
    position: center top;
    repeat: repeat-y;
  }
}

main > .resize:hover, main > .resize.active {
  background-image: linear-gradient(to bottom, $bordercolor 50%, transparent 50%);
}

/* Since you can overlap other borders, those shouldn't become dotted. */
.resizing main > .resize:hover {
  background-image: linear-gradient(to bottom, $bordercolor 50%, $bordercolor 50%);
}

.workspace > .resize { position: static; height: 8px; margin: -4px 0; cursor: ns-resize; }

/* Fake border that doesn't take up vertical space. */
.workspace > .resize {
  background: {
    image: linear-gradient(to right, $bordercolor 50%, $bordercolor 50%);
    size: 7px 1px;
    position: center center;
    repeat: repeat-x;
  }
}

.workspace > .resize:hover, .workspace > .resize.active {
  background-image: linear-gradient(to right, $bordercolor 50%, transparent 50%);
}

/* Since you can overlap other borders, those shouldn't become dotted. */
.resizing .workspace > .resize:hover {
  background-image: linear-gradient(to right, $bordercolor 50%, $bordercolor 50%);
}

.resizing.width * { cursor: ew-resize; }
.resizing.height * { cursor: ns-resize; }

@import 'components/code-editor/code-editor';<commit_msg>Needs more specificity.<commit_after>@import 'normalize';

$font-family: Helvetica, Arial, sans-serif;
$color: #FAF2EE;
$background: #FAF4F1;
$sectionheader: #F9E7E4;
$sectionbutton: #F2D1CB;
$bordercolor: #AA412F;

* { box-sizing: border-box; }

body { background-color: $background; }

html, body { height: 100%; overflow: hidden; }

/* Card positioning. */
.card {  }
.card .side { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; }
.card .back { background-color: $sectionbutton; }

/* Two types of cards, div cards are big, button cards are the control to the big cards. */
.card div.side { overflow: auto; }
.card button.side { overflow: hidden; }

/* Transitions */
.card {
  -webkit-transform-style: preserve-3d;
  -webkit-transition: -webkit-transform 0.2s;

  transform-style: preserve-3d;
  transition: transform 0.2s;
}

.card .side {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.card .back {
  -webkit-transform: matrix3d(-1, 0, 0, 0, 0, 1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1);
  transform: matrix3d(-1, 0, 0, 0, 0, 1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1);
}
.flipped .card {
  -webkit-transform: matrix3d(-1, 0, 0, 0, 0, 1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1);
  transform: matrix3d(-1, 0, 0, 0, 0, 1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1);
}

/* This is the mostly decorative header. */
header.main { height: 40px; padding: 0 13px; background: #e1563f url('../img/navigation_background_x2.png') center top repeat-x; background-size: 320px 40px; border-bottom: 1px solid #aa412f; box-shadow: rgba(0,0,0,0.3) 0 0 2px; }
header.main {
  h1 { float: left; margin: 0; font-size: 26px; line-height: 40px; font-family: $font-family; font-weight: normal; color: $color; text-shadow: rgba(0,0,0,0.3) 0px 1px 0px; }

  .buttons { float: right; }
  button { display: inline-block; height: 26px; line-height: 26px; margin: 7px 0; padding: 0 .5em; background-color: rgba(0,0,0,.17); border: 1px solid #a93926; border-radius: 4px; box-shadow: inset rgba(255,255,255,0.17) 0 1px 1px; font-family: $font-family; font-size: 13px; color: $color; text-shadow: rgba(0,0,0,0.3) 0px 1px 0px; }
  button:hover { background-color: rgba(0,0,0,.3); }
  button + button { margin-left: 6.5px; }
}

/* Each pane */
section { position: relative; min-height: 20px; }

/* Each pane also gets a header. */
section > header { min-height: 20px; height: 20px; max-height: 20px; padding: 0 0 0 6.5px; background-color: $sectionheader; }
section > header {
  & > * { height: 20px; }
  h1 { float: left; margin: 0; font-size: 10px; line-height: 20px; text-transform: uppercase; }
  button { margin: 0; padding: 0; border: none; font-size: 10px; line-height: 20px; background-color: $sectionbutton; box-shadow: inset rgba(0,0,0,0.17) 0 1px 1px; }

  .card { float: right; width: 40px; }
}

section {
  .body { position: absolute; top: 20px; right: 0; bottom: 0; left: 0; overflow: auto; }
  .body.card { overflow: visible; }
}

/* Flexbox layout. */
.application {
  display: -webkit-flex;
  -webkit-flex-direction: column;

  display: flex;
  flex-direction: column;
}
.application { height: 100%; }
header.main { min-height: 40px; max-height: 40px; }

main {
  display: -webkit-flex;
  -webkit-flex-direction: row;

  display: flex;
  flex-direction: row;
}
main { height: 100%; }
main > .state { width: 20%; min-width: 100px; }
main > .router { width: 20%; min-width: 100px; }
main > .workspace { width: 60%; min-width: 160px; }

/* Workaround for libsass bug. */
@mixin webkitcalc($property, $expression) {
  #{$property}: -webkit-calc(#{$expression});
}

/* The state, router, and workspace sections are also flexboxes. */
.state, .router, .workspace {
  display: -webkit-flex;
  -webkit-flex-direction: column;

  display: flex;
  flex-direction: column;
}
.state, .router, .workspace { height: 100%; @include webkitcalc(height, "100% - 40px"); }

/* Crazy! the workspace is *also* a flexbox. */
.workspace .stepper { height: 10%; }
.workspace .canvas { height: 60%; }
.workspace .details { height: 30%; }

/* If the section is a card, set its height. */
.state > .card,
.router > .card { height: 100%; }

.state > .card,
.router > .card {
  textarea { width: 100%; height: 100%; display: block; }
}

.router .node { float: left; height: 20px; font-size: 10px; line-height: 20px;  border: 1px solid black; border-radius: 20px; text-align: center; }

/* Blocks to serve as resize handles. */
.resize { z-index: 100; }
main > .resize { position: absolute; width: 8px; margin: 0 -4px; height: calc(100% - 40px); cursor: ew-resize; }

/* Fake border that doesn't take up horizontal space. */
main > .resize {
  background: {
    image: linear-gradient(to bottom, $bordercolor 50%, $bordercolor 50%);
    size: 1px 7px;
    position: center top;
    repeat: repeat-y;
  }
}

main > .resize:hover, main > .resize.active, .resizing main > .resize.active:hover {
  background-image: linear-gradient(to bottom, $bordercolor 50%, transparent 50%);
}

/* Since you can overlap other borders, those shouldn't become dotted. */
.resizing main > .resize:hover {
  background-image: linear-gradient(to bottom, $bordercolor 50%, $bordercolor 50%);
}

.workspace > .resize { position: static; height: 8px; margin: -4px 0; cursor: ns-resize; }

/* Fake border that doesn't take up vertical space. */
.workspace > .resize {
  background: {
    image: linear-gradient(to right, $bordercolor 50%, $bordercolor 50%);
    size: 7px 1px;
    position: center center;
    repeat: repeat-x;
  }
}

.workspace > .resize:hover, .workspace > .resize.active, .resizing .workspace > .resize.active:hover {
  background-image: linear-gradient(to right, $bordercolor 50%, transparent 50%);
}

/* Since you can overlap other borders, those shouldn't become dotted. */
.resizing .workspace > .resize:hover {
  background-image: linear-gradient(to right, $bordercolor 50%, $bordercolor 50%);
}

.resizing.width * { cursor: ew-resize; }
.resizing.height * { cursor: ns-resize; }

@import 'components/code-editor/code-editor';
{'fraction_non_alphanumeric': 0.16806722689075632, 'fraction_numerical': 0.05529411764705883, 'mean_word_length': 3.747108097327483, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 45, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3055160', 'n_tokens_mistral': 4879, 'n_tokens_neox': 4241, 'n_words': 1311}