123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318 |
- .sidebar {
- width: 14rem;
- visibility: hidden;
- padding: 30px 20px;
- font-family: $title-secondary-font;
- font-size: $font-S;
- background-color: $gray-darker;
- z-index: $zIndex-9--sidebar;
- overflow-x: hidden;
- overflow-y: scroll;
- -webkit-transition: all .3s ease-in-out;
- transition: all .3s ease-in-out;
- -moz-user-select: -moz-none;
- -webkit-user-select: none;
- -ms-user-select: none;
- -o-user-select: none;
- user-select: none;
- -webkit-overflow-scrolling: touch !important;
- &::-webkit-scrollbar {
- width: 12px;
- }
- &::-webkit-scrollbar-track {
- -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
- border-radius: 10px;
- }
- &::-webkit-scrollbar-thumb {
- border-radius: 10px;
- -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
- }
- }
- .sidebar--left {
- position: fixed;
- top: 0;
- bottom: 0;
- left: -14rem;
- }
- .sidebar--right {
- position: fixed;
- top: 0;
- bottom: 0;
- right: -14rem;
- }
- .postWrapper,
- .sidebar,
- .sidebar-toggle {
- -webkit-backface-visibility: hidden;
- -ms-backface-visibility: hidden;
- backface-visibility: hidden;
- }
- .sidebar-checkbox {
- display: none;
- }
- .sidebar-toggle-wrapper {
- position: fixed;
- z-index: $zIndex-5--sidebar-toggle-wrapper;
- top: 30px;
- right: 3%;
- width: 44px;
- height: 44px;
- overflow: hidden;
- text-indent: 100%;
- white-space: nowrap;
- cursor: pointer;
- border-radius: 99px;
- background-color: $white;
- }
- .sidebar-toggle-wrapper:hover .sidebar-toggle {
- background-color: #666;
- }
- .sidebar-toggle {
- position: absolute;
- z-index: $zIndex-6--sidebar-toggle;
- top: 48%;
- left: 50%;
- margin-left: -10px;
- display: block;
- width: 20px;
- height: 2px;
- background: $black;
-
- border-radius: 4px; */
- -webkit-transition: background 0.3s;
- -moz-transition: background 0.3s;
- transition: background 0.3s;
- &:before,
- &:after {
- content: '';
- position: absolute;
- left: 0;
- background: inherit;
- width: 100%;
- height: 100%;
- -webkit-transform: translateZ(0);
- -moz-transform: translateZ(0);
- -ms-transform: translateZ(0);
- -o-transform: translateZ(0);
- transform: translateZ(0);
- -webkit-backface-visibility: hidden;
- backface-visibility: hidden;
- -webkit-transition: -webkit-transform 0.5s, background 0s;
- -moz-transition: -moz-transform 0.5s, background 0s;
- transition: transform 0.5s, background 0s;
- }
- &:before {
- top: -6px;
- -webkit-transform: rotate(0);
- -moz-transform: rotate(0);
- -ms-transform: rotate(0);
- -o-transform: rotate(0);
- transform: rotate(0);
- }
- &:after {
- bottom: -6px;
- -webkit-transform: rotate(0);
- -moz-transform: rotate(0);
- -ms-transform: rotate(0);
- -o-transform: rotate(0);
- transform: rotate(0);
- }
- }
- background: $black;
- } */
- #sidebar-checkbox:checked ~ .sidebar,
- #sidebar-checkbox:checked ~ .sidebar-toggle-wrapper {
- -webkit-transform: translateX(-14rem);
- -ms-transform: translateX(-14rem);
- transform: translateX(-14rem);
- }
- .sidebar-toggle:active,
- #sidebar-checkbox:checked ~ .sidebar-toggle-wrapper {
- position: fixed;
- background-color: rgba($black,0.8);
- }
- #sidebar-checkbox:checked ~ .sidebar-toggle-wrapper .sidebar-toggle {
- background: transparent;
- &:before,
- &:after {
- background: $white;
- }
- &:before {
- top: 0;
- -webkit-transform: rotate(135deg);
- -moz-transform: rotate(135deg);
- -ms-transform: rotate(135deg);
- -o-transform: rotate(135deg);
- transform: rotate(135deg);
- }
- &:after {
- bottom: 0;
- -webkit-transform: rotate(225deg);
- -moz-transform: rotate(225deg);
- -ms-transform: rotate(225deg);
- -o-transform: rotate(225deg);
- transform: rotate(225deg);
- }
- }
- #sidebar-checkbox:checked ~ .sidebar {
- visibility: visible;
- }
- .postWrapper,
- .sidebar-toggle-wrapper {
- -webkit-transition: -webkit-transform .3s ease-in-out;
- transition: transform .3s ease-in-out;
- }
- .sidebar-recentPosts {
- list-style: none;
- margin: $leading 0 0;
- padding: 0;
- font-size: $font-XS;
- a,
- a:hover {
- text-decoration: none;
- background-image: none;
- }
- a {
- display: block;
- letter-spacing: 0.05rem;
- font-weight: 700;
- line-height: 1.5;
- color: rgba($white,.8);
- }
- a:hover {
- color: rgba($white,1);
- }
- li {
- list-style: none;
- margin-bottom: $leading;
- }
- .postMeta {
- font-size: $font-XS;
- color: rgba($white,.4);
- }
- }
- .sidebar-recentPosts-image-wrapper {
- display: block;
- width: 100%;
- height: 3 * $leading;
- background: #333;
- overflow: hidden;
- margin-bottom: 15px;
- img {
- min-height: 3 * $leading;
- width: 150%;
- height: auto;
- position: relative;
- left: 50%;
- transform: translateX(-50%);
- }
- }
- .menuWrapper {
- position: absolute;
- z-index: $zIndex-5--sidebar-toggle-wrapper;
- top: 30px;
- left: 3%;
- }
- .menuWrapper ul {
- list-style: none;
- position: relative;
- float: left;
- margin: 0;
- padding: 0;
- li {
- position: relative;
- float: left;
- list-style: none;
- margin: 0;
- padding: 0;
- }
- a {
- display: block;
- color: #333;
- text-decoration: none;
- padding: 0 15px;
- }
- ul {
- display: none;
- position: absolute;
- top: 100%;
- left: 0;
- background: #fff;
- padding: 0;
- }
- }
- .menuWrapper ul li:hover {
-
- opacity: 0.8;
- > ul {
- display: block;
- }
- }
- .list--avatarMenu {
- .list-item {
- float: none;
- width: 200px;
- }
- a {
- padding: 10px 15px;
- }
- }
|