gitlab-org--gitlab-foss/app/assets/stylesheets/page_bundles/ide.scss

1152 lines
18 KiB
SCSS

@import 'framework/variables';
@import 'framework/mixins';
@import './ide_mixins';
@import './ide_monaco_overrides';
@import './themes/dark';
$search-list-icon-width: 18px;
$ide-activity-bar-width: 60px;
$ide-context-header-padding: 10px;
$ide-project-avatar-end: $ide-context-header-padding + 48px;
$ide-tree-padding: $gl-padding;
$ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding;
$ide-commit-row-height: 32px;
$ide-commit-header-height: 48px;
.project-refs-form,
.project-refs-target-form {
display: inline-block;
}
.commit-message {
@include str-truncated(250px);
}
.ide-view {
position: relative;
margin-top: 0;
padding-bottom: $ide-statusbar-height;
color: $gl-text-color;
min-height: 0; // firefox fix
&.is-collapsed {
.ide-file-list {
max-width: 250px;
}
}
.file-status-icon {
width: 10px;
height: 10px;
}
}
.ide-file-list {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0; // firefox fix
}
.multi-file-loading-container {
margin-top: 10px;
padding: 10px;
}
.multi-file-table-col-commit-message {
white-space: nowrap;
width: 50%;
}
.multi-file-edit-pane {
display: flex;
flex-direction: column;
flex: 1;
border-left: 1px solid $white-dark;
overflow: hidden;
}
.multi-file-tabs {
display: flex;
background-color: $gray-light;
box-shadow: inset 0 -1px $white-dark;
> ul {
display: flex;
overflow-x: auto;
}
li {
display: flex;
align-items: center;
padding: $grid-size $gl-padding;
background-color: $gray-normal;
border-right: 1px solid $white-dark;
border-bottom: 1px solid $white-dark;
&.active {
background-color: $white;
border-bottom-color: $white;
}
&:not(.disabled) {
.multi-file-tab {
cursor: pointer;
}
}
&.disabled {
.multi-file-tab-close {
cursor: default;
}
}
}
}
.multi-file-tab {
@include str-truncated(141px);
svg {
vertical-align: middle;
}
}
.multi-file-tab-close {
width: 16px;
height: 16px;
padding: 0;
margin-left: $grid-size;
background: none;
border: 0;
border-radius: $border-radius-default;
color: $gray-900;
svg {
position: relative;
top: -2px;
}
.ide-file-changed-icon {
display: block;
position: relative;
top: 1px;
right: -2px;
}
&:not([disabled]):hover {
background-color: $gray-200;
}
&:not([disabled]):focus {
background-color: $blue-500;
color: $white;
outline: 0;
svg {
fill: currentColor;
}
}
}
.multi-file-edit-pane-content {
flex: 1;
height: 0;
}
.preview-container {
flex-grow: 1;
position: relative;
.md-previewer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: auto;
padding: $gl-padding;
}
.file-container {
background-color: $gray-darker;
display: flex;
height: 100%;
align-items: center;
justify-content: center;
text-align: center;
.file-content {
padding: $gl-padding;
max-width: 100%;
max-height: 100%;
}
.file-info {
font-size: $label-font-size;
color: $diff-image-info-color;
}
}
}
.ide-mode-tabs {
border-bottom: 1px solid $white-dark;
li a {
padding: $gl-padding-8 $gl-padding;
line-height: $gl-btn-line-height;
}
}
.ide-btn-group {
padding: $gl-padding-4 $gl-vert-padding;
line-height: 24px;
}
.ide-status-bar {
border-top: 1px solid $white-dark;
padding: 2px $gl-padding-8 0;
background: $white;
display: flex;
justify-content: space-between;
height: $ide-statusbar-height;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
font-size: 12px;
line-height: 22px;
* {
font-size: inherit;
}
svg {
vertical-align: sub;
}
.ide-status-avatar {
float: none;
margin: 0 0 1px;
}
}
.ide-status-list {
> div + div {
padding-left: $gl-padding;
}
}
.ide-status-file {
text-align: right;
}
// Not great, but this is to deal with our current output
.multi-file-preview-holder {
height: 100%;
overflow: scroll;
.file-content.code {
display: flex;
i {
margin-left: -10px;
}
}
.line-numbers {
min-width: 50px;
}
.file-content,
.line-numbers,
.blob-content,
.code {
min-height: 100%;
}
}
.file-content.blob-no-preview {
a {
margin-left: auto;
margin-right: auto;
}
}
.multi-file-commit-panel {
display: flex;
position: relative;
width: 340px;
padding: 0;
background-color: $gray-light;
padding-right: 1px;
.context-header {
width: auto;
margin-right: 0;
> a,
> button {
text-decoration: none;
padding-top: $gl-padding-8;
padding-bottom: $gl-padding-8;
}
}
.multi-file-commit-panel-inner {
position: relative;
display: flex;
flex-direction: column;
min-height: 100%;
min-width: 0;
width: 100%;
}
.multi-file-commit-panel-inner-content {
display: flex;
flex: 1;
flex-direction: column;
background-color: $white;
border-left: 1px solid $white-dark;
border-top: 1px solid $white-dark;
border-top-left-radius: $border-radius-small;
min-height: 0; // firefox fix
}
}
.multi-file-commit-panel-section {
display: flex;
flex-direction: column;
flex: 1;
max-height: 100%;
overflow: auto;
}
.ide-commit-empty-state {
padding: 0 $gl-padding;
}
.ide-commit-empty-state-container {
margin-top: auto;
margin-bottom: auto;
}
.multi-file-commit-panel-header {
height: $ide-commit-header-height;
border-bottom: 1px solid $white-dark;
padding: 12px 0;
}
.multi-file-commit-panel-collapse-btn {
border-left: 1px solid $white-dark;
margin-left: auto;
}
.multi-file-commit-list {
flex: 1;
overflow: auto;
padding: $grid-size 0;
min-height: 60px;
&.form-text.text-muted {
margin-left: 0;
right: 0;
}
}
.multi-file-commit-list-collapsed {
display: flex;
flex-direction: column;
padding: $gl-padding 0;
svg {
display: block;
margin-left: auto;
margin-right: auto;
color: $gray-700;
}
.file-status-icon {
width: 10px;
height: 10px;
margin-left: 3px;
}
}
.multi-file-commit-list-path {
display: flex;
align-items: center;
margin-left: -$grid-size;
margin-right: -$grid-size;
padding: $grid-size / 2 $grid-size;
border-radius: $border-radius-default;
text-align: left;
cursor: pointer;
height: $ide-commit-row-height;
padding-right: 0;
&:hover,
&:focus {
background: $gray-100;
outline: 0;
}
&:active {
background: $gray-200;
}
&.is-active {
background-color: $white-normal;
}
svg {
min-width: 16px;
vertical-align: middle;
display: inline-block;
}
}
.multi-file-commit-list-file-path {
@include str-truncated(calc(100% - 30px));
user-select: none;
&:active {
text-decoration: none;
}
}
.multi-file-commit-form {
position: relative;
background-color: $white;
border-left: 1px solid $white-dark;
transition: all 0.3s ease;
> form,
> .commit-form-compact {
padding: $gl-padding 0;
margin-left: $gl-padding;
margin-right: $gl-padding;
border-top: 1px solid $white-dark;
}
.btn {
font-size: $gl-font-size;
}
.multi-file-commit-panel-success-message {
top: 0;
}
}
.multi-file-commit-panel-bottom {
position: relative;
}
.dirty-diff {
// !important need to override monaco inline style
width: 4px !important;
left: 0 !important;
&-modified {
background-color: $blue-500;
}
&-added {
background-color: $green-600;
}
&-removed {
height: 0 !important;
width: 0 !important;
bottom: -2px;
border-style: solid;
border-width: 5px;
border-color: transparent transparent transparent $red-500;
&::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 1px;
background-color: rgba($red-500, 0.5);
}
}
}
.ide-loading {
display: flex;
height: 100%;
align-items: center;
justify-content: center;
}
.ide-empty-state {
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
}
.ide {
overflow: hidden;
flex: 1;
}
.ide-commit-list-container {
display: flex;
flex: 1;
flex-direction: column;
min-height: 140px;
margin-left: $gl-padding;
margin-right: $gl-padding;
&.is-first {
border-bottom: 1px solid $white-dark;
}
}
.ide-staged-action-btn {
width: $ide-commit-row-height;
height: $ide-commit-row-height;
color: inherit;
}
.ide-commit-file-count {
min-width: 22px;
background-color: $gray-light;
border: 1px solid $white-dark;
}
.ide-commit-options {
label {
font-weight: normal;
&.is-disabled {
.ide-option-label {
text-decoration: line-through;
}
}
}
.form-text.text-muted {
margin-top: 0;
line-height: 0;
}
}
.ide-commit-new-branch {
margin-left: 25px;
}
.ide-sidebar-link {
display: flex;
align-items: center;
justify-content: center;
position: relative;
height: 60px;
width: 100%;
padding: 0 $gl-padding;
color: $gl-text-color-secondary;
background-color: transparent;
border: 0;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
outline: 0;
cursor: pointer;
svg {
margin: 0 auto;
}
&:hover {
color: $gl-text-color;
background-color: $gray-100;
}
&:focus {
color: $gl-text-color;
background-color: $gray-200;
}
&.active {
// extend width over border of sidebar section
width: calc(100% + 1px);
padding-right: $gl-padding + 1px;
background-color: $white;
border-top-color: $white-dark;
border-bottom-color: $white-dark;
&::after {
content: '';
position: absolute;
right: -1px;
top: 0;
bottom: 0;
width: 1px;
background: $white;
}
&.is-right {
padding-right: $gl-padding;
padding-left: $gl-padding + 1px;
&::after {
right: auto;
left: -1px;
}
}
}
}
.ide-activity-bar {
position: relative;
flex: 0 0 $ide-activity-bar-width;
z-index: 1;
}
.ide-commit-message-field {
height: 200px;
background-color: $white;
.md-area {
display: flex;
flex-direction: column;
height: 100%;
}
.nav-links {
height: 30px;
}
.form-text.text-muted {
margin-top: 2px;
color: $blue-500;
cursor: pointer;
}
}
.ide-commit-message-textarea-container {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
.note-textarea {
font-family: $monospace-font;
}
}
.ide-commit-message-highlights-container {
position: absolute;
left: 0;
top: 0;
right: -100px;
bottom: 0;
padding-right: 100px;
pointer-events: none;
z-index: 1;
.highlights {
white-space: pre-wrap;
word-wrap: break-word;
color: transparent;
}
mark {
margin-left: -1px;
padding: 0 2px;
border-radius: $border-radius-small;
background-color: $orange-200;
color: transparent;
opacity: 0.6;
}
}
.ide-commit-message-textarea {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 2;
background: transparent;
resize: none;
}
.ide-tree-header {
flex: 0 0 auto;
display: flex;
align-items: center;
flex-wrap: wrap;
padding: 12px 0;
margin-left: $ide-tree-padding;
margin-right: $ide-tree-padding;
border-bottom: 1px solid $white-dark;
svg {
color: $gray-700;
&:focus,
&:hover {
color: $blue-600;
}
}
.ide-new-btn {
margin-left: auto;
}
button {
color: $gl-text-color;
}
}
.ide-nav-dropdown {
width: 100%;
margin-bottom: 12px;
.dropdown-menu {
width: 385px;
max-height: initial;
}
.dropdown-menu-toggle {
svg {
vertical-align: middle;
color: $gray-700;
&:hover {
color: $gray-700;
}
}
&:hover {
background-color: $white-normal;
}
}
&.show {
.dropdown-menu-toggle {
background-color: $white-dark;
}
}
}
.ide-tree-body {
overflow: auto;
padding-left: $ide-tree-padding;
padding-right: $ide-tree-padding;
}
.ide-sidebar-branch-title {
font-weight: $gl-font-weight-normal;
svg {
position: relative;
top: 3px;
margin-top: -1px;
}
}
.commit-form-compact {
.btn {
margin-bottom: 8px;
}
p {
margin-bottom: 0;
}
}
.commit-form-slide-up-enter-active,
.commit-form-slide-up-leave-active {
position: absolute;
top: 0;
left: 0;
right: 0;
transition: all 0.3s ease;
}
.is-full .commit-form-slide-up-enter,
.is-compact .commit-form-slide-up-leave-to {
transform: translateY(100%);
}
.is-full .commit-form-slide-up-enter-to,
.is-compact .commit-form-slide-up-leave {
transform: translateY(0);
}
.fade-enter,
.fade-leave-to,
.commit-form-slide-up-enter,
.commit-form-slide-up-leave-to {
opacity: 0;
}
.ide-review-header {
flex-direction: column;
align-items: flex-start;
.dropdown {
margin-left: auto;
}
a {
color: $blue-600;
}
}
.ide-review-sub-header {
color: $gl-text-color-secondary;
}
.ide-tree-changes {
display: flex;
align-items: center;
font-size: 12px;
}
.multi-file-commit-panel-success-message {
position: absolute;
top: 61px;
left: 1px;
bottom: 0;
right: 0;
z-index: 10;
background: $white;
overflow: auto;
display: flex;
flex-direction: column;
justify-content: center;
}
.ide-review-button-holder {
display: flex;
width: 100%;
align-items: center;
}
.ide-context-header {
.avatar-container {
flex: 0 0 auto;
margin-right: 0;
}
.ide-sidebar-project-title {
margin-left: $ide-tree-text-start - $ide-project-avatar-end;
}
}
.ide-context-body {
min-height: 0; // firefox fix
}
.ide-sidebar-project-title {
min-width: 0;
.sidebar-context-title {
white-space: nowrap;
display: block;
&.text-secondary {
font-weight: normal;
}
}
}
.ide-external-link {
svg {
display: none;
position: absolute;
top: 2px;
right: -$gl-padding;
}
&:hover,
&:focus {
svg {
display: inline-block;
}
}
}
.ide-sidebar {
width: auto;
min-width: 60px;
}
.ide-right-sidebar {
.ide-activity-bar {
border-left: 1px solid $white-dark;
}
.multi-file-commit-panel-inner {
width: 350px;
padding: $grid-size $gl-padding;
background-color: $white;
border-left: 1px solid $white-dark;
}
.ide-right-sidebar-clientside {
padding: 0;
}
}
.ide-pipeline {
@include ide-trace-view();
.empty-state {
p {
margin: $grid-size 0;
text-align: center;
line-height: 24px;
}
.btn,
h4 {
margin: 0;
}
}
.build-trace {
margin-left: -$gl-padding;
}
}
.ide-pipeline-list {
flex: 1;
overflow: auto;
}
.ide-pipeline-header {
min-height: 55px;
padding-left: $gl-padding;
padding-right: $gl-padding;
}
.ide-job-item {
display: flex;
padding: 16px;
&:not(:last-child) {
border-bottom: 1px solid $border-color;
}
.ci-status-icon {
display: flex;
justify-content: center;
min-width: 24px;
overflow: hidden;
}
}
.ide-stage {
.card-header {
display: flex;
cursor: pointer;
.ci-status-icon {
display: flex;
align-items: center;
}
}
}
.ide-stage-collapse-icon {
margin: auto 0 auto auto;
}
.ide-job-header {
min-height: 60px;
}
.ide-nav-form {
.nav-links li {
width: 50%;
padding-left: 0;
padding-right: 0;
a {
text-align: center;
&:not(.active) {
background-color: $gray-light;
}
}
}
.dropdown-input {
padding-left: $gl-padding;
padding-right: $gl-padding;
.input-icon {
right: auto;
left: 10px;
top: 50%;
transform: translateY(-50%);
}
}
.dropdown-input-field {
padding-left: $search-list-icon-width + $gl-padding;
padding-top: 2px;
padding-bottom: 2px;
}
.tokens-container {
padding-left: $search-list-icon-width + $gl-padding;
overflow-x: hidden;
}
.btn-link {
padding-top: $gl-padding;
padding-bottom: $gl-padding;
}
}
.ide-search-list-current-icon {
min-width: $search-list-icon-width;
}
.ide-search-list-empty {
height: 69px;
}
.ide-merge-requests-dropdown-content {
max-height: 470px;
}
.ide-merge-request-project-path {
font-size: 12px;
line-height: 16px;
color: $gl-text-color-secondary;
}
.ide-merge-request-info {
.detail-page-header {
line-height: initial;
min-height: 38px;
}
.issuable-details {
overflow: auto;
}
}
.ide-entry-dropdown-toggle {
padding: $gl-padding-4;
color: $gl-text-color;
background-color: $gray-100;
&:hover {
background-color: $gray-200;
}
&:active,
&:focus {
color: $white-normal;
background-color: $blue-500;
outline: 0;
}
}
.ide-new-btn {
display: none;
.btn {
padding: 2px 5px;
}
.dropdown.show .ide-entry-dropdown-toggle {
color: $white-normal;
background-color: $blue-500;
}
}
.ide-preview-header {
padding: 0 $grid-size;
border-bottom: 1px solid $white-dark;
background-color: $gray-light;
min-height: 44px;
}
.ide-navigator-btn {
height: 24px;
min-width: 24px;
max-width: 24px;
padding: 0;
margin: 0 ($grid-size / 2);
color: $gl-gray-light;
&:first-child {
margin-left: 0;
}
}
.ide-navigator-location {
padding-top: ($grid-size / 2);
padding-bottom: ($grid-size / 2);
&:focus {
outline: 0;
box-shadow: none;
border-color: $gray-200;
}
}
.ide-preview-loading-icon {
right: $grid-size;
top: 50%;
transform: translateY(-50%);
}
.ide-file-templates {
padding: $grid-size $gl-padding;
background-color: $gray-light;
border-bottom: 1px solid $white-dark;
.dropdown {
min-width: 180px;
}
.dropdown-content {
max-height: 222px;
}
}
.ide-commit-editor-header {
height: 65px;
padding: 8px 16px;
background-color: $gray-50;
box-shadow: inset 0 -1px $white-dark;
}
.ide-commit-list-changed-icon {
width: $ide-commit-row-height;
height: $ide-commit-row-height;
}
.ide-file-icon-holder {
display: flex;
align-items: center;
color: $gray-700;
}
.file-row:hover,
.file-row:focus {
.ide-new-btn {
display: block;
}
.folder-icon {
fill: $gl-text-color-secondary;
}
}