.graph-layout position: relative z-index: 0 // new stacking context "graph" width: 100% height: $layout-height &__frame @include fit-positions position: absolute display: flex z-index: z-index('graph', 'frame') width: 100% height: $sidebar-height justify-content: flex-end pointer-events: none @include right-handed flex-direction: row @include left-handed flex-direction: row-reverse &__sidebar width: $sidebar-width height: inherit flex-grow: 0 pointer-events: all &__inner position: fixed height: inherit width: inherit @include right-handed border-left: 1px solid $border-color @include left-handed border-right: 1px solid $border-color &__focus flex-grow: 1 pointer-events: all position: relative // (?) last resort solution to have a fixed scrollable child, with // its dimension relative to its parent // (flaw: no overflow) // contain: layout &__inner @include fit-positions position: absolute background-color: $body-bg &__toolbar position: absolute z-index: z-index('graph', 'toolbar') background-color: $body-bg width: 100% border-bottom: 1px solid $border-color .b-fieldset background-color: $body-bg .toolbar-atlas-button // @XXX Glyphicon icons lack of homogeneous width // ↳ empirically value matching every button icon width $toolbar-atlas-button-width: 40px width: $toolbar-atlas-button-width &__content width: 100% height: 100% ///////////////////////////////////////////// .graph-topbar @include aside-topbar display: flex padding-left: $topbar-item-margin padding-right: $topbar-item-margin &__toolbar, &__sidebar width: $topbar-fixed-button-width margin-left: $topbar-item-margin margin-right: $topbar-item-margin &__search width: $topbar-input-width margin-left: $topbar-item-margin margin-right: $topbar-item-margin [type="submit"] display: none ///////////////////////////////////////////// .graph-doc-focus @include term-window &__header // avoid overlap with document side controls @include right-handed margin-left: space-x(4) @include left-handed margin-right: space-x(4) // remove document header top spacing due to the already presence of // the inner column top teaser .document-layout__header padding-top: initial ///////////////////////////////////////////// .graph-sidebar @include term-window $margin-x: $sidebar-tab-margin-x $margin-y: space-x(2) &__legend-tab padding: $margin-y $margin-x &__data-tab padding: $margin-y $margin-x &__community-tab padding: $margin-y $margin-x &__separator margin-top: $margin-y margin-bottom: $margin-y color: $gray-500 text-align: center .graph-legend $legend-code-width: 24px $legend-code-height: 12px &__item display: flex align-items: baseline list-style: none position: relative &:not(:first-child) margin-top: space-x(3) &__title color: $gray-800 font-size: 15px font-weight: bold margin-bottom: space-x(0.25) &__code width: $legend-code-width height: $legend-code-height display: inline-block margin-right: space-x(2.5) border: 1px solid $gray-500 .graph-legend-nodes &__item display: inline-block &:first-child margin-top: space-x(0.75) &:not(:last-child) margin-bottom: space-x(0.5) margin-right: space-x(0.5) &--count color: $gray-800 font-size: 12px font-weight: bold &__badge font-size: 13px white-space: normal word-break: break-word &--selected background-color: darken($light, 10%) // from Bootstrap "_badge.scss" .graph-documentation &__text-section margin-bottom: space-x(3) font-size: 15px line-height: 1.5 p margin-bottom: space-x(1) li list-style-type: circle padding-left: space-x(0.5) margin-left: space-x(3) line-height: 1.4 &:not(:last-child) margin-bottom: space-x(1.5) .graph-selected-nodes &__item &:not(:last-child) margin-bottom: space-x(0.5) &__badge font-size: $font-size-base white-space: normal word-break: break-word &__expand // Following <list-group-item> spacing $position-x: $list-group-item-padding-x // Empirical: fit well with icon overlay $position-y: 1rem position: absolute right: $position-x bottom: $position-y &__actions .b-button-group width: 100% .b-button width: 50% .graph-neighborhood &__counter font-weight: bold &__expand // Following <list-group-item> spacing $position-x: $list-group-item-padding-x // Empirical: fit well with icon overlay $position-y: 1rem position: absolute right: $position-x bottom: $position-y &__badge white-space: normal word-break: break-word &:not(:last-child) margin-bottom: space-x(0.75) &__show-more margin-top: space-x(2) .graph-doc-list &__item @include clickable display: flex align-items: flex-start transition: $transition-base &:hover background-color: $gray-50 &--selected::before @include fit-positions content: "" position: absolute z-index: 1 width: 2px background-color: $info // (following list group item border radius) &--selected:first-child::before border-top-left-radius: $list-group-border-radius &--selected:last-child::before border-bottom-left-radius: $list-group-border-radius &__main flex-grow: 1 padding-right: $card-spacer-x &__title, &__source, &__date line-height: 1.3 margin-bottom: space-x(0.5) &__source font-size: 15px color: $gray-700 &__date font-size: 14px color: $gray-600 .graph-contact-list &__item &__title, &__subtitle line-height: 1.3 margin-bottom: space-x(0.25) &__subtitle font-size: 15px color: $gray-700 ///////////////////////////////////////////// .graph-toolbar $self: & $section-margin: space-x(2) $item-margin: space-x(1) display: flex padding: #{ $section-margin / 2 } &__gap width: $item-margin display: inline-block &__section margin: #{ $section-margin / 2 } // Selection settings &--selection .b-fieldset__content display: flex #{ $self }__gap width: #{ $item-margin * 2 } .range-simple flex-grow: 1 // Controls &--controls .b-fieldset__content position: relative #{ $self }__gap width: #{ $item-margin * 2 } .range-control, .range-simple flex-basis: calc(50% - #{ $item-margin * 2 }) // Atlas button animation .on-running-animation .b-icon animation-name: pulse animation-duration: 0.5s animation-timing-function: ease animation-direction: alternate animation-iteration-count: infinite animation-play-state: running