-
-/**
- * Callouts
- */
-.callout {
- border-inline-start: 3px solid #BBB;
- background-color: #EEE;
- padding: $-s $-s $-s $-xl;
- display: block;
- position: relative;
- overflow: auto;
- &:before {
- background-image: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiMwMTUzODAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gICAgPHBhdGggZD0iTTEyIDJDNi40OCAyIDIgNi40OCAyIDEyczQuNDggMTAgMTAgMTAgMTAtNC40OCAxMC0xMFMxNy41MiAyIDEyIDJ6bTEgMTVoLTJ2LTZoMnY2em0wLThoLTJWN2gydjJ6Ii8+PC9zdmc+');
- background-repeat: no-repeat;
- content: '';
- width: 1.2em;
- height: 1.2em;
- left: $-xs + 2px;
- top: 50%;
- margin-top: -9px;
- display: inline-block;
- position: absolute;
- line-height: 1;
- opacity: 0.8;
- }
- &.success {
- border-left-color: $positive;
- @include lightDark(background-color, lighten($positive, 68%), darken($positive, 22%));
- @include lightDark(color, darken($positive, 16%), lighten($positive, 5%));
- }
- &.success:before {
- background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiMzNzZjMzkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gICAgPHBhdGggZD0iTTEyIDJDNi40OCAyIDIgNi40OCAyIDEyczQuNDggMTAgMTAgMTAgMTAtNC40OCAxMC0xMFMxNy41MiAyIDEyIDJ6bS0yIDE1bC01LTUgMS40MS0xLjQxTDEwIDE0LjE3bDcuNTktNy41OUwxOSA4bC05IDl6Ii8+PC9zdmc+");
- }
- &.danger {
- border-left-color: $negative;
- @include lightDark(background-color, lighten($negative, 56%), darken($negative, 30%));
- @include lightDark(color, darken($negative, 20%), lighten($negative, 5%));
- }
- &.danger:before {
- background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNiOTE4MTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0xNS43MyAzSDguMjdMMyA4LjI3djcuNDZMOC4yNyAyMWg3LjQ2TDIxIDE1LjczVjguMjdMMTUuNzMgM3pNMTIgMTcuM2MtLjcyIDAtMS4zLS41OC0xLjMtMS4zIDAtLjcyLjU4LTEuMyAxLjMtMS4zLjcyIDAgMS4zLjU4IDEuMyAxLjMgMCAuNzItLjU4IDEuMy0xLjMgMS4zem0xLTQuM2gtMlY3aDJ2NnoiLz4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjwvc3ZnPg==");
- }
- &.info {
- border-left-color: $info;
- @include lightDark(color, darken($info, 20%), lighten($info, 10%));
- @include lightDark(background-color, lighten($info, 50%), darken($info, 35%));
- }
- &.warning {
- border-left-color: $warning;
- @include lightDark(background-color, lighten($warning, 50%), darken($warning, 36%));
- @include lightDark(color, darken($warning, 20%), $warning);
- }
- &.warning:before {
- background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNiNjUzMWMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gICAgPHBhdGggZD0iTTEgMjFoMjJMMTIgMiAxIDIxem0xMi0zaC0ydi0yaDJ2MnptMC00aC0ydi00aDJ2NHoiLz48L3N2Zz4=");
- }
- a {
- color: inherit;
- text-decoration: underline;
- }
-}
+@use "mixins";
+@use "vars";
/**
* Card-style blocks
*/
.card {
- @include lightDark(background-color, #FFF, #222);
- box-shadow: $bs-card;
+ @include mixins.lightDark(background-color, #FFF, #222);
+ box-shadow: vars.$bs-card;
border-radius: 3px;
- border: 1px solid transparent;
+ break-inside: avoid;
.body, p.empty-text {
- padding: $-m;
+ padding-block: vars.$m;
}
a, p {
word-wrap: break-word;
}
.card-title {
- padding: $-m $-m $-xs;
+ padding: vars.$m vars.$m vars.$xs;
margin: 0;
- font-size: $fs-m;
+ font-size: vars.$fs-m;
color: #222;
fill: #222;
font-weight: 400;
.card-title a {
line-height: 1;
}
+.card-footer-link, button.card-footer-link {
+ display: block;
+ padding: vars.$s vars.$m;
+ line-height: 1;
+ border-top: 1px solid;
+ width: 100%;
+ text-align: left;
+ @include mixins.lightDark(border-color, #DDD, #555);
+ border-radius: 0 0 3px 3px;
+ font-size: 0.9em;
+ margin-top: vars.$xs;
+ &:hover {
+ text-decoration: none;
+ @include mixins.lightDark(background-color, #f2f2f2, #2d2d2d);
+ }
+ &:focus {
+ @include mixins.lightDark(background-color, #eee, #222);
+ outline: 1px dotted #666;
+ outline-offset: -2px;
+ }
+}
.card.border-card {
- border: 1px solid #DDD;
+ border: 1px solid;
+ @include mixins.lightDark(border-color, #ddd, #000);
}
.card.drag-card {
border: 1px solid #DDD;
- @include lightDark(border-color, #ddd, #000);
- @include lightDark(background-color, #fff, #333);
+ @include mixins.lightDark(border-color, #ddd, #000);
+ @include mixins.lightDark(background-color, #fff, #333);
border-radius: 4px;
display: flex;
- padding: 0 0 0 ($-s + 28px);
- margin: $-s 0;
+ padding: 0 0 0 (vars.$s + 28px);
+ margin: vars.$s 0;
position: relative;
.drag-card-action {
cursor: pointer;
justify-content: center;
width: 28px;
flex-grow: 0;
- padding: 0 $-xs;
+ padding: 0 vars.$xs;
&:hover {
- background-color: #EEE;
+ @include mixins.lightDark(background-color, #eee, #2d2d2d);
}
.svg-icon {
margin-inline-end: 0px;
}
}
.outline input {
- margin: $-s 0;
+ margin: vars.$s 0;
width: 100%;
}
.outline {
position: relative;
}
.handle {
- @include lightDark(background-color, #eee, #2d2d2d);
+ @include mixins.lightDark(background-color, #eee, #2d2d2d);
left: 0;
position: absolute;
top: 0;
bottom: 0;
}
> div {
- padding: 0 $-s;
+ padding: 0 vars.$s;
max-width: 80%;
flex: 1;
}
display: flex;
flex-direction: column;
border: 1px solid #ddd;
- @include lightDark(border-color, #ddd, #000);
- margin-bottom: $-l;
+ @include mixins.lightDark(border-color, #ddd, #000);
+ margin-bottom: vars.$l;
border-radius: 4px;
overflow: hidden;
min-width: 100px;
- color: $text-dark;
+ color: vars.$text-dark;
transition: border-color ease-in-out 120ms, box-shadow ease-in-out 120ms;
&:hover {
- color: $text-dark;
+ color: vars.$text-dark;
text-decoration: none;
- @include lightDark(box-shadow, $bs-card, $bs-card-dark);
+ @include mixins.lightDark(box-shadow, vars.$bs-card, vars.$bs-card-dark);
}
h2 {
width: 100%;
border-bottom-width: 2px;
}
.grid-card-content, .grid-card-footer {
- padding: $-l;
+ padding: vars.$l;
}
.grid-card-content + .grid-card-footer {
padding-top: 0;
}
.content-wrap.card {
- padding: $-m $-xxl;
+ padding: vars.$m vars.$xxl;
margin-inline-start: auto;
margin-inline-end: auto;
- margin-bottom: $-l;
+ margin-bottom: vars.$l;
overflow: initial;
min-height: 60vh;
+ border-radius: 8px;
&.auto-height {
min-height: 0;
}
width: 100%;
}
}
-@include smaller-than($xxl) {
+@include mixins.smaller-than(vars.$bp-xxl) {
.content-wrap.card {
- padding: $-m $-xl;
+ padding: vars.$m vars.$xl;
}
}
-@include smaller-than($m) {
+@include mixins.smaller-than(vars.$bp-m) {
.content-wrap.card {
- padding: $-m $-l;
+ padding: vars.$m vars.$l;
}
}
-@include smaller-than($s) {
+@include mixins.smaller-than(vars.$bp-s) {
.content-wrap.card {
- padding: $-m $-m;
+ padding: vars.$m vars.$m;
}
}
+.sub-card {
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+ border: 1.5px solid;
+ @include mixins.lightDark(border-color, #E2E2E2, #444);
+ border-radius: 4px;
+}
+
.outline-hover {
border: 1px solid transparent !important;
&:hover {
}
.fade-in-when-active {
- opacity: 0.6;
+ @include mixins.lightDark(opacity, 0.6, 0.7);
transition: opacity ease-in-out 120ms;
&:hover, &:focus-within {
- opacity: 1;
+ opacity: 1 !important;
+ }
+ @media (prefers-contrast: more) {
+ opacity: 1 !important;
}
}
*/
.tag-item {
display: inline-flex;
- margin-bottom: $-xs;
- margin-inline-end: $-xs;
+ margin-bottom: vars.$xs;
+ margin-inline-end: vars.$xs;
border-radius: 4px;
border: 1px solid;
overflow: hidden;
font-size: 0.85em;
- @include lightDark(border-color, #CCC, #666);
+ @include mixins.lightDark(border-color, #CCC, #666);
a, span, a:hover, a:active {
padding: 4px 8px;
- @include lightDark(color, rgba(0, 0, 0, 0.7), rgba(255, 255, 255, 0.8));
+ @include mixins.lightDark(color, rgba(0, 0, 0, 0.7), rgba(255, 255, 255, 0.8));
transition: background-color ease-in-out 80ms;
text-decoration: none;
}
a:hover {
- @include lightDark(background-color, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3));
+ @include mixins.lightDark(background-color, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3));
}
svg {
- @include lightDark(fill, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.5));
+ @include mixins.lightDark(fill, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.5));
}
.tag-value {
border-inline-start: 1px solid;
- @include lightDark(border-color, #DDD, #666);
- @include lightDark(background-color, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2))
+ @include mixins.lightDark(border-color, #DDD, #666);
+ @include mixins.lightDark(background-color, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2))
}
}
margin-bottom: 0;
}
-td .tag-item {
+.item-list-row .tag-item {
margin-bottom: 0;
}
-/**
- * Pill boxes
- */
-
-.pill {
- display: inline-block;
- border: 1px solid currentColor;
- padding: .2em .8em;
- font-size: 0.8em;
- border-radius: 1rem;
- position: relative;
- overflow: hidden;
- line-height: 1.4;
- &:before {
- content: '';
- background-color: currentColor;
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- opacity: 0.1;
- }
-}
-
/**
* API Docs
*/
.api-method {
font-size: 0.75rem;
background-color: #888;
- padding: $-xs;
+ padding: vars.$xs;
line-height: 1.3;
opacity: 0.7;
vertical-align: top;
.sticky-sidebar {
position: sticky;
- top: $-m;
- max-height: calc(100vh - #{$-m});
+ top: vars.$m;
+ max-height: calc(100vh - #{vars.$m});
overflow-y: auto;
}
projects / bookstack / blobdiff