superconductor 0.0.4 → 0.1.0

data/assets/__pm.scss

@@ -0,0 +1,261 @@
+@import 'colors';
+@import 'pm_tasks';
+@import 'pm_commits';
+@import 'pm_setup';
+
+#__pm__panel {
+  @import 'checkbox';
+  @import 'details';
+  @import 'buttons';
+  @import 'tokens';
+
+  background:         linear-gradient(top, $color0, mix($color0, $color3, 75%));
+  //background: -webkit-linear-gradient(top, $color0, mix($color0, $color3, 75%));
+  background-color: $color0;
+  border-bottom: 0;
+  $grey1: #B8B7B7;
+  $grey2: #E5E5E5;
+  $grey3: #A3A3A3;
+  border-color: $grey1 $grey2 $grey3;
+  border-style: solid;
+  border-width: 1px;
+  bottom: 0;
+  color: $color5;
+  font-family: 'Helvetica Neue', 'Gill Sans', 'Lucida Grande', sans-serif;
+  font-size: 10pt;
+  font-weight: 400;
+  height: 50%;
+  left: 0;
+  line-height: 2em;
+  opacity: 0;
+  pointer-events: none;
+  position: fixed;
+  right: 0;
+  transform: scale(1.015);
+  transition: all 250ms ease-out;
+
+  * {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+  }
+
+  .no-transition {
+    transition: none; // !important;
+  }
+
+  &.open {
+    opacity: 1;
+    pointer-events: auto;
+    transform: scale(1);
+  }
+
+  &.blocking,
+  &.blocking * {
+    pointer-events: none;
+  }
+
+  ul {
+    padding-left: 5pt;
+  }
+
+  hr {
+    border: dotted $color4 0;
+    border-bottom-width: 1px;
+  }
+
+  $grey: darken($color-base, 25%);
+
+  textarea,
+  input[type=text],
+  input[type=email],
+  input[type=number],
+  .select {
+    border: solid $grey 1px;
+    display: block;
+    font-family: inherit;
+    font-size: 1em;
+    line-height: 2em;
+    padding: 0 0.5em;
+    width: 100%;
+
+    &:focus {
+      box-shadow: 0 0 0.1em $color2;
+    }
+  }
+
+  textarea {
+    height: 10em;
+    line-height: 1.25em;
+    padding: 0.5em;
+    resize: none;
+  }
+
+  .select {
+    height: 2em;
+    position: relative;
+
+    > input {
+      border: 0;
+      height: calc(2em - 3px);
+      margin: 0 4em 0 -0.5em;
+      position: absolute;
+      width: calc(100% - 2.1em);
+      z-index: 1;
+    }
+
+    > select {
+      height: 2em;
+      left: 0;
+      opacity: 0;
+      position: absolute;
+      top: 0;
+      width: 100%;
+      z-index: 0;
+    }
+
+    &:focus {
+      box-shadow: 0 0 0.1em $color2;
+    }
+
+    &::before {
+      border-left: solid $grey 1px;
+      content: '\025BE';
+      line-height: 2em;
+      position: absolute;
+      right: 0;
+      text-align: center;
+      width: 2em;
+    }
+  }
+
+  menu {
+    background-color: $color0;
+    border: solid $grey 1px;
+    box-shadow: 2pt 2pt 2pt $grey;
+    cursor: default;
+    display: block;
+    margin-left: -5pt;
+    margin-top: -5pt;
+    min-width: 100pt;
+    position: fixed;
+    z-index: 10;
+  }
+
+  menuitem {
+    display: block;
+    padding-left: 5pt;
+
+    &:hover {
+      background-color: $color3;
+      color: $color-base;
+    }
+
+    &.warning {
+      color: $color1;
+    }
+
+    &.warning:hover {
+      background-color: $color1;
+      color: $color-base;
+    }
+  }
+
+  .diff {
+    max-height: 100%;
+    max-width: 67%;
+    overflow-y: scroll;
+
+    ol.lines,
+    pre {
+      float: left;
+      font-family: 'Andale Mono', "Monaco", monospace;
+      font-size: 10pt;
+      font-weight: 100;
+      line-height: 1.15em;
+      width: calc(100% - 3em);
+    }
+
+    ol.lines {
+      background-color: $color3;
+      color: $color4;
+      padding-left: 5pt;
+      width: 3em;
+    }
+
+    img {
+      display: block;
+      margin: 1em 0;
+      max-height: 100%;
+      max-width: calc(100% - 1em);
+    }
+
+    pre {
+      font-size: calc(1em + 1px);
+      white-space: pre-wrap;
+      width: 100%;
+
+      label {
+        background-color: $color0;
+        color: $color5;
+        display: block;
+        line-height: 2em;
+        margin-left: calc(-1em);
+      }
+
+      label::before {
+        content: '≡';
+        font-size: 1.5em;
+        margin: 0 0.5em;
+      }
+
+      .meta {
+        display: none;
+      }
+
+      .sub {
+        background-color: $color1;
+        position: relative;
+      }
+
+      .sub::before {
+        background-color: lighten($color1, 10%);
+        content: '<';
+        display: block;
+        left: -1em;
+        position: absolute;
+        text-align: center;
+        top: 0;
+        width: 1em;
+      }
+
+      .add {
+        background-color: $color2;
+        position: relative;
+      }
+
+      .add::before {
+        background-color: lighten($color2, 10%);
+        border-radius: 0.25 0 0 0.25em;
+        content: '>';
+        display: block;
+        left: -1em;
+        position: absolute;
+        text-align: center;
+        top: 0;
+        width: 1em;
+      }
+
+      code {
+        $bound: darken($color4, 10%);
+        background-color: $color4;
+        //background-image: -webkit-linear-gradient(left, $color4, $color4 80em, $bound 80.1em, $bound);
+        background-image:         linear-gradient(left, $color4, $color4 80em, $bound 80.1em, $bound);
+        color: $color0;
+        display: block;
+        padding-left: calc(1em);
+      }
+    }
+  }
+
+}

