kopia lustrzana https://github.com/shoelace-style/shoelace
update docs to use surface tokens
Cory LaViska
rodzic
e1c003c8df
commit
723ee80c8f
|
|
@ -1,7 +1,7 @@
|
|||
.code-block {
|
||||
position: relative;
|
||||
border-radius: 3px;
|
||||
background-color: rgb(var(--sl-color-neutral-50));
|
||||
background-color: rgb(var(--sl-surface-base-alt));
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
border-bottom: none;
|
||||
border-top-left-radius: 3px;
|
||||
border-top-right-radius: 3px;
|
||||
background-color: rgb(var(--sl-color-neutral-0));
|
||||
background-color: rgb(var(--sl-surface-base));
|
||||
min-width: 20rem;
|
||||
max-width: 100%;
|
||||
padding: 1.5rem 3.25rem 1.5rem 1.5rem;
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
width: 1.75rem;
|
||||
font-size: 20px;
|
||||
color: rgb(var(--sl-color-neutral-600));
|
||||
background-color: rgb(var(--sl-color-neutral-0));
|
||||
background-color: rgb(var(--sl-surface-base));
|
||||
border-left: solid 1px rgb(var(--sl-color-neutral-200));
|
||||
border-top-right-radius: 3px;
|
||||
cursor: ew-resize;
|
||||
|
|
@ -83,7 +83,7 @@
|
|||
min-width: 2.5rem;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
background: rgb(var(--sl-color-neutral-0));
|
||||
background: rgb(var(--sl-surface-base));
|
||||
font: inherit;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 500;
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ body.site-search-visible {
|
|||
flex-direction: column;
|
||||
max-width: 460px;
|
||||
max-height: calc(100vh - 20rem);
|
||||
background-color: rgb(var(--sl-color-neutral-0));
|
||||
background-color: rgb(var(--sl-surface-raised));
|
||||
border-radius: var(--sl-border-radius-large);
|
||||
box-shadow: var(--sl-shadow-x-large);
|
||||
margin: 10rem auto;
|
||||
|
|
@ -55,6 +55,7 @@ body.site-search-visible {
|
|||
|
||||
.site-search__input::part(base) {
|
||||
border: none;
|
||||
background: transparent;
|
||||
border-radius: var(--sl-border-radius-large);
|
||||
}
|
||||
|
||||
|
|
@ -103,7 +104,7 @@ body.site-search-visible {
|
|||
.site-search__results li[aria-selected='true'] a small,
|
||||
.site-search__results li[aria-selected='true'] a sl-icon {
|
||||
outline: none;
|
||||
color: rgb(var(--sl-color-neutral-0));
|
||||
color: rgb(var(--sl-surface-raised));
|
||||
background-color: rgb(var(--sl-color-primary-600));
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ body {
|
|||
font-size: var(--sl-font-size-medium);
|
||||
font-weight: var(--sl-font-weight-normal);
|
||||
letter-spacing: var(--sl-letter-spacing-normal);
|
||||
background-color: rgb(var(--sl-color-neutral-0));
|
||||
background-color: rgb(var(--sl-surface-base));
|
||||
color: rgb(var(--sl-color-neutral-800));
|
||||
line-height: var(--sl-line-height-normal);
|
||||
}
|
||||
|
|
@ -32,7 +32,7 @@ strong {
|
|||
|
||||
/* Sidebar */
|
||||
.sidebar {
|
||||
background: rgb(var(--sl-color-neutral-0));
|
||||
background-color: rgb(var(--sl-surface-base));
|
||||
border-right: solid 1px rgb(var(--sl-color-neutral-200));
|
||||
}
|
||||
|
||||
|
|
@ -54,94 +54,6 @@ strong {
|
|||
margin-top: 0;
|
||||
}
|
||||
|
||||
/* Search */
|
||||
.sidebar .search {
|
||||
position: relative;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.sidebar .search input[type='search'] {
|
||||
background-color: rgb(var(--sl-input-background-color));
|
||||
border: solid 1px rgb(var(--sl-input-border-color));
|
||||
border-radius: var(--sl-border-radius-pill);
|
||||
color: rgb(var(--sl-input-color));
|
||||
padding-left: 1rem;
|
||||
padding-right: 2rem;
|
||||
margin: 0 1.25rem;
|
||||
transition: var(--sl-transition-fast) color, var(--sl-transition-fast) border, var(--sl-transition-fast) box-shadow;
|
||||
}
|
||||
|
||||
.sidebar .search input[type='search']::placeholder {
|
||||
color: rgb(var(--sl-input-placeholder-color));
|
||||
}
|
||||
|
||||
.sidebar .search input[type='search']:hover {
|
||||
background-color: rgb(var(--sl-input-background-color-hover));
|
||||
border-color: rgb(var(--sl-input-border-color-hover));
|
||||
color: rgb(var(--sl-input-color-hover));
|
||||
}
|
||||
|
||||
.sidebar .search input[type='search']:focus {
|
||||
background-color: rgb(var(--sl-input-background-color-focus));
|
||||
box-shadow: var(--sl-focus-ring);
|
||||
border-color: rgb(var(--sl-input-border-color-focus));
|
||||
color: rgb(var(--sl-input-color-focus));
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.sidebar .input-wrap {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding: 0 0.25rem;
|
||||
}
|
||||
|
||||
.sidebar .clear-button {
|
||||
position: absolute;
|
||||
right: 34px;
|
||||
top: 7px;
|
||||
width: 22px !important;
|
||||
height: 22px !important;
|
||||
}
|
||||
|
||||
.sidebar .clear-button svg {
|
||||
transform: scale(0.75) !important;
|
||||
}
|
||||
|
||||
.sidebar .clear-button svg circle {
|
||||
fill: rgb(var(--sl-color-neutral-500));
|
||||
}
|
||||
|
||||
.sidebar .clear-button svg path {
|
||||
stroke: rgb(var(--sl-color-neutral-0));
|
||||
}
|
||||
|
||||
.sidebar .clear-button:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.search .results-panel {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.search .matching-post {
|
||||
border-bottom: solid 1px rgb(var(--sl-color-neutral-600)) !important;
|
||||
padding: 0.25rem 1.5rem;
|
||||
}
|
||||
|
||||
.search .matching-post a {
|
||||
display: block;
|
||||
border-radius: inherit;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.search .matching-post h2 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.search .matching-post p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/* Sidebar toggle */
|
||||
.sidebar-toggle {
|
||||
top: 0.25rem;
|
||||
|
|
@ -149,7 +61,7 @@ strong {
|
|||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-radius: var(--sl-border-radius-medium);
|
||||
background-color: rgb(var(--sl-color-neutral-0));
|
||||
background-color: rgb(var(--sl-surface-base));
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
|
|
@ -378,7 +290,7 @@ strong {
|
|||
.markdown-section code {
|
||||
font-family: var(--sl-font-mono);
|
||||
font-size: 87.5%;
|
||||
background-color: rgb(var(--sl-color-neutral-50));
|
||||
background-color: rgb(var(--sl-surface-base-alt));
|
||||
border-radius: var(--sl-border-radius-small);
|
||||
padding: 2px 4px;
|
||||
}
|
||||
|
|
@ -387,17 +299,17 @@ kbd,
|
|||
.markdown-section kbd {
|
||||
font-family: var(--sl-font-mono);
|
||||
font-size: 87.5%;
|
||||
background-color: rgb(var(--sl-color-neutral-100));
|
||||
background-color: rgb(var(--sl-color-neutral-50));
|
||||
border-radius: var(--sl-border-radius-small);
|
||||
border: solid 1px rgb(var(--sl-color-neutral-200));
|
||||
box-shadow: inset 0 1px 0 rgb(var(--sl-color-neutral-0));
|
||||
box-shadow: inset 0 1px 0 rgb(var(--sl-surface-base));
|
||||
padding: 2px 5px;
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
.markdown-section pre {
|
||||
position: relative;
|
||||
background-color: rgb(var(--sl-color-neutral-50));
|
||||
background-color: rgb(var(--sl-surface-base-alt));
|
||||
border-radius: var(--sl-border-radius-medium);
|
||||
}
|
||||
|
||||
|
|
@ -501,7 +413,7 @@ kbd,
|
|||
}
|
||||
|
||||
.markdown-section tr:nth-child(2n) {
|
||||
background: rgb(var(--sl-color-neutral-50));
|
||||
background: rgb(var(--sl-surface-base));
|
||||
}
|
||||
|
||||
.markdown-section th {
|
||||
|
|
@ -530,7 +442,7 @@ kbd,
|
|||
.markdown-section p.tip,
|
||||
.markdown-section p.warn {
|
||||
position: relative;
|
||||
background-color: rgb(var(--sl-color-neutral-50));
|
||||
background-color: rgb(var(--sl-surface-base-alt));
|
||||
border-left: solid 4px transparent;
|
||||
border-radius: var(--sl-border-radius-medium);
|
||||
padding-left: 1.5rem;
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue