refactor: language dropdown

Alexander Bilz

05.31.2022 2810499b57f4d2db357478c314d93953e4ff7d77

refactor: language dropdown

 assets/css/style.css

@@ -198,9 +198,11 @@
  margin: 0;
} */

/*
main {
  width: var(--content-width);
}
*/
/*
.content {
  height: auto;
@@ -282,7 +284,6 @@

/*
Language Switch
*/

.sl-nav {
  margin: 0;
@@ -357,7 +358,7 @@
  float: left;
  display: block;
}

*/
/*
.sidebar {
  -webkit-background-size: cover;
@@ -659,6 +660,7 @@
  float: right;
}
*/

/*
.footer {
  clear: both;
@@ -743,94 +745,6 @@
}

/* share */
.share {
  margin: 0px 30px;
  display: inline-flex;
}

.evernote {
  width: 32px;
  height: 32px;
  border-radius: 300px;
  background-color: #3e3e3e;
  margin-right: 5px;
}

.evernote a {
  color: #fff;
  padding: 11px;
  font-size: 1.2rem;
}

.evernote a:hover {
  color: #ed6243;
  padding: 11px;
}

.weibo {
  width: 32px;
  height: 32px;
  border-radius: 300px;
  background-color: #ed6243;
  margin-right: 5px;
}

.weibo a {
  color: #fff;
  padding: 9px;
}

.weibo a:hover {
  color: #bd4226;
}

.twitter {
  width: 32px;
  height: 32px;
  border-radius: 300px;
  background-color: #59c0fd;
  margin-right: 5px;
}

.twitter a {
  color: #fff;
  padding: 9px;
}

.twitter a:hover {
  color: #4b9ece;
}

/* about */
.about {
  margin: 30px;
}

.about h3 {
  font-size: 2.2rem;
}

/* links*/
.links {
  margin: 30px;
}

.links h3 {
  font-size: 2.2rem;
}

.links a {
  cursor: pointer;
}

/* Comments */
.comment-count {
  color: #666;
}

.tab-community {
  color: #666;
}

.read_more {
  font-size: 1.4rem;
@@ -843,14 +757,16 @@
  float: left;
}

/* Facebook Comments */
/*
#fb_comments_container {
  margin: 30px;
}


.utterances {
  max-width: unset;
}
*/

/* Buttons */
a.btn {

 assets/scss/main.scss

@@ -16,5 +16,6 @@
@import './partials/components/footer';
@import './partials/components/pagination';
@import './partials/components/comment';
@import './partials/components/languageswitch';
@import './partials/vendors/mediumzoom';
@import './partials/vendors/contactform';

 assets/scss/partials/components/_languageswitch.scss

New file
@@ -0,0 +1,82 @@
.languageswitch {

    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
    display: inline-block;
    padding-right: 20px;
    &__list {
        list-style: none;
        label {
            cursor: pointer;
        }

        &-item {
            .dropdown__list {
                display: none;
                position: absolute;
                top: 29px;
                right: -15px;
                background: $accent;
                border-color: $primary;
                padding-left: 0;
                padding-top: 0px;
                z-index: 1;
                border-radius: 5px;
                box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);

                &-item {
                    position: relative;
                    text-align: left;
                    background: transparent;
                    padding: 12px;
                    z-index: 2;
                    color: $primary;
                    display: block;
                    white-space: nowrap;
                  }

              }

            #languagepicker:checked ~ .dropdown {
                display: block;
              }
        
            #languagepicker:checked ~ .triangle {
                position: absolute;
                top: 15px;
                right: -10px;
                z-index: 10;
                height: 14px;
                overflow: hidden;
                width: 30px;
                background: transparent;
              }
              
              #languagepicker:checked ~ .triangle:after {
                content: '';
                display: block;
                z-index: 20;
                width: 15px;
                transform: rotate(45deg) translateY(0px) translatex(10px);
                height: 15px;
                background: $primary-light;
                border-radius: 2px 0px 0px 0px;
                border-color: $primary;
                box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
                float: left;
                display: block;
              } 
        }
    }  
}