data/assets/_buttons.scss

@@ -0,0 +1,50 @@
+@import 'colors';
+
+button,
+input[type="submit"],
+.button {
+  $color: $color0;
+  $altcolor: lighten($color, 7%);
+  $invert: invert(grayscale($color));
+  background-color: $color;
+  border: solid mix($invert, $color, 25%) 1px;
+  border-radius: 2pt;
+  border-style: solid;
+  border-width: 1px;
+  box-shadow: inset 0 1em 0.15em $altcolor;
+  color: $invert;
+  cursor: pointer;
+  font-size: 1em;
+  font-weight: bold;
+  height: 2.5em;
+  margin: 0.25em 0;
+  padding: 0 1em;
+  transition: background-color 250ms, box-shadow 250ms;
+
+  &:focus {
+    outline: -webkit-focus-ring-color auto 5px;
+  }
+
+  &:hover {
+    background-color: darken($color, 5%);
+    box-shadow: inset 0 1em 0.15em darken($altcolor, 5%);
+  }
+
+  &:active {
+    color: $color4;
+  }
+
+  &.button--tiny {
+    font-size: 0.75em;
+    height: 1.75em;
+    margin: 0.1em;
+    padding: 0 0.5em;
+  }
+
+  &.button--medium {
+    font-size: 0.75em;
+    height: 2.3em;
+    margin: 0.1em;
+    padding: 0 0.5em;
+  }
+}

data/assets/_checkbox.scss

@@ -0,0 +1,59 @@
+@import 'colors';
+
+input[type="checkbox"] {
+  display: none;
+
+  + label {
+    cursor: pointer;
+    position: relative;
+
+    &::before {
+      background-color: $color0;
+      border: solid 1px $color4;
+      border-radius: 1pt;
+      content: '';
+      display: inline-block;
+      height: 1em;
+      margin-right: 0.25em;
+      text-align: right;
+      vertical-align: middle;
+      width: 1em;
+    }
+
+    &:hover {
+      &::before {
+        background-color: darken($color0, 5%);
+      }
+    }
+  }
+
+  &:checked + label {
+    &::after {
+      content: '✔';
+      font-family: "Lucida Console", monospace;
+      left: 0;
+      line-height: 1.4em;
+      position: absolute;
+      text-align: center;
+      top: 0;
+      width: 1.1em;
+    }
+  }
+
+  &.delete {
+    + label {
+      color: $color1;
+    }
+
+    &:checked + label {
+      &::before {
+        background-color: $color1;
+      }
+
+      &::after {
+        color: $color0;
+        content: '✖';
+      }
+    }
+  }
+}

data/assets/_colors.scss

@@ -0,0 +1,15 @@
+$color-base: #FFF;
+
+$color0: #F7F9FA;
+$color1: #DF151A;
+$color2: #4F57AA;
+$color3: #72818B;
+$color4: #454857;
+$color5: #020303;
+
+$color-done: #00CBE7;
+$color-in-progress: #00DA3C;
+$color-in-review: #F4F328;
+$color-blocked: #DF151A;
+$color-sprint: #F7F9FA;
+$color-backlog: #454857;

data/assets/_details.scss

