pallote-css 0.1.0 → 0.2.1

package/dist/styles/components/_snippet.scss

@@ -0,0 +1,82 @@
+// —————————————————————————————————————————————————————————————————
+// elements
+// default
+// dense
+// —————————————————————————————————————————————————————————————————
+
+// —————————————————————————————————————————————————————————————————
+// elements
+// —————————————————————————————————————————————————————————————————
+
+.snippet {
+  @extend %caption;
+  font-family: "Roboto Mono", Courier, monospace;
+  word-wrap: break-word;
+  width: 100%;
+  position: relative;
+  border-radius: $border-radius-sm;
+  margin: 0;
+  padding: $spacing-sm $spacing-sm*1.5;
+  background-color: $hover;
+  border: $border;
+  
+  & + & {
+    margin-top: $spacing-sm;
+  }
+
+  p > & {
+    margin-right: $spacing-xs;
+    margin-left: $spacing-xs;
+  }
+
+  .tag {
+    font-family: $font;
+    float: right;
+    margin-top: 1px;
+    margin-right: -$spacing-xs;
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// default
+// —————————————————————————————————————————————————————————————————
+
+.snippet--default {
+
+  &:after {
+    @extend %overline;
+    content: "Default";
+    font-family: $font;
+    float: right;
+    margin-top: 1px;
+    margin-right: -$spacing-xs;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: $font-bold;
+    border-radius: $border-radius-sm;
+    white-space: nowrap; // prevent text to go on multiple lines
+    position: absolute;
+    top: $spacing-sm;
+    right: $spacing-md*0.75;
+    height: $spacing-md;
+    padding-right: $spacing-xs;
+    padding-left: $spacing-xs;
+    padding-bottom: 0.1em;
+    background-color: $text-disabled;
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// dense
+// —————————————————————————————————————————————————————————————————
+
+.snippet--dense {
+  @extend %overline;
+  padding: $spacing-xs $spacing-sm !important;
+
+  &.snippet--default:after {
+    top: $spacing-xs;
+    right: $spacing-sm;
+  }
+}

package/dist/styles/components/_status.scss

@@ -0,0 +1,58 @@
+// —————————————————————————————————————————————————————————————————
+// elements
+// color
+// dense
+// —————————————————————————————————————————————————————————————————
+
+$spacing-status: $spacing-sm;
+
+// —————————————————————————————————————————————————————————————————
+// elements
+// —————————————————————————————————————————————————————————————————
+
+.status {
+
+  &:before {
+    content: "";
+    display: inline-block;
+    height: $spacing-status;
+    width: $spacing-status;
+    background-color: $text-alt;
+    border-radius: 50%;
+    margin-right: 0.5em;
+    transform: translateY(-0.05em);
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// color
+// —————————————————————————————————————————————————————————————————
+
+@mixin color($color) {
+
+  &:before {
+    background-color: $color;
+  }
+}
+
+.status {
+
+  &--success { @include color($success); }
+  &--info { @include color($info); }
+  &--warning { @include color($warning); }
+  &--error { @include color($error); }
+}
+
+// —————————————————————————————————————————————————————————————————
+// dense
+// —————————————————————————————————————————————————————————————————
+
+.status--dense {
+  @extend %caption;
+
+  &:before {
+    height: $spacing-status*0.75;
+    width: $spacing-status*0.75;
+    margin-right: $spacing-status*0.75;
+  }
+}

package/dist/styles/components/_switch.scss

@@ -0,0 +1,72 @@
+// —————————————————————————————————————————————————————————————————
+// elements
+// disabled
+// —————————————————————————————————————————————————————————————————
+
+$spacing-switch: $spacing-sm*1.5;
+
+// —————————————————————————————————————————————————————————————————
+// elements
+// —————————————————————————————————————————————————————————————————
+
+.switch {
+  display: flex;
+  align-items: baseline;
+
+  &__input {
+    position: absolute;
+    height: 0;
+    width: 0;
+    opacity: 0;
+    
+    &:checked + .switch__switch {
+      background-color: $primary-light;
+      
+      .switch__toggle {
+        @include calc(left, '100% -'($spacing-switch));
+        background-color: $primary;
+      }
+    }
+  }
+
+  &__label {
+    
+    &:first-child { margin-right: $spacing-switch; }
+    &:last-child { margin-left: $spacing-switch; }
+  }
+
+  &__switch {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    cursor: pointer;
+    width: $spacing-switch*2;
+    height: $spacing-switch;
+    background: $grey-10;
+    border-radius: $spacing-md;
+    position: relative;
+    
+    &:nth-child(2) { margin-left: $spacing-xs; }
+  }
+
+  &__toggle {
+    position: absolute;
+    left: -$spacing-xs;
+    width: $spacing-md;
+    height: $spacing-md;
+    border-radius: $spacing-md;
+    background: $grey-20;
+  }
+}
+  
+// —————————————————————————————————————————————————————————————————
+// disabled
+// —————————————————————————————————————————————————————————————————
+
+.switch--disabled {
+  opacity: 0.4;
+
+  * { 
+    cursor: not-allowed;
+  }
+}

package/dist/styles/components/_tabs.scss

@@ -0,0 +1,115 @@
+// —————————————————————————————————————————————————————————————————
+// elements
+// active
+// direction
+// dense
+// —————————————————————————————————————————————————————————————————
+
+// —————————————————————————————————————————————————————————————————
+// elements
+// —————————————————————————————————————————————————————————————————
+
+.tabs {
+  width: 100%;
+
+  &__controls {
+    display: flex;
+    width: 100%;
+    border-bottom: $border;
+  }
+  
+  &__item {
+    position: relative;
+    cursor: pointer;
+    padding: $spacing-sm $spacing-md;
+    border-top-left-radius: $border-radius-sm;
+    border-top-right-radius: $border-radius-sm;
+    
+    &:after {
+      content: '';
+      position: absolute;
+      bottom: -1px;
+      left: 0;
+      height: 1px;
+      width: 100%;
+    }
+  }
+
+  &__panel {
+    padding: $spacing-md;
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// active
+// —————————————————————————————————————————————————————————————————
+
+.tabs__item:hover,
+.tabs__item--active {
+  background-color: $hover;
+}
+
+.tabs__item--active {
+  color: $primary;
+
+  &:after {
+    background-color: $primary;
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// direction
+// —————————————————————————————————————————————————————————————————
+
+.tabs--portrait {
+  display: flex;
+
+  .tabs {
+
+    &__controls {
+      flex-direction: column;
+      width: 160px;
+      border-bottom: 0;
+      border-right: $border;
+    }
+    
+    &__item {
+      text-align: left;
+      border-top-left-radius: $border-radius-sm;
+      border-top-right-radius: 0;
+      border-bottom-left-radius: $border-radius-sm;
+        
+      &:after {
+        top: 0;
+        right: -1px;
+        left: auto;
+        height: 100%;
+        width: 1px;
+      }
+    }
+
+    &__panel {
+      padding-top: $spacing-sm;
+      padding-bottom: $spacing-sm;
+    }
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// dense
+// —————————————————————————————————————————————————————————————————
+
+.tabs--dense {
+
+  .tabs {
+
+    &__item {
+      @extend %caption;
+      padding: $spacing-xs $spacing-sm;
+    }
+
+    &__panel {
+      padding: $spacing-sm;
+    }  
+  }
+}

package/dist/{components → styles/components}/_tag.scss

@@ -55,9 +55,9 @@
 }
 
 @include color('tag',
-  '' $primary $primary-text,
-  '--secondary' $secondary $secondary-text,
-  '--highlight' $highlight $highlight-text,
+  '' $primary $primary-contrast,
+  '--secondary' $secondary $secondary-contrast,
+  '--highlight' $highlight $highlight-contrast,
   '--grey' $text-disabled $text,
   '--success' $success $success-contrast,
   '--info' $info $info-contrast,

package/dist/{modules → styles/modules}/_cookie.scss

@@ -1,6 +1,6 @@
 .cookie {
+  z-index: 10;
 
-  
   &.section {
     @include transition($transition-md, transform);
     position: fixed;
@@ -14,6 +14,7 @@
     .section__container {
       padding-top: 10px;
       padding-bottom: 9px;
+      display: flex;
       flex-direction: row;
       align-items: baseline;
       justify-content: flex-start;
@@ -26,7 +27,12 @@
   }
 
   &__text {
+    width: 100%;
     display: inline;
     margin-right: $spacing-xs;
   }
+
+  .link {
+    flex-basis: 0;
+  }
 }

package/dist/{utilities → styles/utilities}/_color.scss

@@ -37,14 +37,14 @@
   "grey5" $grey-5 $text-contrast,
 
   "primaryLight" $primary-light $text-contrast,
-  "primary" $primary $primary-text,
-  "primaryDark" $primary-dark $primary-text,
+  "primary" $primary $primary-contrast,
+  "primaryDark" $primary-dark $primary-contrast,
   "secondaryLight" $secondary-light $text-contrast,
-  "secondary" $secondary $secondary-text,
-  "secondaryDark" $secondary-dark $secondary-text,
+  "secondary" $secondary $secondary-contrast,
+  "secondaryDark" $secondary-dark $secondary-contrast,
   "highlightLight" $highlight-light $text-contrast,
-  "highlight" $highlight $highlight-text,
-  "highlightDark" $highlight-dark $highlight-text,
+  "highlight" $highlight $highlight-contrast,
+  "highlightDark" $highlight-dark $highlight-contrast,
 
   "successLight" $success-light $text-contrast,
   "success" $success $success-contrast,

package/dist/{utilities → styles/utilities}/_global.scss

@@ -83,6 +83,7 @@ $step: 5;
 .pos {
 
   &-absolute { position: absolute; }
+  &-relative { position: relative; }
 }
 // —————————————————————————————————————————————————————————————————
 // display

package/package.json

@@ -1,13 +1,16 @@
 {
   "name": "pallote-css",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "description": "CSS component library",
-  "main": "dist/pallote.css",
+  "main": "dist/styles/pallote.css",
   "files": [
     "dist/*"
   ],
   "scripts": {
-    "build": "sass dist/pallote.scss dist/pallote.css",
+    "dev": "bundle exec jekyll serve & onchange 'dist/styles/**/*.scss' 'dist/scripts/**/*.js' -- npm run build",
+    "build": "npm run build:css && npm run build:js",
+    "build:css": "sass dist/pallote.scss dist/pallote.min.css --style=compressed",
+    "build:js": "uglifyjs dist/scripts/*.js -o dist/pallote.min.js",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
@@ -26,6 +29,8 @@
   },
   "homepage": "https://github.com/ArnaudDarre/pallote-css#readme",
   "devDependencies": {
-    "sass": "^1.71.1"
+    "onchange": "^7.1.0",
+    "sass": "^1.71.1",
+    "uglify-js": "^3.17.4"
   }
 }

package/dist/components/_navbar.scss

@@ -1,207 +0,0 @@
-// —————————————————————————————————————————————————————————————————
-// navbar
-// nav
-// —————————————————————————————————————————————————————————————————
-
-// —————————————————————————————————————————————————————————————————
-// navbar
-// —————————————————————————————————————————————————————————————————
-
-.navbar {
-  top: 0;
-  left: 0;
-  width: 100vw;
-  background-color: $background-paper;
-  box-shadow: $box-shadow;
-
-  @include responsive(up, tablet) {
-    height: $navbar-height;
-  }
-
-  &.section {
-    position: sticky;
-    border-bottom: $border;
-  }
-
-  .section__container {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    padding-top: 0;
-    padding-bottom: 0;
-
-    @include responsive(up, tablet) {
-      height: 100%;
-    }
-
-    @include responsive(down, tablet) {
-      flex-direction: column;
-      align-items: stretch;
-      padding-top: 0;
-    }
-  }
-
-  &__button {
-    top: $spacing-md*1.5;
-    position: absolute;
-  }
-
-  &__main {
-    display: flex;
-    align-items: center;
-
-    @include responsive(down, tablet) {
-      justify-content: space-between;
-      padding-left: $spacing-lg;
-      height: $spacing-xl - $spacing-md;
-    }
-  }
-
-  &__logo {
-    display: flex;
-    align-items: baseline;
-    font-weight: $font-bold;
-
-    > * {
-      margin-right: $spacing-xs;
-    }
-  }
-
-  &__nav.nav {
-
-    @include responsive(down, tablet) {
-      @include transition($transition-md, max-height);
-      align-items: flex-start;
-      max-height: 0;
-      overflow: hidden;
-
-      .js-opened & {
-        max-height: 50vh;
-      }
-    }
-  }
-}
-
-// —————————————————————————————————————————————————————————————————
-// nav
-// —————————————————————————————————————————————————————————————————
-
-// .nav {
-
-//   @include responsive(up, tablet) {
-//     height: 100%;
-//   }
-
-//   &__container {
-//     display: flex;
-//     list-style: none;
-
-//     @include responsive(up, tablet) {
-//       height: 100%;
-//       align-items: center;
-//     }
-
-//     @include responsive(down, tablet) {
-//       @include calc(max-height, '100vh - '$spacing-xl*3);
-//       align-items: flex-start;
-//       // overflow: scroll;
-//       width: 100%;
-//       padding-bottom: $spacing-md;
-//       flex-direction: column;
-//       width: 100%;
-//     }
-//   }
-
-//   &__item {
-//     // override ul & li styling
-//     margin-left: 0;
-
-//     & + & {
-//       padding-top: 0;
-//     }
-
-//     @include responsive(up, tablet) {
-//       margin-left: $spacing-sm;
-//     }
-
-//     @include responsive(down, tablet) {
-//       width: 100%;
-//       display: flex;
-//     }
-//   }
-
-//   &__trigger {
-//     position: relative;
-//     display: inline-flex;
-//     flex-direction: column;
-//     align-items: center;
-//     justify-content: center;
-//     position: relative;
-//     line-height: 1;
-//     height: $spacing-md*2;
-//     color: inherit;
-//     padding-right: $spacing-md;
-//     padding-left: $spacing-md;
-//     font-weight: $font-bold;
-
-//     @include responsive(down, tablet) {
-//       width: 100%;
-//       margin-bottom: $spacing-xs;
-//       padding: $spacing-md - $spacing-xs;
-//       align-items: flex-start;
-//       border-radius: $border-radius-sm;
-
-//       @include hover {
-//         background-color: $background-paper;
-//       }
-//     }
-
-//     @include responsive(up, tablet) {
-
-//       &:before {
-//         @include transition($transition-md, opacity);
-//         content: "";
-//         position: absolute;
-//         top: 0;
-//         right: 0;
-//         bottom: 0;
-//         left: 0;
-//         background-color: $background-paper;
-//         border-radius: $border-radius-sm;
-//         z-index: -1;
-//         opacity: 0;
-//       }
-
-//       @include hover {
-
-//         &:before {
-//           opacity: 1;
-//         }
-//       }
-//     }
-
-//     &--active {
-//       color: $primary;
-
-//       @include responsive(up, tablet) {
-
-//         &:after {
-//           content: "";
-//           position: absolute;
-//           bottom: -14px;
-//           left: 0;
-//           width: 100%;
-//           height: $spacing-sm;
-//           background-color: $primary;
-//           border-top-left-radius: $border-radius-sm;
-//           border-top-right-radius: $border-radius-sm;
-//         }
-//       }
-
-//       @include responsive(down, tablet) {
-//         background-color: $background-paper;
-//       }
-//     }
-//   }
-// }

package/dist/components/_sidebar.scss

@@ -1,27 +0,0 @@
-.sidebar {
-  @include calc(height, '100vh - '$navbar-height);
-  position: sticky;
-  flex-shrink: 0;
-  border-right: $border;
-  width: 200px;
-  top: $navbar-height;
-  padding: $spacing-lg $spacing-md;
-  overflow-y: scroll;
-  scrollbar-color: light;
-
-  &__nav {
-    flex-direction: column;
-    
-    .nav {
-
-      &__group {
-        flex-direction: column;
-        align-items: stretch;
-      }
-
-      &__trigger {
-        width: 100%;
-      }
-    }
-  }
-}