_sass/components/_sidebar.scss in databook-theme-0.1.1 vs _sass/components/_sidebar.scss in databook-theme-0.1.2
- old
+ new
@@ -1,303 +1,303 @@
-.c-profile {
- margin: 0;
- padding: 0;
- text-align: center;
-
- &__image {
- @include flex-center;
-
- border-radius: 128px;
- margin: 2rem auto;
- height: 128px;
- width: 128px;
-
- border: 1px solid var(--db-border-color-inactive);
- background: white;
-
- & img {
- max-width: 80%;
- max-height: 80%;
- }
- }
-
- &__title {
- font-weight: bold;
- font-size: 1.5em;
- margin: .5rem auto;
- color: var(--db-text-color-active);
- }
-
- &__subtitle {
- color: var(--db-text-color-inactive);
- margin: .25rem auto;
- }
-
- &__description {
- margin: 1rem 0;
- color: var(--db-text-color-inactive);
- }
-
-}
-
-.c-navlist {
- margin-top: 1rem;
- user-select: none;
-
- &__item {
- text-align: center;
-
- &::before,
- &:last-of-type::after {
- background-image: linear-gradient(to left, transparent, var(--db-border-color) 30%, var(--db-border-color) 70%, transparent);
- content: "";
- display: block;
- height: 2px;
- width: 100%;
- opacity: 0.6;
- }
-
- &:hover {
- background-image: linear-gradient(to left, transparent, var(--db-surface-hover-color) 30%, var(--db-surface-hover-color) 70%, transparent);
- }
-
- &.is-active {
- font-weight: bold;
- }
- }
-
- &__link {
- color: inherit;
- display: block;
- padding: .5rem;
- text-decoration: none;
- text-overflow: ellipsis;
-
- &:not([href]):not([onclick]):hover {
- color: inherit;
- text-decoration: none;
- }
- }
-
-}
-
-.c-sociallist {
- display: table;
- color: var(--db-text-color-inactive);
- vertical-align: top;
- margin: 2rem auto;
-
- &__item {
- font-size: .875em;
- }
-
- &__icon {
- width: 1.5rem;
- text-align: center;
- padding-bottom: .5rem;
- }
-
- &__text {
- text-align: left;
- padding-bottom: .5rem;
- }
-
- a {
- color: inherit;
- text-decoration: none;
-
- &:hover {
- color: var(--db-text-color-active);
- text-decoration: underline;
- }
- }
-
-}
-
-.c-navtree {
- display: flex;
- flex-direction: column;
- flex: 1;
- padding: 0;
- user-select: none;
-
- &__group {
- &:not(&--bottom) {
- margin-bottom: 1rem;
- }
-
- &:not(&--bottom) + &--bottom {
- margin-top: auto;
- }
- }
-
- &__label {
- font-size: small;
- font-weight: bold;
- padding: .5em;
- margin-top: .5rem;
- color: var(--db-text-color-inactive);
- opacity: .75;
-
- &::after {
- background-image: linear-gradient(to right, var(--db-border-color) 33%, transparent);
- content: "";
- display: block;
- margin-top: .25rem;
- height: 2px;
- width: 100%;
- opacity: 0.6;
- }
- }
-
- &__item {
- display: flex;
- flex-direction: row;
- border: 1px solid transparent;
- border-radius: $border-radius-control;
- margin: 2px 0;
- overflow: hidden;
-
- &.is-active {
- font-weight: bold;
- }
-
- &:not(.is-disabled) .c-navtree__link:hover,
- &:not(.is-disabled) .c-navtree__link:hover + .c-navtree__toggle {
- background-color: var(--db-surface-hover-color);
- }
-
- &.is-disabled {
- color: var(--db-text-color-disabled);
- }
-
- }
-
- &__link {
- display: flex;
- text-overflow: ellipsis;
- overflow: hidden;
- padding: 8px 0 8px 8px;
- align-items: center;
- flex: 1;
- border: 1px solid transparent;
- color: inherit;
-
- &:hover {
- text-decoration: none;
- color: inherit;
- }
- }
-
- &__icon {
- width: 1.5rem;
- text-align: center;
- color: var(--db-text-color-inactive);
- opacity: .88;
- }
-
- &__badge {
- width: 2.4rem;
- text-align: center;
- color: var(--db-text-color-inactive);
- opacity: .88;
- }
-
- &__text {
- flex: 1;
- padding: 0 4px;
- }
-
- &__button {
- color: var(--db-text-color-inactive);
- width: 2.4rem;
- display: flex;
- align-items: center;
- justify-content: center;
- user-select: none;
-
- &--toggle {
- &::before {
- font-family: 'Font Awesome 5 Free';
- content: "\f067";
- font-weight: 600;
-
- @at-root .is-expanded #{&} {
- content: "\f068";
- }
- }
- }
-
- &:hover {
- color: var(--db-text-color-active);
- background-color: var(--db-surface-hover-color);
- }
- &[href]:hover,
- &[onclick]:hover {
- cursor: pointer;
- }
- }
-
- &__list {
- flex-direction: column;
- display: none;
- font-size: .8em;
- padding-left: 2rem;
-
- .c-navtree__icon {
- font-size: xx-small;
- }
-
- .c-navtree__link {
- padding: 6px 8px;
- font-size: 15px;
- }
-
- @at-root .is-expanded + #{&} {
- display: inherit;
- }
-
- }
-
-}
-
-$sidebutton-size: 2rem;
-.c-sidebuttons {
- @include flex-center;
- margin-top: auto;
-
- &__item {
- border: 1px solid var(--db-border-color);
- color: var(--db-text-color-inactive);
- border-radius: $sidebutton-size;
- margin: $sidebutton-size / 4;
- width: $sidebutton-size;
- height: $sidebutton-size;
- line-height: $sidebutton-size;
- text-align: center;
-
- &:hover {
- background-color: var(--db-surface-hover-color);
- color: var(--db-text-color-active);
- text-decoration: none;
- }
- }
-
- &__link {
- color: inherit;
- text-decoration: none;
- display: block;
-
- &:hover {
- color: inherit;
- text-decoration: none;
- }
- }
-}
-
-.c-texticon {
- font-family: monospace;
- margin: auto;
- overflow: hidden;
- white-space: nowrap;
- width: 2ch;
-}
+.c-profile {
+ margin: 0;
+ padding: 0;
+ text-align: center;
+
+ &__image {
+ @include flex-center;
+
+ border-radius: 128px;
+ margin: 2rem auto;
+ height: 128px;
+ width: 128px;
+
+ border: 1px solid var(--db-border-color-inactive);
+ background: white;
+
+ & img {
+ max-width: 80%;
+ max-height: 80%;
+ }
+ }
+
+ &__title {
+ font-weight: bold;
+ font-size: 1.5em;
+ margin: .5rem auto;
+ color: var(--db-text-color-active);
+ }
+
+ &__subtitle {
+ color: var(--db-text-color-inactive);
+ margin: .25rem auto;
+ }
+
+ &__description {
+ margin: 1rem 0;
+ color: var(--db-text-color-inactive);
+ }
+
+}
+
+.c-navlist {
+ margin-top: 1rem;
+ user-select: none;
+
+ &__item {
+ text-align: center;
+
+ &::before,
+ &:last-of-type::after {
+ background-image: linear-gradient(to left, transparent, var(--db-border-color) 30%, var(--db-border-color) 70%, transparent);
+ content: "";
+ display: block;
+ height: 2px;
+ width: 100%;
+ opacity: 0.6;
+ }
+
+ &:hover {
+ background-image: linear-gradient(to left, transparent, var(--db-surface-hover-color) 30%, var(--db-surface-hover-color) 70%, transparent);
+ }
+
+ &.is-active {
+ font-weight: bold;
+ }
+ }
+
+ &__link {
+ color: inherit;
+ display: block;
+ padding: .5rem;
+ text-decoration: none;
+ text-overflow: ellipsis;
+
+ &:not([href]):not([onclick]):hover {
+ color: inherit;
+ text-decoration: none;
+ }
+ }
+
+}
+
+.c-sociallist {
+ display: table;
+ color: var(--db-text-color-inactive);
+ vertical-align: top;
+ margin: 2rem auto;
+
+ &__item {
+ font-size: .875em;
+ }
+
+ &__icon {
+ width: 1.5rem;
+ text-align: center;
+ padding-bottom: .5rem;
+ }
+
+ &__text {
+ text-align: left;
+ padding-bottom: .5rem;
+ }
+
+ a {
+ color: inherit;
+ text-decoration: none;
+
+ &:hover {
+ color: var(--db-text-color-active);
+ text-decoration: underline;
+ }
+ }
+
+}
+
+.c-navtree {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ padding: 0;
+ user-select: none;
+
+ &__group {
+ &:not(&--bottom) {
+ margin-bottom: 1rem;
+ }
+
+ &:not(&--bottom) + &--bottom {
+ margin-top: auto;
+ }
+ }
+
+ &__label {
+ font-size: small;
+ font-weight: bold;
+ padding: .5em;
+ margin-top: .5rem;
+ color: var(--db-text-color-inactive);
+ opacity: .75;
+
+ &::after {
+ background-image: linear-gradient(to right, var(--db-border-color) 33%, transparent);
+ content: "";
+ display: block;
+ margin-top: .25rem;
+ height: 2px;
+ width: 100%;
+ opacity: 0.6;
+ }
+ }
+
+ &__item {
+ display: flex;
+ flex-direction: row;
+ border: 1px solid transparent;
+ border-radius: $border-radius-control;
+ margin: 2px 0;
+ overflow: hidden;
+
+ &.is-active {
+ font-weight: bold;
+ }
+
+ &:not(.is-disabled) .c-navtree__link:hover,
+ &:not(.is-disabled) .c-navtree__link:hover + .c-navtree__toggle {
+ background-color: var(--db-surface-hover-color);
+ }
+
+ &.is-disabled {
+ color: var(--db-text-color-disabled);
+ }
+
+ }
+
+ &__link {
+ display: flex;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ padding: 8px 0 8px 8px;
+ align-items: center;
+ flex: 1;
+ border: 1px solid transparent;
+ color: inherit;
+
+ &:hover {
+ text-decoration: none;
+ color: inherit;
+ }
+ }
+
+ &__icon {
+ width: 1.5rem;
+ text-align: center;
+ color: var(--db-text-color-inactive);
+ opacity: .88;
+ }
+
+ &__badge {
+ width: 2.4rem;
+ text-align: center;
+ color: var(--db-text-color-inactive);
+ opacity: .88;
+ }
+
+ &__text {
+ flex: 1;
+ padding: 0 4px;
+ }
+
+ &__button {
+ color: var(--db-text-color-inactive);
+ width: 2.4rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ user-select: none;
+
+ &--toggle {
+ &::before {
+ font-family: 'Font Awesome 5 Free';
+ content: "\f067";
+ font-weight: 600;
+
+ @at-root .is-expanded #{&} {
+ content: "\f068";
+ }
+ }
+ }
+
+ &:hover {
+ color: var(--db-text-color-active);
+ background-color: var(--db-surface-hover-color);
+ }
+ &[href]:hover,
+ &[onclick]:hover {
+ cursor: pointer;
+ }
+ }
+
+ &__list {
+ flex-direction: column;
+ display: none;
+ font-size: .8em;
+ padding-left: 2rem;
+
+ .c-navtree__icon {
+ font-size: xx-small;
+ }
+
+ .c-navtree__link {
+ padding: 6px 8px;
+ font-size: 15px;
+ }
+
+ @at-root .is-expanded + #{&} {
+ display: inherit;
+ }
+
+ }
+
+}
+
+$sidebutton-size: 2rem;
+.c-sidebuttons {
+ @include flex-center;
+ margin-top: auto;
+
+ &__item {
+ border: 1px solid var(--db-border-color);
+ color: var(--db-text-color-inactive);
+ border-radius: $sidebutton-size;
+ margin: $sidebutton-size / 4;
+ width: $sidebutton-size;
+ height: $sidebutton-size;
+ line-height: $sidebutton-size;
+ text-align: center;
+
+ &:hover {
+ background-color: var(--db-surface-hover-color);
+ color: var(--db-text-color-active);
+ text-decoration: none;
+ }
+ }
+
+ &__link {
+ color: inherit;
+ text-decoration: none;
+ display: block;
+
+ &:hover {
+ color: inherit;
+ text-decoration: none;
+ }
+ }
+}
+
+.c-texticon {
+ font-family: monospace;
+ margin: auto;
+ overflow: hidden;
+ white-space: nowrap;
+ width: 2ch;
+}