diff options
Diffstat (limited to 'app/assets/stylesheets/startup/startup-general.scss')
-rw-r--r-- | app/assets/stylesheets/startup/startup-general.scss | 1592 |
1 files changed, 936 insertions, 656 deletions
diff --git a/app/assets/stylesheets/startup/startup-general.scss b/app/assets/stylesheets/startup/startup-general.scss index 44da509481d..a05e27b6af0 100644 --- a/app/assets/stylesheets/startup/startup-general.scss +++ b/app/assets/stylesheets/startup/startup-general.scss @@ -1,3 +1,6 @@ +// DO NOT EDIT! This is auto-generated from "yarn run generate:startup_css" +// Please see the feedback issue for more details and help: +// https://gitlab.com/gitlab-org/gitlab/-/issues/331812 @charset "UTF-8"; *, *::before, @@ -8,12 +11,15 @@ html { font-family: sans-serif; line-height: 1.15; } - header, nav, section { +aside, +header { display: block; } body { margin: 0; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif, + "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 1rem; font-weight: 400; line-height: 1.5; @@ -21,55 +27,29 @@ body { text-align: left; background-color: #fff; } -h1, h2, h3 { +h1 { margin-top: 0; margin-bottom: 0.25rem; } -p { - margin-top: 0; - margin-bottom: 1rem; -} - ul { margin-top: 0; margin-bottom: 1rem; } - ul ul { margin-bottom: 0; } - strong { font-weight: bolder; } -sub { - position: relative; - font-size: 75%; - line-height: 0; - vertical-align: baseline; -} -sub { - bottom: -.25em; -} a { color: #007bff; text-decoration: none; background-color: transparent; } -a:not([href]) { +a:not([href]):not([class]) { color: inherit; text-decoration: none; } -pre, -code { - font-family: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace; - font-size: 1em; -} -pre { - margin-top: 0; - margin-bottom: 1rem; - overflow: auto; -} img { vertical-align: middle; border-style: none; @@ -78,18 +58,11 @@ svg { overflow: hidden; vertical-align: middle; } -table { - border-collapse: collapse; -} -th { - text-align: inherit; -} button { border-radius: 0; } input, -button, -textarea { +button { margin: 0; font-family: inherit; font-size: inherit; @@ -102,103 +75,34 @@ input { button { text-transform: none; } +[role="button"] { + cursor: pointer; +} button:not(:disabled), -[type="button"]:not(:disabled), -[type="reset"]:not(:disabled) { +[type="button"]:not(:disabled) { cursor: pointer; } button::-moz-focus-inner, -[type="button"]::-moz-focus-inner, -[type="reset"]::-moz-focus-inner { +[type="button"]::-moz-focus-inner { padding: 0; border-style: none; } -textarea { - overflow: auto; - resize: vertical; -} [type="search"] { outline-offset: -2px; } -summary { - display: list-item; - cursor: pointer; -} -template { - display: none; -} -[hidden] { - display: none !important; -} -h1, h2, h3, -.h1, .h2, .h3 { +h1 { margin-bottom: 0.25rem; font-weight: 600; line-height: 1.2; color: #303030; } -h1, .h1 { +h1 { font-size: 2.1875rem; } -h2, .h2 { - font-size: 1.75rem; -} -h3, .h3 { - font-size: 1.53125rem; -} .list-unstyled { padding-left: 0; list-style: none; } -code { - font-size: 90%; - color: #1f1f1f; - word-wrap: break-word; -} -a > code { - color: inherit; -} -pre { - display: block; - font-size: 90%; - color: #303030; -} -pre code { - font-size: inherit; - color: inherit; - word-break: normal; -} -.container { - width: 100%; - padding-right: 15px; - padding-left: 15px; - margin-right: auto; - margin-left: auto; -} - -@media (min-width: 576px) { - .container { - max-width: 540px; - } -} - -@media (min-width: 768px) { - .container { - max-width: 720px; - } -} - -@media (min-width: 992px) { - .container { - max-width: 960px; - } -} - -@media (min-width: 1200px) { - .container { - max-width: 1140px; - } -} .container-fluid { width: 100%; padding-right: 15px; @@ -206,48 +110,7 @@ pre code { margin-right: auto; margin-left: auto; } - -@media (min-width: 576px) { - .container { - max-width: 540px; - } -} - -@media (min-width: 768px) { - .container { - max-width: 720px; - } -} - -@media (min-width: 992px) { - .container { - max-width: 960px; - } -} - -@media (min-width: 1200px) { - .container { - max-width: 1140px; - } -} -.row { - display: flex; - flex-wrap: wrap; - margin-right: -15px; - margin-left: -15px; -} -.table { - width: 100%; - margin-bottom: 0.5rem; - color: #303030; -} -.table th, -.table td { - padding: 0.75rem; - vertical-align: top; - border-top: 1px solid #dbdbdb; -} - .search form { +.form-control { display: block; width: 100%; height: 34px; @@ -261,18 +124,21 @@ pre code { border: 1px solid #dbdbdb; border-radius: 0.25rem; } - @media (prefers-reduced-motion: reduce) { } - .search form:-moz-focusring { +.form-control:-moz-focusring { color: transparent; text-shadow: 0 0 0 #303030; } - .search form::placeholder { +.form-control::-ms-input-placeholder { color: #5e5e5e; opacity: 1; } - .search form:disabled { +.form-control::placeholder { + color: #5e5e5e; + opacity: 1; +} +.form-control:disabled { background-color: #fafafa; opacity: 1; } @@ -281,9 +147,8 @@ pre code { flex-flow: row wrap; align-items: center; } - @media (min-width: 576px) { - .form-inline .search form, .search .form-inline form { + .form-inline .form-control { display: inline-block; width: auto; vertical-align: middle; @@ -295,7 +160,7 @@ pre code { color: #303030; text-align: center; vertical-align: middle; - cursor: pointer; + -moz-user-select: none; user-select: none; background-color: transparent; border: 1px solid transparent; @@ -304,26 +169,24 @@ pre code { line-height: 20px; border-radius: 0.25rem; } - @media (prefers-reduced-motion: reduce) { } -.btn.disabled, .btn:disabled { +.btn:disabled { opacity: 0.65; } -a.btn.disabled { - pointer-events: none; +.btn:not(:disabled):not(.disabled) { + cursor: pointer; } .collapse:not(.show) { display: none; } - .dropdown { position: relative; } - .dropdown-menu-toggle { +.dropdown-menu-toggle { white-space: nowrap; } - .dropdown-menu-toggle::after { +.dropdown-menu-toggle::after { display: inline-block; margin-left: 0.255em; vertical-align: 0.255em; @@ -333,7 +196,7 @@ a.btn.disabled { border-bottom: 0; border-left: 0.3em solid transparent; } - .dropdown-menu-toggle:empty::after { +.dropdown-menu-toggle:empty::after { margin-left: 0; } .dropdown-menu { @@ -355,19 +218,6 @@ a.btn.disabled { border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 0.25rem; } -.dropdown-menu-right { - right: 0; - left: auto; -} - .divider { - height: 0; - margin: 4px 0; - overflow: hidden; - border-top: 1px solid #dbdbdb; -} -.dropdown-menu.show { - display: block; -} .nav { display: flex; flex-wrap: wrap; @@ -383,7 +233,6 @@ a.btn.disabled { justify-content: space-between; padding: 0.25rem 0.5rem; } -.navbar .container, .navbar .container-fluid { display: flex; flex-wrap: wrap; @@ -414,15 +263,12 @@ a.btn.disabled { border: 1px solid transparent; border-radius: 0.25rem; } - @media (max-width: 575.98px) { - .navbar-expand-sm > .container, .navbar-expand-sm > .container-fluid { padding-right: 0; padding-left: 0; } } - @media (min-width: 576px) { .navbar-expand-sm { flex-flow: row nowrap; @@ -434,7 +280,6 @@ a.btn.disabled { .navbar-expand-sm .navbar-nav .dropdown-menu { position: absolute; } - .navbar-expand-sm > .container, .navbar-expand-sm > .container-fluid { flex-wrap: nowrap; } @@ -446,17 +291,6 @@ a.btn.disabled { display: none; } } -.card { - position: relative; - display: flex; - flex-direction: column; - min-width: 0; - word-wrap: break-word; - background-color: #fff; - background-clip: border-box; - border: 1px solid #dbdbdb; - border-radius: 0.25rem; -} .badge { display: inline-block; padding: 0.25em 0.4em; @@ -468,7 +302,6 @@ a.btn.disabled { vertical-align: baseline; border-radius: 0.25rem; } - @media (prefers-reduced-motion: reduce) { } .badge:empty { @@ -483,66 +316,8 @@ a.btn.disabled { padding-left: 0.6em; border-radius: 10rem; } -.media { - display: flex; - align-items: flex-start; -} -.close { - float: right; - font-size: 1.5rem; - font-weight: 600; - line-height: 1; - color: #000; - text-shadow: 0 1px 0 #fff; - opacity: .5; -} -button.close { - padding: 0; - background-color: transparent; - border: 0; - appearance: none; -} -a.close.disabled { - pointer-events: none; -} -.modal-dialog { - position: relative; - width: auto; - margin: 0.5rem; - pointer-events: none; -} - -@media (min-width: 576px) { - .modal-dialog { - max-width: 500px; - margin: 1.75rem auto; - } -} -.bg-transparent { - background-color: transparent !important; -} -.border { - border: 1px solid #dbdbdb !important; -} -.border-top { - border-top: 1px solid #dbdbdb !important; -} -.border-right { - border-right: 1px solid #dbdbdb !important; -} -.border-bottom { - border-bottom: 1px solid #dbdbdb !important; -} -.border-left { - border-left: 1px solid #dbdbdb !important; -} -.rounded { - border-radius: 0.25rem !important; -} -.clearfix::after { - display: block; - clear: both; - content: ""; +.rounded-circle { + border-radius: 50% !important; } .d-none { display: none !important; @@ -553,19 +328,19 @@ a.close.disabled { .d-block { display: block !important; } - @media (min-width: 576px) { .d-sm-none { display: none !important; } + .d-sm-inline-block { + display: inline-block !important; + } } - @media (min-width: 768px) { .d-md-block { display: block !important; } } - @media (min-width: 992px) { .d-lg-none { display: none !important; @@ -574,18 +349,11 @@ a.close.disabled { display: block !important; } } - @media (min-width: 1200px) { .d-xl-block { display: block !important; } } -.flex-wrap { - flex-wrap: wrap !important; -} -.float-right { - float: right !important; -} .sr-only { position: absolute; width: 1px; @@ -600,73 +368,58 @@ a.close.disabled { .m-auto { margin: auto !important; } -.text-nowrap { - white-space: nowrap !important; +.gl-button { + display: inline-flex; } -.visible { - visibility: visible !important; +.gl-button:not(.btn-link):active { + text-decoration: none; } - .search form.focus { +.gl-button.gl-button { + border-width: 0; + padding-top: 0.5rem; + padding-bottom: 0.5rem; + padding-left: 0.75rem; + padding-right: 0.75rem; + background-color: transparent; + line-height: 1rem; color: #303030; + fill: currentColor; + box-shadow: inset 0 0 0 1px #bfbfbf; + justify-content: center; + align-items: center; + font-size: 0.875rem; + border-radius: 0.25rem; +} +.gl-button.gl-button.btn-default { background-color: #fff; - border-color: #80bdff; - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); } -.gl-badge { - display: inline-flex; - align-items: center; - font-size: 0.75rem; - font-weight: 400; - line-height: 1rem; - padding-top: 0.25rem; - padding-bottom: 0.25rem; - padding-left: 0.5rem; - padding-right: 0.5rem; +.gl-button.gl-button.btn-default:active, +.gl-button.gl-button.btn-default.active { + box-shadow: inset 0 0 0 2px #5e5e5e, 0 0 0 1px rgba(255, 255, 255, 0.4), + 0 0 0 4px rgba(31, 117, 203, 0.48); outline: none; + background-color: #dbdbdb; } -body, .search form, +body, +.form-control, .search form { font-size: 0.875rem; } button, -html [type='button'], -[type='reset'], -[role='button'] { +html [type="button"], +[role="button"] { cursor: pointer; } -h1, -.h1, -h2, -.h2, -h3, -.h3 { +h1 { margin-top: 20px; margin-bottom: 10px; } -input[type='file'] { - line-height: 1; -} - strong { font-weight: bold; } a { color: #1068bf; } -code { - padding: 2px 4px; - color: #1f1f1f; - background-color: #f0f0f0; - border-radius: 4px; -} -.code > code { - background-color: inherit; - padding: unset; -} -table { - border-spacing: 0; -} .hidden { display: none !important; visibility: hidden !important; @@ -674,7 +427,7 @@ table { .hide { display: none; } - .dropdown-menu-toggle::after { +.dropdown-menu-toggle::after { display: none; } .badge:not(.gl-badge) { @@ -684,8 +437,11 @@ table { font-weight: 400; display: inline-block; } -pre code { - white-space: pre-wrap; +.divider { + height: 0; + margin: 4px 0; + overflow: hidden; + border-top: 1px solid #dbdbdb; } .toggle-sidebar-button .collapse-text, .toggle-sidebar-button .icon-chevron-double-lg-left, @@ -701,29 +457,6 @@ html { body { text-decoration-skip: ink; } -.content-wrapper { - margin-top: 40px; - padding-bottom: 100px; -} -.container { - padding-top: 0; - z-index: 5; -} -.container .content { - margin: 0; -} - -@media (max-width: 575.98px) { - .container .content { - margin-top: 20px; - } -} - -@media (max-width: 575.98px) { - .container .container .title { - padding-left: 15px !important; - } -} .btn { border-radius: 4px; font-size: 0.875rem; @@ -735,7 +468,12 @@ body { color: #303030; white-space: nowrap; } -.btn:active, .btn.active { +.btn:active { + background-color: #f0f0f0; + box-shadow: none; +} +.btn:active, +.btn.active { background-color: #eaeaea; border-color: #e3e3e3; color: #303030; @@ -744,8 +482,7 @@ body { height: 15px; width: 15px; } -.btn svg:not(:last-child), -.btn .fa:not(:last-child) { +.btn svg:not(:last-child) { margin-right: 5px; } .badge.badge-pill:not(.gl-badge) { @@ -754,78 +491,16 @@ body { color: #525252; vertical-align: baseline; } -.hint { - font-style: italic; - color: #bfbfbf; -} -.bold { - font-weight: 600; -} -pre.wrap { - word-break: break-word; - white-space: pre-wrap; -} -table a code { - position: relative; - top: -2px; - margin-right: 3px; -} -.loading { - margin: 20px auto; - height: 40px; - color: #525252; - font-size: 32px; - text-align: center; -} -.highlight { - text-shadow: none; -} -.chart { - overflow: hidden; - height: 220px; -} -.break-word { - word-wrap: break-word; -} -.center { - text-align: center; -} -.block { - display: block; -} -.flex { - display: flex; -} -.flex-grow { - flex-grow: 1; +.gl-font-sm { + font-size: 12px; } .dropdown { position: relative; } -.show.dropdown .dropdown-menu { - transform: translateY(0); - display: block; - min-height: 40px; - max-height: 312px; - overflow-y: auto; -} - -@media (max-width: 575.98px) { - .show.dropdown .dropdown-menu { - width: 100%; - } -} - .show.dropdown .dropdown-menu-toggle, -.show.dropdown .dropdown-menu-toggle { - border-color: #c4c4c4; -} -.show.dropdown [data-toggle='dropdown'] { - outline: 0; -} .search-input-container .dropdown-menu { margin-top: 11px; } - .dropdown-menu-toggle { +.dropdown-menu-toggle { padding: 6px 8px 6px 10px; background-color: #fff; color: #303030; @@ -835,21 +510,16 @@ table a code { border-radius: 0.25rem; white-space: nowrap; } - .no-outline.dropdown-menu-toggle { +.no-outline.dropdown-menu-toggle { outline: 0; } - .dropdown-menu-toggle .fa { - color: #c4c4c4; -} -.dropdown-menu-toggle { +.dropdown-menu-toggle.dropdown-menu-toggle { + justify-content: flex-start; + overflow: hidden; padding-right: 25px; position: relative; - width: 160px; text-overflow: ellipsis; - overflow: hidden; -} -.dropdown-menu-toggle .fa { - position: absolute; + width: 160px; } .dropdown-menu { display: none; @@ -896,6 +566,13 @@ table a code { text-align: left; width: 100%; } +.dropdown-menu li > a:active, +.dropdown-menu li button:active { + background-color: #eee; + color: #303030; + outline: 0; + text-decoration: none; +} .dropdown-menu .divider { height: 1px; margin: 0.25rem 0; @@ -905,66 +582,39 @@ table a code { .dropdown-menu .badge.badge-pill + span:not(.badge):not(.badge-pill) { margin-right: 40px; } -.dropdown-select { - width: 300px; -} - -@media (max-width: 767.98px) { - .dropdown-select { - width: 100%; - } -} -.dropdown-content { - max-height: 252px; - overflow-y: auto; -} -.dropdown-loading { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - display: none; - z-index: 9; - background-color: rgba(255, 255, 255, 0.6); - font-size: 28px; -} -.dropdown-loading .fa { - position: absolute; - top: 50%; - left: 50%; - margin-top: -14px; - margin-left: -14px; -} - @media (max-width: 575.98px) { .navbar-gitlab li.dropdown { position: static; } + .navbar-gitlab li.dropdown.user-counter { + margin-left: 8px !important; + } + .navbar-gitlab li.dropdown.user-counter > a { + padding: 0 4px !important; + } header.navbar-gitlab .dropdown .dropdown-menu { width: 100%; min-width: 100%; } } - @media (max-width: 767.98px) { .dropdown-menu-toggle { width: 100%; } } -textarea { - resize: vertical; -} input { border-radius: 0.25rem; color: #303030; background-color: #fff; } - .search form { +.form-control { border-radius: 4px; padding: 6px 10px; } - .search form::placeholder { +.form-control::-ms-input-placeholder { + color: #868686; +} +.form-control::placeholder { color: #868686; } .navbar-gitlab { @@ -973,7 +623,6 @@ input { margin-bottom: 0; min-height: 40px; border: 0; - border-bottom: 1px solid #dbdbdb; position: fixed; top: 0; left: 0; @@ -1023,9 +672,6 @@ input { .navbar-gitlab .header-content .title img + .logo-text { margin-left: 8px; } -.navbar-gitlab .header-content .title.wrap { - white-space: normal; -} .navbar-gitlab .header-content .title a { display: flex; align-items: center; @@ -1033,9 +679,6 @@ input { margin: 5px 2px 5px -8px; border-radius: 4px; } -.navbar-gitlab .header-content .dropdown.open > a { - border-bottom-color: #fff; -} .navbar-gitlab .header-content .navbar-collapse > ul.nav > li:not(.d-none) { margin: 0 2px; } @@ -1044,7 +687,6 @@ input { border-top: 0; padding: 0; } - @media (max-width: 575.98px) { .navbar-gitlab .navbar-collapse { flex: 1 1 auto; @@ -1053,7 +695,6 @@ input { .navbar-gitlab .navbar-collapse .nav { flex-wrap: nowrap; } - @media (max-width: 575.98px) { .navbar-gitlab .navbar-collapse .nav > li:not(.d-none) a { margin-left: 0; @@ -1076,7 +717,10 @@ input { text-align: center; color: currentColor; } - +.navbar-gitlab .container-fluid .navbar-toggler.active { + color: currentColor; + background-color: transparent; +} @media (max-width: 575.98px) { .navbar-gitlab .container-fluid .navbar-nav { display: flex; @@ -1084,11 +728,14 @@ input { flex-direction: row; } } -.navbar-gitlab .container-fluid .navbar-nav li .badge.badge-pill { +.navbar-gitlab + .container-fluid + .navbar-nav + li + .badge.badge-pill:not(.merge-request-badge) { box-shadow: none; font-weight: 600; } - @media (max-width: 575.98px) { .navbar-gitlab .container-fluid .nav > li.header-user { padding-left: 10px; @@ -1100,7 +747,6 @@ input { padding: 6px 8px; height: 32px; } - @media (max-width: 575.98px) { .navbar-gitlab .container-fluid .nav > li > a { padding: 0; @@ -1109,7 +755,12 @@ input { .navbar-gitlab .container-fluid .nav > li > a.header-user-dropdown-toggle { margin-left: 2px; } -.navbar-gitlab .container-fluid .nav > li > a.header-user-dropdown-toggle .header-user-avatar { +.navbar-gitlab + .container-fluid + .nav + > li + > a.header-user-dropdown-toggle + .header-user-avatar { margin-right: 0; } .navbar-gitlab .container-fluid .nav > li .header-new-dropdown-toggle { @@ -1130,7 +781,9 @@ input { height: 32px; font-weight: 600; } +.navbar-sub-nav > li .top-nav-toggle, .navbar-sub-nav > li > button, +.navbar-nav > li .top-nav-toggle, .navbar-nav > li > button { background: transparent; border: 0; @@ -1168,31 +821,25 @@ input { font-weight: 400; margin-left: -6px; font-size: 11px; - color: #fff; + color: var(--gray-950, #fff); padding: 0 5px; line-height: 12px; border-radius: 7px; box-shadow: 0 1px 0 rgba(76, 78, 84, 0.2); } -.title-container .badge.badge-pill.green-badge, -.navbar-nav .badge.badge-pill.green-badge { - background-color: #108548; +.title-container .badge.badge-pill:not(.merge-request-badge).green-badge, +.navbar-nav .badge.badge-pill:not(.merge-request-badge).green-badge { + background-color: var(--green-400, #2da160); } -.title-container .badge.badge-pill.merge-requests-count, -.navbar-nav .badge.badge-pill.merge-requests-count { - background-color: #de7e00; +.title-container + .badge.badge-pill:not(.merge-request-badge).merge-requests-count, +.navbar-nav .badge.badge-pill:not(.merge-request-badge).merge-requests-count { + background-color: var(--orange-400, #c17d10); } -.title-container .badge.badge-pill.todos-count, -.navbar-nav .badge.badge-pill.todos-count { - background-color: #1f75cb; +.title-container .badge.badge-pill:not(.merge-request-badge).todos-count, +.navbar-nav .badge.badge-pill:not(.merge-request-badge).todos-count { + background-color: var(--blue-400, #428fdc); } -.title-container .canary-badge .badge, -.navbar-nav .canary-badge .badge { - font-size: 12px; - line-height: 16px; - padding: 0 0.5rem; -} - @media (max-width: 575.98px) { .navbar-gitlab .container-fluid { font-size: 18px; @@ -1217,45 +864,35 @@ input { float: none; } } -.header-user.show .dropdown-menu { - margin-top: 4px; - color: #303030; - left: auto; - max-height: 445px; -} -.header-user.show .dropdown-menu svg { - vertical-align: text-top; -} .header-user-avatar { float: left; margin-right: 5px; border-radius: 50%; border: 1px solid #f5f5f5; } -.media { - display: flex; - align-items: flex-start; -} -.card { - margin-bottom: 16px; +.notification-dot { + background-color: #d99530; + height: 12px; + width: 12px; + margin-top: -15px; + pointer-events: none; + visibility: hidden; } -.content-wrapper { - width: 100%; +.top-nav-toggle .dropdown-icon { + margin-right: 0.5rem; } -.content-wrapper .container-fluid { - padding: 0 16px; +.tanuki-logo .tanuki-left-ear, +.tanuki-logo .tanuki-right-ear, +.tanuki-logo .tanuki-nose { + fill: #e24329; } - -@media (min-width: 768px) { - .page-with-contextual-sidebar { - padding-left: 50px; - } +.tanuki-logo .tanuki-left-eye, +.tanuki-logo .tanuki-right-eye { + fill: #fc6d26; } - -@media (min-width: 1200px) { - .page-with-contextual-sidebar { - padding-left: 220px; - } +.tanuki-logo .tanuki-left-cheek, +.tanuki-logo .tanuki-right-cheek { + fill: #fca326; } .context-header { position: relative; @@ -1282,9 +919,20 @@ input { overflow: hidden; text-overflow: ellipsis; } -.context-header .sidebar-context-title.text-secondary { - font-weight: normal; - font-size: 0.8em; +@media (min-width: 768px) { + .page-with-contextual-sidebar { + padding-left: 48px; + } +} +@media (min-width: 1200px) { + .page-with-contextual-sidebar { + padding-left: 220px; + } +} +@media (min-width: 768px) { + .page-with-icon-sidebar { + padding-left: 48px; + } } .nav-sidebar { position: fixed; @@ -1297,20 +945,18 @@ input { box-shadow: inset -1px 0 0 #dbdbdb; transform: translate3d(0, 0, 0); } - @media (min-width: 576px) and (max-width: 576px) { .nav-sidebar:not(.sidebar-collapsed-desktop) { box-shadow: inset -1px 0 0 #dbdbdb, 2px 1px 3px rgba(0, 0, 0, 0.1); } } .nav-sidebar.sidebar-collapsed-desktop { - width: 50px; + width: 48px; } .nav-sidebar.sidebar-collapsed-desktop .nav-sidebar-inner-scroll { overflow-x: hidden; } .nav-sidebar.sidebar-collapsed-desktop .badge.badge-pill:not(.fly-out-badge), -.nav-sidebar.sidebar-collapsed-desktop .sidebar-context-title, .nav-sidebar.sidebar-collapsed-desktop .nav-item-name { border: 0; clip: rect(0, 0, 0, 0); @@ -1331,9 +977,6 @@ input { .nav-sidebar.sidebar-collapsed-desktop .avatar-container { margin: 0 auto; } -.nav-sidebar.sidebar-expanded-mobile { - left: 0; -} .nav-sidebar a { text-decoration: none; } @@ -1356,7 +999,6 @@ input { .nav-sidebar li.active > a { font-weight: 600; } - @media (max-width: 767.98px) { .nav-sidebar { left: -220px; @@ -1373,16 +1015,15 @@ input { height: 16px; width: 16px; } - @media (min-width: 768px) and (max-width: 1199px) { .nav-sidebar:not(.sidebar-expanded-mobile) { - width: 50px; + width: 48px; } .nav-sidebar:not(.sidebar-expanded-mobile) .nav-sidebar-inner-scroll { overflow-x: hidden; } - .nav-sidebar:not(.sidebar-expanded-mobile) .badge.badge-pill:not(.fly-out-badge), - .nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-context-title, + .nav-sidebar:not(.sidebar-expanded-mobile) + .badge.badge-pill:not(.fly-out-badge), .nav-sidebar:not(.sidebar-expanded-mobile) .nav-item-name { border: 0; clip: rect(0, 0, 0, 0); @@ -1405,12 +1046,26 @@ input { } .nav-sidebar:not(.sidebar-expanded-mobile) .context-header { height: 60px; - width: 50px; + width: 48px; } .nav-sidebar:not(.sidebar-expanded-mobile) .context-header a { padding: 10px 4px; } - .nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-top-level-items > li .sidebar-sub-level-items:not(.flyout-list) { + .nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-context-title { + border: 0; + clip: rect(0, 0, 0, 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + white-space: nowrap; + width: 1px; + } + .nav-sidebar:not(.sidebar-expanded-mobile) + .sidebar-top-level-items + > li + .sidebar-sub-level-items:not(.flyout-list) { display: none; } .nav-sidebar:not(.sidebar-expanded-mobile) .nav-icon-container { @@ -1418,13 +1073,19 @@ input { } .nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button { padding: 16px; - width: 49px; + width: 47px; } - .nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button .collapse-text, - .nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button .icon-chevron-double-lg-left { + .nav-sidebar:not(.sidebar-expanded-mobile) + .toggle-sidebar-button + .collapse-text, + .nav-sidebar:not(.sidebar-expanded-mobile) + .toggle-sidebar-button + .icon-chevron-double-lg-left { display: none; } - .nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button .icon-chevron-double-lg-right { + .nav-sidebar:not(.sidebar-expanded-mobile) + .toggle-sidebar-button + .icon-chevron-double-lg-right { display: block; margin: 0; } @@ -1441,10 +1102,12 @@ input { .sidebar-sub-level-items > li a { padding: 8px 16px 8px 40px; } +.sidebar-sub-level-items > li.active a { + background: rgba(0, 0, 0, 0.04); +} .sidebar-top-level-items { margin-bottom: 60px; } - @media (min-width: 576px) { .sidebar-top-level-items > li > a { margin-right: 1px; @@ -1464,23 +1127,28 @@ input { .sidebar-top-level-items > li.active .badge.badge-pill { font-weight: 600; } -.sidebar-top-level-items > li.active .sidebar-sub-level-items:not(.is-fly-out-only) { +.sidebar-top-level-items + > li.active + .sidebar-sub-level-items:not(.is-fly-out-only) { display: block; } .toggle-sidebar-button, .close-nav-button { - width: 219px; - position: fixed; height: 48px; - bottom: 0; padding: 0 16px; background-color: #fafafa; border: 0; - border-top: 1px solid #dbdbdb; color: #666; display: flex; align-items: center; } +.toggle-sidebar-button, +.close-nav-button { + position: fixed; + bottom: 0; + width: 219px; + border-top: 1px solid #dbdbdb; +} .toggle-sidebar-button svg, .close-nav-button svg { margin-right: 8px; @@ -1495,12 +1163,26 @@ input { } .sidebar-collapsed-desktop .context-header { height: 60px; - width: 50px; + width: 48px; } .sidebar-collapsed-desktop .context-header a { padding: 10px 4px; } -.sidebar-collapsed-desktop .sidebar-top-level-items > li .sidebar-sub-level-items:not(.flyout-list) { +.sidebar-collapsed-desktop .sidebar-context-title { + border: 0; + clip: rect(0, 0, 0, 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + white-space: nowrap; + width: 1px; +} +.sidebar-collapsed-desktop + .sidebar-top-level-items + > li + .sidebar-sub-level-items:not(.flyout-list) { display: none; } .sidebar-collapsed-desktop .nav-icon-container { @@ -1508,13 +1190,15 @@ input { } .sidebar-collapsed-desktop .toggle-sidebar-button { padding: 16px; - width: 49px; + width: 47px; } .sidebar-collapsed-desktop .toggle-sidebar-button .collapse-text, .sidebar-collapsed-desktop .toggle-sidebar-button .icon-chevron-double-lg-left { display: none; } -.sidebar-collapsed-desktop .toggle-sidebar-button .icon-chevron-double-lg-right { +.sidebar-collapsed-desktop + .toggle-sidebar-button + .icon-chevron-double-lg-right { display: block; margin: 0; } @@ -1530,7 +1214,6 @@ input { .close-nav-button { display: none; } - @media (max-width: 767.98px) { .close-nav-button { display: flex; @@ -1539,128 +1222,648 @@ input { display: none; } } -table.table { - margin-bottom: 16px; +body.sidebar-refactoring.ui-indigo + .nav-sidebar + li.active:not(.fly-out-top-item) + > a { + color: #2f2a6b; +} +body.sidebar-refactoring.ui-indigo + .nav-sidebar + li.active + .nav-icon-container + svg { + fill: #2f2a6b; +} +body.sidebar-refactoring .nav-sidebar { + box-shadow: none; +} +body.sidebar-refactoring .nav-sidebar li.active { + background-color: transparent; + box-shadow: none !important; } -table.table .dropdown-menu a { +@media (min-width: 768px) { + body.sidebar-refactoring .page-with-contextual-sidebar { + padding-left: 48px; + } +} +@media (min-width: 1200px) { + body.sidebar-refactoring .page-with-contextual-sidebar { + padding-left: 220px; + } +} +@media (min-width: 768px) { + body.sidebar-refactoring .page-with-icon-sidebar { + padding-left: 48px; + } +} +body.sidebar-refactoring .nav-sidebar { + position: fixed; + bottom: 0; + left: 0; + z-index: 600; + width: 220px; + top: 40px; + background-color: #f0f0f0; + transform: translate3d(0, 0, 0); +} +body.sidebar-refactoring .nav-sidebar.sidebar-collapsed-desktop { + width: 48px; +} +body.sidebar-refactoring + .nav-sidebar.sidebar-collapsed-desktop + .nav-sidebar-inner-scroll { + overflow-x: hidden; +} +body.sidebar-refactoring + .nav-sidebar.sidebar-collapsed-desktop + .badge.badge-pill:not(.fly-out-badge), +body.sidebar-refactoring .nav-sidebar.sidebar-collapsed-desktop .nav-item-name, +body.sidebar-refactoring .nav-sidebar.sidebar-collapsed-desktop .collapse-text { + border: 0; + clip: rect(0, 0, 0, 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + white-space: nowrap; + width: 1px; +} +body.sidebar-refactoring + .nav-sidebar.sidebar-collapsed-desktop + .sidebar-top-level-items + > li + > a { + min-height: unset; +} +body.sidebar-refactoring + .nav-sidebar.sidebar-collapsed-desktop + .fly-out-top-item:not(.divider) { + display: block !important; +} +body.sidebar-refactoring + .nav-sidebar.sidebar-collapsed-desktop + .avatar-container { + margin: 0 auto; +} +body.sidebar-refactoring + .nav-sidebar.sidebar-collapsed-desktop + li.active:not(.fly-out-top-item) + > a { + background-color: rgba(41, 41, 97, 0.08); +} +body.sidebar-refactoring .nav-sidebar a { text-decoration: none; + color: #2f2a6b; } -table.table .success, -table.table .info { - color: #fff; +body.sidebar-refactoring .nav-sidebar li { + white-space: nowrap; +} +body.sidebar-refactoring .nav-sidebar li .nav-item-name { + flex: 1; } -table.table .success a:not(.btn), -table.table .info a:not(.btn) { - text-decoration: underline; +body.sidebar-refactoring .nav-sidebar li > a, +body.sidebar-refactoring .nav-sidebar li > .fly-out-top-item-container { + padding-left: 0.75rem; + padding-right: 0.75rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; + display: flex; + align-items: center; + border-radius: 0.25rem; + width: auto; + line-height: 1rem; + margin: 1px 4px; +} +body.sidebar-refactoring .nav-sidebar li.active > a { + font-weight: 600; +} +body.sidebar-refactoring + .nav-sidebar + li.active:not(.fly-out-top-item) + > a:not(.has-sub-items) { + background-color: rgba(41, 41, 97, 0.08); +} +body.sidebar-refactoring .nav-sidebar ul { + padding-left: 0; + list-style: none; +} +@media (max-width: 767.98px) { + body.sidebar-refactoring .nav-sidebar { + left: -220px; + } +} +body.sidebar-refactoring .nav-sidebar .nav-icon-container { + display: flex; + margin-right: 8px; +} +body.sidebar-refactoring + .nav-sidebar + a:not(.has-sub-items) + + .sidebar-sub-level-items + .fly-out-top-item { + display: none; +} +body.sidebar-refactoring + .nav-sidebar + a:not(.has-sub-items) + + .sidebar-sub-level-items + .fly-out-top-item + a, +body.sidebar-refactoring + .nav-sidebar + a:not(.has-sub-items) + + .sidebar-sub-level-items + .fly-out-top-item.active + a, +body.sidebar-refactoring + .nav-sidebar + a:not(.has-sub-items) + + .sidebar-sub-level-items + .fly-out-top-item + .fly-out-top-item-container { + margin-left: 0; + margin-right: 0; + padding-left: 1rem; + padding-right: 1rem; + cursor: default; + pointer-events: none; + font-size: 0.75rem; + background-color: #2f2a6b; color: #fff; + margin-top: -0.25rem; + margin-bottom: -0.25rem; + margin-top: 0; + position: relative; + background-color: #000; +} +body.sidebar-refactoring + .nav-sidebar + a:not(.has-sub-items) + + .sidebar-sub-level-items + .fly-out-top-item + a + strong, +body.sidebar-refactoring + .nav-sidebar + a:not(.has-sub-items) + + .sidebar-sub-level-items + .fly-out-top-item.active + a + strong, +body.sidebar-refactoring + .nav-sidebar + a:not(.has-sub-items) + + .sidebar-sub-level-items + .fly-out-top-item + .fly-out-top-item-container + strong { + font-weight: 400; } -pre { - font-family: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace; +body.sidebar-refactoring + .nav-sidebar + a:not(.has-sub-items) + + .sidebar-sub-level-items + .fly-out-top-item + a::before, +body.sidebar-refactoring + .nav-sidebar + a:not(.has-sub-items) + + .sidebar-sub-level-items + .fly-out-top-item.active + a::before, +body.sidebar-refactoring + .nav-sidebar + a:not(.has-sub-items) + + .sidebar-sub-level-items + .fly-out-top-item + .fly-out-top-item-container::before { + position: absolute; + content: ""; display: block; - padding: 8px 12px; - margin: 0 0 8px; - font-size: 13px; - word-break: break-all; - word-wrap: break-word; + top: 50%; + left: -0.25rem; + margin-top: -0.5rem; + width: 0; + height: 0; + border-top: 0.5rem solid transparent; + border-bottom: 0.5rem solid transparent; + border-right: 0.5rem solid #000; +} +body.sidebar-refactoring + .nav-sidebar + a.has-sub-items + + .sidebar-sub-level-items + .fly-out-top-item { + display: none; +} +body.sidebar-refactoring + .nav-sidebar + a.has-sub-items + + .sidebar-sub-level-items + .fly-out-top-item + a, +body.sidebar-refactoring + .nav-sidebar + a.has-sub-items + + .sidebar-sub-level-items + .fly-out-top-item.active + a, +body.sidebar-refactoring + .nav-sidebar + a.has-sub-items + + .sidebar-sub-level-items + .fly-out-top-item + .fly-out-top-item-container { + margin-left: 0; + margin-right: 0; + padding-left: 1rem; + padding-right: 1rem; + cursor: default; + pointer-events: none; + font-size: 0.75rem; + background-color: #2f2a6b; + color: #fff; + margin-top: -0.25rem; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} +@media (min-width: 768px) and (max-width: 1199px) { + body.sidebar-refactoring .nav-sidebar:not(.sidebar-expanded-mobile) { + width: 48px; + } + body.sidebar-refactoring + .nav-sidebar:not(.sidebar-expanded-mobile) + .nav-sidebar-inner-scroll { + overflow-x: hidden; + } + body.sidebar-refactoring + .nav-sidebar:not(.sidebar-expanded-mobile) + .badge.badge-pill:not(.fly-out-badge), + body.sidebar-refactoring + .nav-sidebar:not(.sidebar-expanded-mobile) + .nav-item-name, + body.sidebar-refactoring + .nav-sidebar:not(.sidebar-expanded-mobile) + .collapse-text { + border: 0; + clip: rect(0, 0, 0, 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + white-space: nowrap; + width: 1px; + } + body.sidebar-refactoring + .nav-sidebar:not(.sidebar-expanded-mobile) + .sidebar-top-level-items + > li + > a { + min-height: unset; + } + body.sidebar-refactoring + .nav-sidebar:not(.sidebar-expanded-mobile) + .fly-out-top-item:not(.divider) { + display: block !important; + } + body.sidebar-refactoring + .nav-sidebar:not(.sidebar-expanded-mobile) + .avatar-container { + margin: 0 auto; + } + body.sidebar-refactoring + .nav-sidebar:not(.sidebar-expanded-mobile) + li.active:not(.fly-out-top-item) + > a { + background-color: rgba(41, 41, 97, 0.08); + } + body.sidebar-refactoring + .nav-sidebar:not(.sidebar-expanded-mobile) + .context-header { + height: 60px; + width: 48px; + } + body.sidebar-refactoring + .nav-sidebar:not(.sidebar-expanded-mobile) + .context-header + a { + padding: 10px 4px; + } + body.sidebar-refactoring + .nav-sidebar:not(.sidebar-expanded-mobile) + .sidebar-context-title { + border: 0; + clip: rect(0, 0, 0, 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + white-space: nowrap; + width: 1px; + } + body.sidebar-refactoring + .nav-sidebar:not(.sidebar-expanded-mobile) + .context-header { + height: auto; + } + body.sidebar-refactoring + .nav-sidebar:not(.sidebar-expanded-mobile) + .context-header + a { + padding: 0.25rem; + } + body.sidebar-refactoring + .nav-sidebar:not(.sidebar-expanded-mobile) + .sidebar-top-level-items + > li + .sidebar-sub-level-items:not(.flyout-list) { + display: none; + } + body.sidebar-refactoring + .nav-sidebar:not(.sidebar-expanded-mobile) + .nav-icon-container { + margin-right: 0; + } + body.sidebar-refactoring + .nav-sidebar:not(.sidebar-expanded-mobile) + .toggle-sidebar-button { + width: 48px; + } + body.sidebar-refactoring + .nav-sidebar:not(.sidebar-expanded-mobile) + .toggle-sidebar-button + .collapse-text { + display: none; + } + body.sidebar-refactoring + .nav-sidebar:not(.sidebar-expanded-mobile) + .toggle-sidebar-button + .icon-chevron-double-lg-left { + transform: rotate(180deg); + display: block; + margin: 0; + } +} +body.sidebar-refactoring .nav-sidebar-inner-scroll { + height: 100%; + width: 100%; + overflow: auto; +} +body.sidebar-refactoring .nav-sidebar-inner-scroll > div.context-header { + margin-top: 0.25rem; +} +body.sidebar-refactoring .nav-sidebar-inner-scroll > div.context-header a { + padding-left: 0.75rem; + padding-right: 0.75rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; + display: flex; + align-items: center; + border-radius: 0.25rem; + width: auto; + line-height: 1rem; + margin: 1px 4px; + padding: 0.25rem; + margin-bottom: 0.25rem; + margin-top: 0; +} +body.sidebar-refactoring + .nav-sidebar-inner-scroll + > div.context-header + a + .avatar-container { + font-weight: 400; + flex: none; + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); +} +body.sidebar-refactoring + .nav-sidebar-inner-scroll + > div.context-header + a + .avatar-container.rect-avatar { + border-style: none; +} +body.sidebar-refactoring + .nav-sidebar-inner-scroll + > div.context-header + a + .avatar-container.rect-avatar + .avatar.s32 { color: #303030; + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); +} +body.sidebar-refactoring + .nav-sidebar-inner-scroll + > div.context-header + a + .sidebar-context-title { + color: #2f2a6b; +} +body.sidebar-refactoring .sidebar-top-level-items { + margin-top: 0.25rem; + margin-bottom: 60px; +} +body.sidebar-refactoring .sidebar-top-level-items .context-header a { + padding: 0.25rem; + margin-bottom: 0.25rem; + margin-top: 0; +} +body.sidebar-refactoring + .sidebar-top-level-items + .context-header + a + .avatar-container { + font-weight: 400; + flex: none; + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); +} +body.sidebar-refactoring + .sidebar-top-level-items + .context-header + a + .avatar-container.rect-avatar { + border-style: none; +} +body.sidebar-refactoring + .sidebar-top-level-items + .context-header + a + .avatar-container.rect-avatar + .avatar.s32 { + color: #303030; + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); +} +body.sidebar-refactoring + .sidebar-top-level-items + .context-header + a + .sidebar-context-title { + color: #2f2a6b; +} +body.sidebar-refactoring .sidebar-top-level-items > li .badge.badge-pill { + border-radius: 0.5rem; + padding-top: 0.125rem; + padding-bottom: 0.125rem; + padding-left: 0.5rem; + padding-right: 0.5rem; + background-color: #cbe2f9; + color: #0b5cad; +} +body.sidebar-refactoring + .sidebar-top-level-items + > li.active + .sidebar-sub-level-items:not(.is-fly-out-only) { + display: block; +} +body.sidebar-refactoring + .sidebar-top-level-items + > li.active + .badge.badge-pill { + font-weight: 400; + color: #0b5cad; +} +body.sidebar-refactoring .sidebar-sub-level-items { + padding-top: 0; + padding-bottom: 0; + display: none; +} +body.sidebar-refactoring .sidebar-sub-level-items:not(.fly-out-list) li > a { + padding-left: 2.25rem; +} +body.sidebar-refactoring .toggle-sidebar-button, +body.sidebar-refactoring .close-nav-button { + height: 48px; + padding: 0 16px; background-color: #fafafa; - border: 1px solid #dbdbdb; - border-radius: 2px; + border: 0; + color: #666; + display: flex; + align-items: center; + background-color: #f0f0f0; + border-top: 1px solid #dbdbdb; + color: #2f2a6b; + position: fixed; + bottom: 0; + width: 220px; +} +body.sidebar-refactoring .toggle-sidebar-button .collapse-text, +body.sidebar-refactoring .toggle-sidebar-button .icon-chevron-double-lg-left, +body.sidebar-refactoring .toggle-sidebar-button .icon-chevron-double-lg-right, +body.sidebar-refactoring .close-nav-button .collapse-text, +body.sidebar-refactoring .close-nav-button .icon-chevron-double-lg-left, +body.sidebar-refactoring .close-nav-button .icon-chevron-double-lg-right { + color: inherit; } -.monospace { - font-family: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace; +body.sidebar-refactoring .collapse-text { + white-space: nowrap; + overflow: hidden; +} +body.sidebar-refactoring .sidebar-collapsed-desktop .context-header { + height: 60px; + width: 48px; +} +body.sidebar-refactoring .sidebar-collapsed-desktop .context-header a { + padding: 10px 4px; +} +body.sidebar-refactoring .sidebar-collapsed-desktop .sidebar-context-title { + border: 0; + clip: rect(0, 0, 0, 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + white-space: nowrap; + width: 1px; +} +body.sidebar-refactoring .sidebar-collapsed-desktop .context-header { + height: auto; +} +body.sidebar-refactoring .sidebar-collapsed-desktop .context-header a { + padding: 0.25rem; +} +body.sidebar-refactoring + .sidebar-collapsed-desktop + .sidebar-top-level-items + > li + .sidebar-sub-level-items:not(.flyout-list) { + display: none; } -input::-moz-placeholder, -textarea::-moz-placeholder { +body.sidebar-refactoring .sidebar-collapsed-desktop .nav-icon-container { + margin-right: 0; +} +body.sidebar-refactoring .sidebar-collapsed-desktop .toggle-sidebar-button { + width: 48px; +} +body.sidebar-refactoring + .sidebar-collapsed-desktop + .toggle-sidebar-button + .collapse-text { + display: none; +} +body.sidebar-refactoring + .sidebar-collapsed-desktop + .toggle-sidebar-button + .icon-chevron-double-lg-left { + transform: rotate(180deg); + display: block; + margin: 0; +} +body.sidebar-refactoring .close-nav-button { + display: none; +} +@media (max-width: 767.98px) { + body.sidebar-refactoring .close-nav-button { + display: flex; + } + body.sidebar-refactoring .toggle-sidebar-button { + display: none; + } +} +input::-moz-placeholder { color: #868686; opacity: 1; } -input::-ms-input-placeholder, -textarea::-ms-input-placeholder { +input::-ms-input-placeholder { color: #868686; } -input:-ms-input-placeholder, -textarea:-ms-input-placeholder { +input:-ms-input-placeholder { color: #868686; } svg { fill: currentColor; } - svg.s12 { width: 12px; height: 12px; } - svg.s16 { width: 16px; height: 16px; } - svg.s18 { width: 18px; height: 18px; } - +svg.s32 { + width: 32px; + height: 32px; +} svg.s12 { vertical-align: -1px; } - svg.s16 { vertical-align: -3px; } -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - border: 0; -} -table.code { - width: 100%; - font-family: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace; - border: 0; - border-collapse: separate; - margin: 0; - padding: 0; - table-layout: fixed; - border-radius: 0 0 4px 4px; -} -.frame .badge.badge-pill { - position: absolute; - background-color: #428fdc; - color: #fff; - border: #fff 1px solid; - min-height: 16px; - padding: 5px 8px; - border-radius: 12px; -} -.frame .badge.badge-pill { - transform: translate(-50%, -50%); -} -.color-label { - padding: 0 0.5rem; - line-height: 16px; - border-radius: 100px; - color: #fff; -} -.label-link { - display: inline-flex; - vertical-align: text-bottom; -} -.milestones { - padding: 8px; - margin-top: 8px; - border-radius: 4px; - background-color: #dbdbdb; -} .search { margin: 0 8px; } .search form { + display: block; margin: 0; padding: 4px; width: 200px; @@ -1669,7 +1872,6 @@ table.code { border: 0; border-radius: 4px; } - @media (min-width: 1200px) { .search form { width: 320px; @@ -1713,43 +1915,43 @@ table.code { max-height: 400px; overflow: auto; } - @media (min-width: 1200px) { .search .search-input-wrap .dropdown-menu { width: 320px; } } -.search .search-input-wrap .dropdown-content { - max-height: 382px; +.search .identicon { + flex-basis: 16px; + flex-shrink: 0; + margin-right: 4px; } -.settings { - border-top: 1px solid #dbdbdb; -} -.settings:first-of-type { - margin-top: 10px; - border: 0; -} -.settings + div .settings:first-of-type { - margin-top: 0; - border-top: 1px solid #dbdbdb; -} -.avatar, .avatar-container { +.avatar, +.avatar-container { float: left; margin-right: 16px; border-radius: 50%; border: 1px solid #f5f5f5; } -.s16.avatar, .s16.avatar-container { +.avatar.s16, +.avatar-container.s16 { width: 16px; height: 16px; margin-right: 8px; } -.s18.avatar, .s18.avatar-container { +.avatar.s18, +.avatar-container.s18 { width: 18px; height: 18px; margin-right: 8px; } -.s40.avatar, .s40.avatar-container { +.avatar.s32, +.avatar-container.s32 { + width: 32px; + height: 32px; + margin-right: 8px; +} +.avatar.s40, +.avatar-container.s40 { width: 40px; height: 40px; margin-right: 8px; @@ -1763,15 +1965,49 @@ table.code { overflow: hidden; border-color: rgba(0, 0, 0, 0.1); } -.avatar.center { - font-size: 14px; - line-height: 1.8em; - text-align: center; -} .avatar.avatar-tile { border-radius: 0; border: 0; } +.identicon { + text-align: center; + vertical-align: top; + color: #525252; + background-color: #eee; +} +.identicon.s16 { + font-size: 10px; + line-height: 16px; +} +.identicon.s32 { + font-size: 14px; + line-height: 32px; +} +.identicon.s40 { + font-size: 16px; + line-height: 38px; +} +.identicon.bg1 { + background-color: #ffebee; +} +.identicon.bg2 { + background-color: #f3e5f5; +} +.identicon.bg3 { + background-color: #e8eaf6; +} +.identicon.bg4 { + background-color: #e3f2fd; +} +.identicon.bg5 { + background-color: #e0f2f1; +} +.identicon.bg6 { + background-color: #fbe9e7; +} +.identicon.bg7 { + background-color: #eee; +} .avatar-container { overflow: hidden; display: flex; @@ -1803,9 +2039,25 @@ table.code { .rect-avatar.s18 { border-radius: 2px; } +.rect-avatar.s32, +body.sidebar-refactoring + .nav-sidebar-inner-scroll + > div.context-header + a + .avatar-container.rect-avatar + .avatar.s32, +body.sidebar-refactoring + .sidebar-top-level-items + .context-header + a + .avatar-container.rect-avatar + .avatar.s32 { + border-radius: 4px; +} .rect-avatar.s40 { border-radius: 4px; } + .tab-width-8 { -moz-tab-size: 8; tab-size: 8; @@ -1821,12 +2073,40 @@ table.code { white-space: nowrap; width: 1px; } +.gl-border-none\! { + border-style: none !important; +} +.gl-display-none { + display: none; +} +@media (min-width: 36rem) { + .gl-sm-display-block { + display: block; + } +} +.gl-absolute { + position: absolute; +} +.gl-px-3 { + padding-left: 0.5rem; + padding-right: 0.5rem; +} +.gl-pr-2 { + padding-right: 0.25rem; +} .gl-ml-3 { margin-left: 0.5rem; } -.content-wrapper > .alert-wrapper, -#content-body, .modal-dialog { - display: block; +.gl-mx-0\! { + margin-left: 0 !important; + margin-right: 0 !important; } -@import 'cloaking'; +.gl-font-sm { + font-size: 0.75rem; +} +.gl-font-weight-bold { + font-weight: 600; +} + +@import "startup/cloaking"; @include cloak-startup-scss(none); |