github.com/System-Glitch/goyave/v2@v2.10.3-0.20200819142921-51011e75d504/docs_src/src/.vuepress/theme/components/settings/UserSettings.vue (about)

     1  <template>
     2    <div class="user-settings">
     3      <a class="settings-button" title="Dark theme" href="#" @click.prevent="toggleDarkTheme">
     4        <DarkThemeIcon class="settings-icon" />
     5      </a>
     6    </div>
     7  </template>
     8  
     9  <script>
    10  import DarkThemeIcon from "@theme/components/settings/DarkThemeIcon.vue";
    11  import darkThemeHandler from "@theme/mixins/darkThemeHandler.js";
    12  
    13  export default {
    14    name: "UserSettings",
    15    mixins: [darkThemeHandler],
    16    components: {
    17      DarkThemeIcon
    18    }
    19  };
    20  </script>
    21  
    22  <style lang="stylus">
    23  @import '../../styles/variables.styl';
    24  
    25  .user-settings {
    26    position: relative;
    27    margin-right: 1em;
    28  
    29    .settings-button {
    30      color: $textColor;
    31      display: flex;
    32      justify-content: center;
    33      align-items: center;
    34      height: 100%;
    35  
    36      .settings-icon {
    37        width: 20px;
    38      }
    39    }
    40  }
    41  
    42  .yuu-theme-dark {
    43    .user-settings-menu {
    44      background-color: $darkPrimaryBg;
    45      border-color: $darkBorderColor;
    46  
    47      &::before {
    48        border-bottom-color: $darkBorderColor;
    49      }
    50    }
    51  }
    52  
    53  @media (max-width: $MQMobile) {
    54    .user-settings {
    55      margin-right: 0;
    56    }
    57  }
    58  </style>