mytril
Version:
Mytril Svelte library component for rapidly building modern websites based on Svelte and Sveltekit
76 lines (64 loc) • 1.33 kB
CSS
.myt-toolbar {
--c: var(--myt-toolbar-c);
--bg: var(--myt-toolbar-bg);
align-items: flex-start;
display: flex;
flex: none;
flex-direction: column;
justify-content: space-between;
max-width: 100%;
position: relative;
width: 100%;
border-radius: var(--myt-toolbar-br);
border-color: transparent;
border-width: 0.063rem;
border-style: solid;
color: var(--c);
background-color: var(--bg);
transition:
color 0.5s,
background-color 0.5s;
}
.myt-toolbar.myt-toolbar--floating {
display: inline-flex;
}
.myt-toolbar.myt-toolbar--text,
.myt-toolbar.myt-toolbar--outline {
background-color: transparent;
}
.myt-toolbar.myt-toolbar--outline {
border-color: currentColor;
}
.myt-toolbar .myt-toolbar--content {
align-items: center;
display: flex;
flex: 0 0 auto;
position: relative;
transition: inherit;
width: 100%;
height: 4rem;
}
.myt-toolbar .myt-toolbar--content {
overflow: hidden;
}
.myt-toolbar .myt-toolbar--content > .myt-toolbar-title {
margin-inline-start: 1.25rem;
}
.myt-toolbar-items {
display: flex;
height: inherit;
align-self: stretch;
}
.myt-toolbar-title {
flex: 1 1;
font-size: 1.25rem;
min-width: 0;
}
.myt-toolbar-title {
font-size: 1.25rem;
}
.myt-toolbar-title .myt-toolbar-title--placeholder {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}