NeilBrommer/BlazorStart
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Actually use SCSS structure in app.scss

Browse source
This commit is contained in:
Neil Brommer 2021-12-08 22:38:49 -08:00
parent 8a5e54d17c
commit 4e9f710162
1 changed files with 63 additions and 65 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

128
Start/Client/Sass/app.scss
View file

@ -23,13 +23,13 @@
position: fixed; position: fixed;
width: 100%; width: 100%;
z-index: 1000; z-index: 1000;
}
#blazor-error-ui .dismiss { .dismiss {
cursor: pointer; cursor: pointer;
position: absolute; position: absolute;
right: 0.75rem; right: 0.75rem;
top: 0.5rem; top: 0.5rem;
}
} }
@ -59,36 +59,36 @@
#sidebar { #sidebar {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
}
#sidebar #sidebarHeading { #sidebarHeading {
padding: 0.5rem 1.5rem; padding: 0.5rem 1.5rem;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
}
#sidebar #sidebarHeading h1 { h1 {
margin: 0; margin: 0;
} }
}
#sidebar .nav { .nav {
padding: 0.5rem 1.5rem; padding: 0.5rem 1.5rem;
} }
#sidebar #sidebarItems { #sidebarItems {
flex: 1; /* Fill remaining space */ flex: 1; /* Fill remaining space */
overflow-y: auto; overflow-y: auto;
} }
#sidebar .accountActions { .accountActions {
border-top: solid 1px #dadee4; border-top: solid 1px #dadee4;
}
#sidebar .accountActions .accountName { .accountName {
font-weight: bold; font-weight: bold;
margin-bottom: 1em; margin-bottom: 1em;
}
}
} }
.off-canvas .off-canvas-content { .off-canvas .off-canvas-content {
@ -103,20 +103,24 @@
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
}
#containerTabStrip #menuButton { #menuButton {
flex: 0 0 auto; flex: 0 0 auto;
margin-right: 1em; margin-right: 1em;
margin-left: 1em; margin-left: 1em;
}
#containerTabStrip .containerList { .icon {
flex: 1 0 0; transform: scale(1.2);
} }
}
#containerTabStrip .containerList .tab-item a { .containerList {
padding: .6rem .4rem .6rem .4rem; flex: 1 0 0;
.tab-item a {
padding: .6rem .4rem .6rem .4rem;
}
}
} }
#bookmarkGroups { #bookmarkGroups {
@ -127,24 +131,18 @@
display: grid; display: grid;
grid-column-gap: 1.25rem; grid-column-gap: 1.25rem;
grid-row-gap: 1.25rem; grid-row-gap: 1.25rem;
}
@media screen and (max-width: 960px) { @media screen and (max-width: 960px) {
#bookmarkGroups {
grid-template-columns: repeat(1, 1fr); grid-template-columns: repeat(1, 1fr);
padding: 1em; padding: 1em;
} }
}
@media screen and (min-width: 960px) { @media screen and (min-width: 960px) {
#bookmarkGroups {
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
width: 60%; width: 60%;
} }
}
@media screen and (min-width: 1440) { @media screen and (min-width: 1440) {
#bookmarkGroups {
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
width: 60%; width: 60%;
} }
@ -152,31 +150,31 @@
.bookmarkGroup { .bookmarkGroup {
width: 100%; width: 100%;
}
.bookmarkGroup .card-header { .card-header {
padding-top: 0; padding-top: 0;
} }
.bookmarkGroup .card-title { .card-title {
margin-top: 0.5em; margin-top: 0.5em;
} }
.bookmarkGroup .card-body { .card-body {
padding: 0; padding: 0;
} }
.bookmarkGroup .card-body:last-child { .card-body:last-child {
padding: 0; padding: 0;
}
} }
ul.bookmarks { ul.bookmarks {
list-style: none; list-style: none;
margin: 0; margin: 0;
}
li.noBookmarksItem { li.noBookmarksItem {
margin-top: 0; margin-top: 0;
}
} }
.addBookmarkGroupButton button { .addBookmarkGroupButton button {