debian-mirror-gitlab/app/assets/stylesheets/framework/lists.scss

296 lines
4.4 KiB
SCSS
Raw Normal View History

2014-09-02 18:07:02 +05:30
/**
* Well styled list
*
*/
2018-11-08 19:23:39 +05:30
.hover-list {
2016-06-02 11:05:42 +05:30
position: relative;
2014-09-02 18:07:02 +05:30
margin: 0;
padding: 0;
list-style: none;
2015-12-23 02:04:40 +05:30
> li {
2014-09-02 18:07:02 +05:30
padding: 10px 15px;
min-height: 20px;
2017-08-17 22:00:37 +05:30
border-bottom: 1px solid $list-border;
2018-03-17 18:26:18 +05:30
word-wrap: break-word;
2014-09-02 18:07:02 +05:30
2017-08-17 22:00:37 +05:30
&::after {
2019-07-07 11:18:12 +05:30
content: ' ';
2014-09-02 18:07:02 +05:30
display: table;
clear: both;
}
&.disabled {
2018-11-20 20:47:30 +05:30
color: $gl-text-color-tertiary;
2014-09-02 18:07:02 +05:30
}
2018-05-09 12:01:36 +05:30
&:not(.ui-sort-disabled):hover {
2018-11-20 20:47:30 +05:30
background: $blue-50;
2018-05-09 12:01:36 +05:30
}
2014-09-02 18:07:02 +05:30
&.unstyled {
&:hover {
background: none;
}
}
2018-05-09 12:01:36 +05:30
&.smoke { background-color: $gray-light; }
2014-09-02 18:07:02 +05:30
&:last-child {
2018-03-17 18:26:18 +05:30
border-bottom: 0;
2014-09-02 18:07:02 +05:30
&.bottom {
2017-08-17 22:00:37 +05:30
background: $gray-light;
2014-09-02 18:07:02 +05:30
}
}
.list-item-name {
float: left;
position: relative;
top: 3px;
}
p {
padding-top: 1px;
margin: 0;
2017-08-17 22:00:37 +05:30
color: $white-normal;
2016-11-03 12:29:30 +05:30
2014-09-02 18:07:02 +05:30
img {
position: relative;
top: 3px;
}
}
2018-11-08 19:23:39 +05:30
.card.card-body-title {
2018-11-20 20:47:30 +05:30
font-size: $gl-font-size;
2014-09-02 18:07:02 +05:30
line-height: 18px;
}
}
}
/** light list with border-bottom between li **/
2017-08-17 22:00:37 +05:30
ul.bordered-list,
ul.unstyled-list {
2015-09-25 12:07:36 +05:30
@include basic-list;
2014-09-02 18:07:02 +05:30
&.top-list {
li:first-child {
padding-top: 0;
2015-09-25 12:07:36 +05:30
2017-08-17 22:00:37 +05:30
h4,
h5 {
2014-09-02 18:07:02 +05:30
margin-top: 0;
}
}
}
}
2015-04-26 12:48:37 +05:30
ul.unstyled-list > li {
2018-03-17 18:26:18 +05:30
border-bottom: 0;
}
2020-03-13 15:44:24 +05:30
ul.list-items-py-2 {
> li {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
}
2017-08-17 22:00:37 +05:30
// Generic content list
2015-09-25 12:07:36 +05:30
ul.content-list {
@include basic-list;
margin: 0;
padding: 0;
2017-08-17 22:00:37 +05:30
li {
border-color: $white-normal;
2018-11-20 20:47:30 +05:30
font-size: $gl-font-size;
color: $gl-text-color;
2018-12-05 23:21:45 +05:30
word-break: break-word;
2016-06-02 11:05:42 +05:30
2016-09-13 17:45:13 +05:30
&.no-description {
.title {
line-height: $list-text-height;
}
}
2016-06-02 11:05:42 +05:30
.title {
2018-03-17 18:26:18 +05:30
font-weight: $gl-font-weight-bold;
2016-06-02 11:05:42 +05:30
}
a {
2017-08-17 22:00:37 +05:30
color: $gl-text-color;
2016-06-02 11:05:42 +05:30
2020-11-24 15:15:51 +05:30
&.inline-link {
color: $blue-600;
}
2016-11-03 12:29:30 +05:30
}
2016-06-02 11:05:42 +05:30
.description {
2018-03-17 18:26:18 +05:30
@include str-truncated;
2016-06-02 11:05:42 +05:30
}
2015-09-25 12:07:36 +05:30
.controls {
float: right;
2015-10-24 18:46:33 +05:30
2016-08-24 12:49:21 +05:30
> .control-text {
margin-right: $gl-padding-top;
2016-09-13 17:45:13 +05:30
line-height: $list-text-height;
2016-08-24 12:49:21 +05:30
&:last-child {
margin-right: 0;
}
}
> .btn,
2017-08-17 22:00:37 +05:30
> .btn-group,
> .dropdown.inline {
margin-right: $gl-padding-top;
display: inline-block;
2016-09-13 17:45:13 +05:30
margin-top: 3px;
margin-bottom: 4px;
2019-07-07 11:18:12 +05:30
&.btn-ldap-override {
@include media-breakpoint-up(sm) {
margin-bottom: 0;
}
}
2017-09-10 17:25:29 +05:30
&.has-tooltip,
&:last-child {
margin-right: 0;
2017-08-17 22:00:37 +05:30
2018-11-08 19:23:39 +05:30
@include media-breakpoint-down(xs) {
2017-08-17 22:00:37 +05:30
margin: 0 auto;
}
}
2015-10-24 18:46:33 +05:30
}
2016-09-29 09:46:39 +05:30
.no-comments {
2019-07-07 11:18:12 +05:30
opacity: 0.5;
2016-11-03 12:29:30 +05:30
}
}
// When dragging a list item
&.ui-sortable-helper {
2018-03-17 18:26:18 +05:30
border-bottom: 0;
}
&.list-placeholder {
background-color: $gray-light;
2017-08-17 22:00:37 +05:30
border: dotted 1px $white-normal;
margin: 1px 0;
2016-06-22 15:30:34 +05:30
min-height: 52px;
}
2015-09-25 12:07:36 +05:30
}
}
2017-08-17 22:00:37 +05:30
// Content list using flexbox
.flex-list {
.flex-row {
display: flex;
align-items: center;
white-space: nowrap;
}
.row-main-content {
flex: 1 1 auto;
overflow: hidden;
padding-right: 8px;
}
2016-08-24 12:49:21 +05:30
2017-08-17 22:00:37 +05:30
.row-fixed-content {
flex: 0 0 auto;
margin-left: auto;
}
.row-title {
2018-03-17 18:26:18 +05:30
font-weight: $gl-font-weight-bold;
2017-08-17 22:00:37 +05:30
}
.row-second-line {
display: block;
}
.dropdown {
.btn-block {
margin-bottom: 0;
line-height: inherit;
2016-08-24 12:49:21 +05:30
}
}
2017-08-17 22:00:37 +05:30
2018-11-08 19:23:39 +05:30
.badge-secondary {
2017-08-17 22:00:37 +05:30
color: $gl-text-color-secondary;
}
2018-03-17 18:26:18 +05:30
.avatar-cell {
align-self: flex-start;
}
2017-08-17 22:00:37 +05:30
}
2021-02-22 17:27:13 +05:30
ul.content-list.issuable-list > li,
ul.content-list.todos-list > li,
2018-11-08 19:23:39 +05:30
.card > .content-list > li {
2017-08-17 22:00:37 +05:30
padding: $gl-padding-top $gl-padding;
2015-12-23 02:04:40 +05:30
}
ul.controls {
float: right;
list-style: none;
2017-09-10 17:25:29 +05:30
display: flex;
align-items: center;
2015-12-23 02:04:40 +05:30
.btn {
padding: 10px 14px;
}
> li {
float: left;
margin-right: 10px;
2015-12-23 02:04:40 +05:30
&:last-child {
margin-right: 0;
}
2018-11-18 11:00:15 +05:30
.author-link {
2015-12-23 02:04:40 +05:30
.avatar-inline {
margin-left: 0;
margin-right: 0;
2017-08-17 22:00:37 +05:30
margin-bottom: 0;
2015-12-23 02:04:40 +05:30
}
}
}
2017-09-10 17:25:29 +05:30
.issuable-pipeline-broken a,
2018-11-18 11:00:15 +05:30
.author-link {
2017-09-10 17:25:29 +05:30
display: flex;
}
2015-12-23 02:04:40 +05:30
}
2017-08-17 22:00:37 +05:30
ul.indent-list {
padding: 10px 0 0 30px;
}
2017-09-10 17:25:29 +05:30
// Specific styles for tree list
2018-03-17 18:26:18 +05:30
@keyframes spin-avatar {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
2019-10-12 21:52:04 +05:30
.horizontal-list {
padding-left: 0;
list-style: none;
> li {
float: left;
}
&.list-items-separated {
> li:not(:last-child)::after {
content: '\00b7';
margin: 0 $gl-padding-4;
}
}
}