@@ -0,0 +1,54 @@
+@import 'colors';
+
+fieldset.details {
+  border: 0;
+  min-height: 2em;
+
+  > * {
+    max-height: 0;
+    transition: max-height 250ms, padding 250ms 1ms;
+  }
+
+  > ul { padding: 0 0.5em; }
+
+  legend {
+    cursor: pointer;
+
+    &::before {
+      content: '\25B6';
+      display: inline-block;
+      line-height: 1em;
+      margin-right: 0.5em;
+      transition: transform 250ms ease-in-out;
+    }
+
+    &:focus {
+      outline: -webkit-focus-ring-color auto 5px;
+
+      &::before {
+        transform: translate(1pt, 0);
+      }
+    }
+
+    &:active {
+      &::before {
+        text-shadow: none;
+      }
+    }
+  }
+
+  &.open {
+    > * { max-height: 50vh; }
+    > ul { padding: 0.5em;  }
+    legend {
+      text-shadow: none;
+
+      &::before {
+        text-shadow: none;
+        transform: rotate(90deg);
+      }
+    }
+
+    legend::after { display: none; }
+  }
+}

data/assets/_pm_commits.scss

@@ -0,0 +1,171 @@
+@import 'colors';
+
+#__pm__panel {
+
+  dl.properties {
+    line-height: 2em;
+    margin: 1em;
+    min-height: calc(100% - 5em);
+    position: -webkit-sticky;
+    position: sticky;
+    top: 0;
+    z-index: -1;
+
+    .property {
+      margin-bottom: 1em;
+
+      &.property--inline {
+        display: flex;
+
+        textarea {
+          height: 5em;
+        }
+      }
+
+      dt {
+        min-width: 8em;
+      }
+
+      dd {
+        width: 100%;
+      }
+    }
+  }
+
+  #__pm__commit {
+    display: block;
+    height: 100%;
+    overflow: auto;
+  }
+
+  #__pm__new_commit {
+    background-color: $color0;
+    line-height: 3em;
+    min-height: 3em;
+    position: relative;
+
+    ul#__pm__new_commit__actions {
+      display: flex;
+      list-style-type: none;
+      position: absolute;
+      right: 0;
+      top: 0;
+    }
+
+    input[type='submit'] {
+      margin-left: 5pt;
+    }
+  }
+
+  #__pm__commit__changes {
+    ul {
+      list-style-type: none;
+      line-height: 1.5em;
+      margin-bottom: 1.5em;
+      height: calc(100% - 4.5em);
+      overflow: hidden;
+      li button {
+        float: right;
+        clear: right;
+      }
+      label[for='__pm__changes_all'] {
+        color: #A3A3A3;
+        line-height: 2.5em;
+      }
+    }
+  }
+
+  #__pm__task {
+    background-color: $color0;
+    position: absolute;
+    top: 0;
+    right: 0pt;
+    bottom: 0;
+    border-left: solid 1px #A3A3A3;
+    padding: 5pt;
+    width: 33%;
+    min-width: 300pt;
+    overflow-y: scroll;
+    z-index: 2;
+    input[type="submit"] {
+      float: right;
+    }
+    #__pm__commit__message {
+      height: 2.4em;
+      transition: height 100ms ease-in-out;
+      &:focus { height: calc(25% - 2.5em); }
+    }
+  }
+
+  ul#__pm__commits {
+    list-style-type: none;
+    padding: 0;
+    > li {
+      margin-bottom: 0.5em;
+      padding: 0;
+      line-height: 1.4em;
+      clear: left;
+      > * {
+        margin: 0 0.25em 0 5em;
+      }
+      img {
+        float: left;
+        width: 4em;
+        height: 4em;
+        max-width: 4em;
+        margin: 0.25em;
+        border: solid 1px $color4;
+        border-radius: 2pt;
+      }
+      &:first-child blockquote {
+        border-top: none;
+        padding-top: 0;
+      }
+      blockquote {
+        border-top: dotted $color4 1px;
+        padding-top: 0.5em;
+        .user__name {
+          margin-right: 0.5em;
+          font-weight: bold;
+          font-size: 0.9em;
+          text-decoration: none;
+          color: $color3;
+        }
+      }
+      time {
+        font-size: 0.9em;
+        color: $color3;
+      }
+      button.attachments {
+        margin: 0.5em;
+        float: right;
+      }
+      dl.tasks {
+        margin: 0.5em 0 0.5em 5em;
+        dt { font-size: 0.9em; font-weight: bold; }
+        ul.properties {
+          line-height: 1.75em;
+          list-style-type: none;
+          padding: 0;
+          li {
+            .name { width: 5em; }
+            .name::after   { display: inline; content: ':';   }
+            .before { position: relative; }
+            .before { padding-right: 1em; }
+            .before::after { display: inline; line-height: 1.25em; font-size: 1.5em; position: absolute; right: -0.5em; content: '⇒'; }
+            .before + .after { padding-left: 1.25em; }
+          }
+        }
+      }
+      &.continuous {
+        clear: none;
+        img { display: none; }
+        blockquote {
+          .user__name { display: none; }
+        }
+        &:not(:last-child) time { display: none; }
+      }
+    }
+    &::after { content: ''; display: block; clear: both; }
+  }
+}