3d273c3c38
* master: (51 commits) Fix spec/features/admin/admin_active_tab_spec.rb Fix eslint errors Don't open Asciidoc module twice Add `gitlab_rails['auto_migrate'] = false` to HA docs for Redis/PG [ci skip] Unify margin widths Add $CI_ENVIRONMENT_NAME and $CI_ENVIRONMENT_SLUG Add Okta authentication documentation Create environments when the build referencing them is created Add an environment slug Make the index on environment name and project id unique, fixing up any duplicates Rename `issue create` slash command to `issue new` Add changelog for !7850. Update Mattermost slash commands docs to explain how to create a newline and use <kbd> for user input. See HTML5 spec: https://www.w3.org/TR/html5/text-level-semantics.html#the-kbd-element Improve `issue create …` slash command with user input keys to create a newline in chat clients. Add explicit status test, feedback: Don't call anything on a block, use simple if Use described_class and update description Also use latest_status, feedback: Fixed bug with +1 not autocompleting added changelog entry ...
630 lines
10 KiB
SCSS
630 lines
10 KiB
SCSS
.dropdown {
|
|
position: relative;
|
|
|
|
.btn-link {
|
|
&:hover {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin chevron-active {
|
|
.fa-chevron-down {
|
|
color: $gray-darkest;
|
|
}
|
|
}
|
|
|
|
.open {
|
|
.dropdown-menu,
|
|
.dropdown-menu-nav {
|
|
display: block;
|
|
|
|
@media (max-width: $screen-xs-max) {
|
|
width: 100%;
|
|
min-width: 240px;
|
|
}
|
|
}
|
|
|
|
.dropdown-toggle,
|
|
.dropdown-menu-toggle {
|
|
@include chevron-active;
|
|
border-color: $gray-darkest;
|
|
}
|
|
}
|
|
|
|
.dropdown-toggle {
|
|
padding: 6px 8px 6px 10px;
|
|
background-color: $white-light;
|
|
color: $gl-text-color;
|
|
font-size: 14px;
|
|
text-align: left;
|
|
border: 1px solid $border-color;
|
|
border-radius: $border-radius-base;
|
|
white-space: nowrap;
|
|
|
|
&[disabled] {
|
|
background-color: $input-bg-disabled;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
&.no-outline {
|
|
outline: 0;
|
|
}
|
|
|
|
&.large {
|
|
width: 200px;
|
|
}
|
|
|
|
&.wide {
|
|
width: 100%;
|
|
|
|
+ .dropdown-select {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
// Allows dynamic-width text in the dropdown toggle.
|
|
// Resizes to allow long text without overflowing the container.
|
|
&.dynamic {
|
|
width: auto;
|
|
min-width: 160px;
|
|
max-width: 100%;
|
|
padding-right: 25px;
|
|
}
|
|
|
|
.fa {
|
|
color: $gray-darkest;
|
|
}
|
|
|
|
.fa-chevron-down {
|
|
font-size: $dropdown-chevron-size;
|
|
position: relative;
|
|
top: -3px;
|
|
margin-left: 5px;
|
|
}
|
|
|
|
&:hover {
|
|
@include chevron-active;
|
|
border-color: $gray-darkest;
|
|
}
|
|
|
|
&:focus:active {
|
|
@include chevron-active;
|
|
border-color: $dropdown-toggle-active-border-color;
|
|
}
|
|
}
|
|
|
|
.dropdown-menu-toggle {
|
|
@extend .dropdown-toggle;
|
|
padding-right: 20px;
|
|
position: relative;
|
|
width: 163px;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
|
|
.fa {
|
|
position: absolute;
|
|
|
|
&.fa-spinner {
|
|
font-size: 16px;
|
|
margin-top: -8px;
|
|
}
|
|
}
|
|
|
|
.fa-chevron-down {
|
|
position: absolute;
|
|
top: 11px;
|
|
right: 8px;
|
|
}
|
|
}
|
|
|
|
.dropdown-menu,
|
|
.dropdown-menu-nav {
|
|
display: none;
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
z-index: 9;
|
|
width: 240px;
|
|
margin-top: 2px;
|
|
margin-bottom: 0;
|
|
font-size: 14px;
|
|
font-weight: normal;
|
|
padding: 8px 0;
|
|
background-color: $white-light;
|
|
border: 1px solid $dropdown-border-color;
|
|
border-radius: $border-radius-base;
|
|
box-shadow: 0 2px 4px $dropdown-shadow-color;
|
|
|
|
&.is-loading {
|
|
.dropdown-content {
|
|
display: none;
|
|
}
|
|
|
|
.dropdown-loading {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
ul {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
li {
|
|
text-align: left;
|
|
list-style: none;
|
|
padding: 0 8px;
|
|
}
|
|
|
|
.divider {
|
|
height: 1px;
|
|
margin: 8px;
|
|
padding: 0;
|
|
background-color: $dropdown-divider-color;
|
|
}
|
|
|
|
.separator {
|
|
width: 100%;
|
|
height: 1px;
|
|
margin-top: 8px;
|
|
margin-bottom: 8px;
|
|
background-color: $dropdown-divider-color;
|
|
}
|
|
|
|
a {
|
|
display: block;
|
|
position: relative;
|
|
padding: 5px 8px;
|
|
color: $dropdown-link-color;
|
|
line-height: initial;
|
|
text-overflow: ellipsis;
|
|
border-radius: 2px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
|
|
&:hover,
|
|
&:focus,
|
|
&.is-focused {
|
|
background-color: $dropdown-link-hover-bg;
|
|
text-decoration: none;
|
|
}
|
|
|
|
&.dropdown-menu-empty-link {
|
|
&.is-focused {
|
|
background-color: $dropdown-empty-row-bg;
|
|
}
|
|
}
|
|
|
|
&.dropdown-menu-user-link {
|
|
line-height: 16px;
|
|
}
|
|
|
|
.icon-play {
|
|
fill: $gl-gray-light;
|
|
margin-right: 6px;
|
|
height: 12px;
|
|
width: 11px;
|
|
}
|
|
}
|
|
|
|
.dropdown-header {
|
|
color: $gl-gray-light;
|
|
font-size: 13px;
|
|
line-height: 22px;
|
|
padding: 0 10px;
|
|
}
|
|
|
|
.separator + .dropdown-header {
|
|
padding-top: 2px;
|
|
}
|
|
|
|
.unclickable {
|
|
cursor: not-allowed;
|
|
padding: 5px 8px;
|
|
color: $gl-gray-light;
|
|
}
|
|
}
|
|
|
|
.dropdown-menu-large {
|
|
width: 340px;
|
|
}
|
|
|
|
.dropdown-menu-no-wrap {
|
|
a {
|
|
white-space: normal;
|
|
}
|
|
}
|
|
|
|
.dropdown-menu-full-width {
|
|
width: 100%;
|
|
}
|
|
|
|
.dropdown-menu-paging {
|
|
.dropdown-page-two,
|
|
.dropdown-menu-back {
|
|
display: none;
|
|
}
|
|
|
|
&.is-page-two {
|
|
.dropdown-page-one {
|
|
display: none;
|
|
}
|
|
|
|
.dropdown-page-two,
|
|
.dropdown-menu-back {
|
|
display: block;
|
|
}
|
|
|
|
.dropdown-content {
|
|
padding: 0 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.dropdown-menu-user {
|
|
.avatar {
|
|
float: left;
|
|
width: 30px;
|
|
height: 30px;
|
|
margin: 0 10px 0 0;
|
|
}
|
|
}
|
|
|
|
.dropdown-menu-user-link {
|
|
padding-top: 10px;
|
|
padding-bottom: 7px;
|
|
}
|
|
|
|
.dropdown-menu-user-full-name {
|
|
display: block;
|
|
font-weight: 500;
|
|
line-height: 16px;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.dropdown-menu-user-username {
|
|
display: block;
|
|
line-height: 16px;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.dropdown-select {
|
|
width: $dropdown-width;
|
|
}
|
|
|
|
.dropdown-menu-align-right {
|
|
left: auto;
|
|
right: 0;
|
|
}
|
|
|
|
.dropdown-menu-selectable {
|
|
a {
|
|
padding-left: 25px;
|
|
|
|
&.is-indeterminate,
|
|
&.is-active {
|
|
&::before {
|
|
position: absolute;
|
|
left: 5px;
|
|
top: 8px;
|
|
font: normal normal normal 14px/1 FontAwesome;
|
|
font-size: inherit;
|
|
text-rendering: auto;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
}
|
|
|
|
&.is-indeterminate::before {
|
|
content: "\f068";
|
|
}
|
|
|
|
&.is-active::before {
|
|
content: "\f00c";
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.dropdown-title {
|
|
position: relative;
|
|
padding: 0 25px 10px;
|
|
margin: 0 10px 10px;
|
|
font-weight: 600;
|
|
line-height: 1;
|
|
text-align: center;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
border-bottom: 1px solid $dropdown-divider-color;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.dropdown-title-button {
|
|
position: absolute;
|
|
top: 0;
|
|
padding: 0;
|
|
color: $dropdown-title-btn-color;
|
|
font-size: 14px;
|
|
border: 0;
|
|
background: none;
|
|
outline: 0;
|
|
|
|
&:hover {
|
|
color: darken($dropdown-title-btn-color, 15%);
|
|
}
|
|
}
|
|
|
|
.dropdown-menu-close {
|
|
right: 5px;
|
|
width: 20px;
|
|
height: 20px;
|
|
top: -3px;
|
|
}
|
|
|
|
.dropdown-menu-back {
|
|
left: 7px;
|
|
top: 2px;
|
|
}
|
|
|
|
.dropdown-input {
|
|
position: relative;
|
|
margin-bottom: 10px;
|
|
padding: 0 10px;
|
|
|
|
.fa {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 20px;
|
|
color: $dropdown-input-fa-color;
|
|
font-size: 12px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.dropdown-input-clear {
|
|
display: none;
|
|
cursor: pointer;
|
|
pointer-events: all;
|
|
right: 22px;
|
|
top: 9px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
&.has-value {
|
|
.dropdown-input-clear {
|
|
display: block;
|
|
}
|
|
|
|
.dropdown-input-search {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.dropdown-input-field,
|
|
.default-dropdown-input {
|
|
width: 100%;
|
|
min-height: 30px;
|
|
padding: 0 7px;
|
|
color: $dropdown-input-color;
|
|
line-height: 30px;
|
|
border: 1px solid $dropdown-divider-color;
|
|
border-radius: 2px;
|
|
outline: 0;
|
|
|
|
&:focus {
|
|
color: $dropdown-link-color;
|
|
border-color: $dropdown-input-focus-border;
|
|
box-shadow: 0 0 4px $dropdown-input-focus-shadow;
|
|
|
|
~ .fa {
|
|
color: $dropdown-link-color;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
~ .fa {
|
|
color: $dropdown-link-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
.dropdown-content {
|
|
max-height: 215px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.dropdown-footer {
|
|
padding-top: 10px;
|
|
margin-top: 10px;
|
|
font-size: 13px;
|
|
border-top: 1px solid $dropdown-divider-color;
|
|
}
|
|
|
|
.dropdown-due-date-footer {
|
|
padding-top: 0;
|
|
margin-left: 10px;
|
|
margin-right: 10px;
|
|
border-top: 0;
|
|
}
|
|
|
|
.dropdown-footer-list {
|
|
font-size: 14px;
|
|
|
|
a {
|
|
cursor: pointer;
|
|
padding-left: 10px;
|
|
}
|
|
}
|
|
|
|
.dropdown-loading {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
display: none;
|
|
z-index: 9;
|
|
background-color: $dropdown-loading-bg;
|
|
font-size: 28px;
|
|
|
|
.fa {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
margin-top: -14px;
|
|
margin-left: -14px;
|
|
}
|
|
}
|
|
|
|
.dropdown-label-box {
|
|
position: relative;
|
|
top: 3px;
|
|
margin-right: 5px;
|
|
display: inline-block;
|
|
width: 15px;
|
|
height: 15px;
|
|
border-radius: $border-radius-base;
|
|
}
|
|
|
|
.dropdown-menu-due-date {
|
|
.dropdown-content {
|
|
max-height: 230px;
|
|
}
|
|
|
|
.ui-widget {
|
|
table {
|
|
margin: 0;
|
|
}
|
|
|
|
&.ui-datepicker-inline {
|
|
padding: 0 10px;
|
|
border: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.ui-datepicker-header {
|
|
padding: 0 8px 10px;
|
|
border: 0;
|
|
|
|
.ui-icon {
|
|
background: none;
|
|
font-size: 20px;
|
|
text-indent: 0;
|
|
|
|
&::before {
|
|
display: block;
|
|
position: relative;
|
|
top: -2px;
|
|
color: $dropdown-title-btn-color;
|
|
font: normal normal normal 14px/1 FontAwesome;
|
|
font-size: inherit;
|
|
text-rendering: auto;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ui-datepicker-calendar {
|
|
.ui-state-hover,
|
|
.ui-state-active {
|
|
color: $white-light;
|
|
border: 0;
|
|
}
|
|
}
|
|
|
|
.ui-datepicker-prev,
|
|
.ui-datepicker-next {
|
|
top: 0;
|
|
height: 15px;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
background-color: transparent;
|
|
border: 0;
|
|
|
|
.ui-icon::before {
|
|
color: $md-link-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ui-datepicker-prev {
|
|
left: 0;
|
|
|
|
.ui-icon::before {
|
|
content: '\f104';
|
|
text-align: left;
|
|
}
|
|
}
|
|
|
|
.ui-datepicker-next {
|
|
right: 0;
|
|
|
|
.ui-icon::before {
|
|
content: '\f105';
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
td {
|
|
padding: 0;
|
|
border: 1px solid $calendar-border-color;
|
|
|
|
&:first-child {
|
|
border-left: 0;
|
|
}
|
|
|
|
&:last-child {
|
|
border-right: 0;
|
|
}
|
|
|
|
a {
|
|
line-height: 17px;
|
|
border: 0;
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
|
|
.ui-datepicker-title {
|
|
color: $gl-gray;
|
|
font-size: 14px;
|
|
line-height: 1;
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
|
|
th {
|
|
padding: 2px 0;
|
|
color: $note-disabled-comment-color;
|
|
font-weight: normal;
|
|
text-transform: lowercase;
|
|
border-top: 1px solid $calendar-border-color;
|
|
}
|
|
|
|
.ui-datepicker-unselectable {
|
|
background-color: $gray-light;
|
|
}
|
|
}
|
|
|
|
.dropdown-menu-inner-title {
|
|
display: block;
|
|
color: $gl-title-color;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.dropdown-menu-inner-content {
|
|
display: block;
|
|
color: $gl-gray-light;
|
|
}
|
|
|
|
.dropdown-toggle-text {
|
|
&.is-default {
|
|
color: $gl-gray-light;
|
|
}
|
|
}
|