CMS LEFT PANEL > Settings

by Greggg

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.28/css/uikit.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.28/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.28/js/uikit-icons.js"></script>
<div class="pb-sidebar">

  <div class="pb-sidebar-content">

    <div class="pb-sidebar-permissions">

      <a href="#" class="uk-button uk-button-small uk-flex uk-flex-middle pb-sidebar-back-button">
        <span class="test" data-uk-icon="icon: chevron-left"></span>Home
      </a>

      <h3 class="uk-margin-remove-bottom">Permissions</h3>
      <hr class="uk-margin-small-top">
      
      <div class="pb-padding">
      
        <h4 class="uk-margin-remove-bottom">Owner</h4>
        <div class="uk-tile-secondary uk-padding-small uk-grid-collapse uk-flex uk-flex-middle  uk-margin" uk-grid>
          <div class="uk-width-auto">
            <a class="uk-icon-button uk-icon-button-large uk-margin-small-right">GB</a>
          </div>
          <div class="uk-width-expand">
            <h5>Greg Berthelot</h5>
          </div>
        </div>
        <button class="uk-button uk-button-text" onclick="javascript:alert('Open modal');">Transfer ownership</button>
        
      
        <h4 class="uk-margin-remove-bottom">Contributors</h4>
        <div class="uk-tile uk-tile-secondary uk-padding-small uk-grid-collapse uk-flex uk-flex-middle uk-margin" uk-grid>
          <div class="uk-width-auto">
            <a class="uk-icon-button uk-icon-button-large uk-margin-small-right">JD</a>
          </div>
          <div class="uk-width-expand">
            <h5 class="uk-margin-remove">John Doe</h5>
            <span class="uk-text-small">Admin</span>
          </div>
          <div>
            <a uk-icon="icon: trash" onclick="javascript:alert('Confirmation modal');"></a>
          </div>
        </div>   
        
        <div class="uk-tile uk-tile-secondary...

CSS

html {
  background: #444;
  overflow: hidden;
}

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h3 {
  text-transform: uppercase;
  font-size: 1rem;
}

h4 {
  text-transform: uppercase;
  font-size: 0.875rem;
}

.pb-sidebar-content h3,
.pb-sidebar-content > :not(.pb-sidebar-home)  li a {
  padding-left: 20px
}

.pb-sidebar {
  background: #eee;
  box-sizing: border-box;
  display: block;
  position: fixed;
  min-width: 300px;
  max-width: 600px;
  width: 300px;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.pb-sidebar-content {
  box-sizing: border-box;
  position: absolute;
  top: 45px;
  right: 0;
  bottom: 45px;
  left: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.pb-sidebar-home {
  box-sizing: border-box;
  width: 300px;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-transition: left 0.2s ease-in-out;
  transition: left 0.2s ease-in-out;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
}

.pb-reseller-logo {
  height: 50px;
  margin: 140px 0 80px 0;
}

.pb-sidebar-content li:hover {
  background-color: #e5e5e5;
  pointer: cursor;
}

.pb-account-avatar {
  width: 50px;
  height: 50px;
}

.pb-sidebar-device-tools {
  box-sizing: border-box;
  position: absolute;
  min-width: 300px;
  max-width: 600px;
  height: 60px;
  right: 0;
  //bottom: 45px;
  bottom: 0;
  left: 0;
  background: #eee;
  margin: 0;
  padding: 15px;
}

.pb-sidebar-back-button .test {
  -webkit-transition: 0.5s ease;
  transition: 0.5s ease;
}

.pb-sidebar-back-button:hover .test {
  -webkit-transform: translateX(-5px);
  transform: translateX(-5px);
}

.pb-padding {
    padding: 35px;
    box-sizing: border-box;
}

JavaScript

$(".pb-open-website-settings-modal").click(function() {
  console.log('open https://github.com/iPaoo/react-cms/projects/4#card-4171773');
})