gitlab-org--gitlab-foss/app/assets/stylesheets/components/design_management/design.scss

183 lines
3.4 KiB
SCSS

$design-pin-diameter: 28px;
$t-gray-a-16-design-pin: rgba($black, 0.16);
.layout-page.design-detail-layout {
max-height: 100vh;
}
.design-detail {
background-color: rgba($black, 0.9);
.with-performance-bar & {
top: 35px;
}
.badge.badge-pill {
display: flex;
height: $design-pin-diameter;
width: $design-pin-diameter;
box-sizing: content-box;
background-color: $purple-500;
color: $white;
font-weight: $gl-font-weight-bold;
border-radius: 50%;
z-index: 1;
padding: 0;
&.resolved {
background-color: $gray-500;
}
}
.comment-indicator {
border-radius: 50%;
}
.comment-indicator,
.frame .badge.badge-pill {
&:active {
cursor: grabbing;
}
}
/**
* Design pin that overlays the design
*/
.frame .badge.badge-pill {
box-shadow: 0 2px 4px $t-gray-a-08, 0 0 1px $t-gray-a-24;
border: $white 2px solid;
will-change: transform, box-shadow, opacity;
// NOTE: verbose transition property required for Safari
transition: transform $general-hover-transition-duration linear, box-shadow $general-hover-transition-duration linear, opacity $general-hover-transition-duration linear;
transform-origin: 0 0;
transform: translate(-50%, -50%);
&:hover {
transform: scale(1.2) translate(-50%, -50%);
}
&:active {
box-shadow: 0 0 4px $t-gray-a-16-design-pin, 0 4px 12px $t-gray-a-16-design-pin;
}
&.inactive {
@include gl-opacity-5;
&:hover {
@include gl-opacity-10;
}
}
}
}
.design-presentation-wrapper {
top: 0;
left: 0;
}
.design-scaler-wrapper {
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.design-checkbox {
position: absolute;
top: $gl-padding;
left: 30px;
}
.image-notes {
overflow-y: scroll;
padding: $gl-padding;
padding-top: 50px;
background-color: $white;
flex-shrink: 0;
min-width: 400px;
flex-basis: 28%;
.link-inherit-color {
&:hover,
&:active,
&:focus {
color: inherit;
text-decoration: none;
}
}
.toggle-comments {
line-height: 20px;
border-top: 1px solid $border-color;
&.expanded {
border-bottom: 1px solid $border-color;
}
.toggle-comments-button:focus {
text-decoration: none;
color: $blue-600;
}
}
.badge.badge-pill {
margin-left: $gl-padding;
}
.design-discussion {
margin: $gl-padding 0;
&::before {
content: '';
border-left: 1px solid $gray-100;
position: absolute;
left: 28px;
top: -17px;
height: 17px;
}
.design-note {
padding: $gl-padding;
list-style: none;
transition: background $gl-transition-duration-medium $general-hover-transition-curve;
border-top-left-radius: $border-radius-default; // same border radius used by .bordered-box
border-top-right-radius: $border-radius-default;
a {
color: inherit;
}
.note-text a {
color: $blue-600;
}
}
.reply-wrapper {
padding: $gl-padding;
}
}
.reply-wrapper {
border-top: 1px solid $border-color;
}
.new-discussion-disclaimer {
line-height: 20px;
}
}
@media (max-width: map-get($grid-breakpoints, lg)) {
.design-detail {
overflow-y: scroll;
}
.image-notes {
overflow-y: auto;
min-width: 100%;
flex-grow: 1;
flex-basis: auto;
}
}
.design-card-header {
background: transparent;
}