amis 1.3.5-beta.6 → 1.4.2-beta.1

package/scss/components/_column-toggler.scss

@@ -0,0 +1,234 @@
+.#{$ns}ColumnToggler {
+  position: relative;
+  display: inline-block;
+
+  &-caret {
+    margin-left: var(--DropDown-caret-marginLeft);
+    display: inline-block;
+    vertical-align: top;
+    transition: transform var(--animation-duration) ease;
+
+    > svg {
+      width: px2rem(10px);
+      height: px2rem(10px);
+      top: 0.125em;
+    }
+  }
+
+  &.is-opened &-caret {
+    transform: rotate(180deg);
+  }
+
+  &.is-actived > .#{$ns}Button {
+    color: var(--link-color);
+  }
+
+  &--block {
+    display: block;
+
+    .#{$ns}Button {
+      display: block;
+    }
+  }
+
+  &-menu {
+    position: absolute;
+    z-index: $zindex-dropdown;
+    top: 100%;
+    left: 0;
+    margin: px2rem(1px) 0 0;
+    background: var(--DropDown-menu-bg);
+    list-style: none;
+    padding: var(--DropDown-menu-paddingY) var(--DropDown-menu-paddingX);
+    border: var(--DropDown-menu-borderWidth) solid
+      var(--DropDown-menu-borderColor);
+    border-radius: var(--DropDown-menu-borderRadius);
+    box-shadow: var(--DropDown-menu-boxShadow);
+    min-width: var(--DropDown-menu-minWidth);
+    text-align: left;
+  }
+
+  &--alignRight &-menu {
+    left: auto;
+    right: 0;
+  }
+
+  &-menuItem,
+  &-menu > li {
+    padding: var(--DropDown-menuItem-paddingY) var(--DropDown-menuItem-paddingX);
+    white-space: nowrap;
+    box-sizing: border-box;
+    height: var(--DropDown-menu-height);
+    vertical-align: middle;
+    user-select: none;
+    color: var(--link-color);
+    text-decoration: var(--link-decoration);
+
+    &:hover {
+      background: var(--DropDown-menuItem-onHover-bg);
+      color: var(--DropDown-menuItem-onHover-color);
+    }
+
+    &.is-active {
+      color: var(--DropDown-menuItem-onActive-color);
+    }
+
+    &:not(.is-disabled),
+    &:not(.disabled) {
+      cursor: pointer;
+    }
+
+    &.is-disabled {
+      cursor: not-allowed;
+      // pointer-events: none;
+      color: var(--DropDown-menuItem-onDisabled-color);
+      filter: grayscale(80%);
+    }
+
+    &.#{$ns}DropDown-divider {
+      height: px2rem(1px);
+      margin: px2rem(9px) 0;
+      overflow: hidden;
+      background: var(--DropDown-menu-borderColor);
+      padding: 0;
+    }
+  }
+
+  &-menu > li a {
+    color: inherit;
+    display: block;
+    text-decoration: none;
+  }
+
+  &-popover {
+    border: none;
+    box-shadow: none;
+  }
+
+  > .#{$ns}Button {
+    min-width: unset;
+  }
+
+  @mixin flex-layout($direction: row) {
+    display: flex;
+    flex-flow: $direction nowrap;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  &-modal {
+    @include flex-layout(column);
+    width: px2rem(400px);
+    padding: var(--ColumnToggler-lineHeight);
+    margin-top: calc(50vh - 100px);
+    border-radius: var(--ColumnToggler-borderRadius);
+    background: var(--ColumnToggler-backgroundColor);
+    box-shadow: 0 4px 5px 0 rgba(21, 26, 38, 0.06),
+      0 1px 10px 0 rgba(21, 26, 38, 0.05), 0 2px 4px -1px rgba(21, 26, 38, 0.04);
+
+    &-header {
+      width: 100%;
+      @include flex-layout();
+
+      a,
+      span {
+        display: inline-block;
+      }
+
+      .#{$ns}ColumnToggler-modal-title {
+        opacity: 0.95;
+        font-size: var(--fontSizeMd);
+        color: var(--ColumnToggler-title-fontColor);
+        line-height: var(--ColumnToggler-lineHeight);
+        font-weight: bold;
+      }
+    }
+
+    &-content {
+      padding: 0;
+      width: 100%;
+      list-style: none;
+      margin: px2rem(8px) 0;
+
+      .#{$ns}ColumnToggler-menuItem {
+        color: var(--ColumnToggler-title-fontColor);
+        background: var(--ColumnToggler-item-backgroundColor);
+        border-radius: px2rem(2px);
+        font-size: var(--fontSizeSm);
+        padding: px2rem(4px) px2rem(8px);
+        height: var(--ColumnToggler-lineHeight);
+        width: calc((100% - 24px) / 3);
+        float: left;
+        margin: px2rem(4px);
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+
+        &:hover {
+          background: var(--ColumnToggler-item-backgroundColor-onHover);
+        }
+
+        &--dragging {
+          border: 1px solid var(--link-color);
+        }
+
+        label {
+          > i {
+            height: var(--fontSizeLg);
+            width: var(--fontSizeLg);
+            vertical-align: top;
+          }
+        }
+
+        &-dragBar {
+          margin-left: 0;
+          margin-right: var(--gap-xs);
+          cursor: move;
+          color: #d8d8d8;
+        }
+      }
+    }
+
+    &-footer {
+      width: 100%;
+      @include flex-layout();
+
+      .#{$ns}ColumnToggler-modeSelect {
+        color: var(--ColumnToggler-fontColor);
+        font-size: var(--fontSizeSm);
+
+        &.is-actived {
+          color: var(--link-color);
+        }
+      }
+
+      & > div {
+        @include flex-layout();
+
+        &:first-child {
+          justify-content: flex-start;
+
+          a {
+            display: inline-block;
+          }
+        }
+
+        &:last-child {
+          justify-content: flex-end;
+
+          button {
+            width: 72px;
+          }
+        }
+      }
+    }
+  }
+}
+
+.#{$ns}ColumnToggler-tooltip {
+  border: none;
+
+  .#{$ns}Tooltip-arrow::before {
+    border-top-color: transparent;
+  }
+}

package/scss/components/_dropdown.scss

@@ -63,7 +63,7 @@
     height: var(--DropDown-menu-height);
     vertical-align: middle;
     user-select: none;
-    color: var(--link-color);
+    color: var(--DropDown-menuItem-color);
     text-decoration: var(--link-decoration);
 
     &:hover {
@@ -72,6 +72,7 @@
     }
 
     &.is-active {
+      background: var(--DropDown-menuItem-onHover-bg);
       color: var(--DropDown-menuItem-onActive-color);
     }
 

package/scss/components/_image-gallery.scss

@@ -196,7 +196,7 @@
     }
 
     &.is-active {
-      border: 1px solid #108cee;
+      border: 1px solid var(--primary);
       &:after {
         display: none;
       }

package/scss/components/_images.scss

@@ -21,6 +21,7 @@
 
   &-thumbWrap {
     position: relative;
+    height: 100%;
   }
 
   &-image {
@@ -136,7 +137,7 @@
   }
 
   &-overlay {
-    background: rgba(0, 0, 0, 0.6);
+    background: rgba(8, 14, 26, 0.5);
     position: absolute;
     width: 100%;
     height: 100%;

package/scss/components/_link.scss

@@ -0,0 +1,6 @@
+.#{$ns}Link {
+  &.is-disabled {
+    cursor: not-allowed;
+    color: var(--text--muted-color);
+  }
+}

package/scss/components/_markdown.scss

@@ -0,0 +1,266 @@
+.#{$ns}Markdown {
+  strong {
+    font-weight: bolder;
+  }
+
+  img {
+    border-style: none;
+  }
+
+  svg:not(:root) {
+    overflow: hidden;
+  }
+
+  button:-moz-focusring,
+  [type='button']:-moz-focusring,
+  [type='reset']:-moz-focusring,
+  [type='submit']:-moz-focusring {
+    outline: 1px dotted ButtonText;
+  }
+
+  [type='checkbox'] {
+    box-sizing: border-box;
+    padding: 0;
+  }
+
+  table {
+    border-spacing: 0;
+    border-collapse: collapse;
+  }
+
+  table td,
+  table th {
+    padding: 0;
+  }
+
+  hr {
+    height: 0;
+    margin: 15px 0;
+    overflow: hidden;
+    background: transparent;
+    border: 0;
+    border-bottom: 1px solid #ddd;
+  }
+
+  hr::before {
+    display: table;
+    content: '';
+  }
+
+  hr::after {
+    display: table;
+    clear: both;
+    content: '';
+  }
+
+  p {
+    margin-top: 0;
+    margin-bottom: 10px;
+  }
+
+  blockquote {
+    margin: 0;
+  }
+
+  ul,
+  ol {
+    padding-left: 0;
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  ol ol,
+  ul ol {
+    list-style-type: lower-roman;
+  }
+
+  ul ul ol,
+  ul ol ol,
+  ol ul ol,
+  ol ol ol {
+    list-style-type: lower-alpha;
+  }
+
+  dd {
+    margin-left: 0;
+  }
+
+  p,
+  blockquote,
+  ul,
+  ol,
+  dl,
+  table,
+  pre {
+    margin-top: 0;
+    margin-bottom: 16px;
+  }
+
+  hr {
+    height: 4px;
+    padding: 0;
+    margin: 16px 0;
+    background-color: #e7e7e7;
+    border: 0 none;
+  }
+
+  ul:not(.dropdown-menu):not(.nav),
+  ol {
+    padding-left: 2em;
+  }
+
+  ul ul,
+  ul ol,
+  ol ol,
+  ol ul {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  li > p {
+    margin-top: 16px;
+  }
+
+  dl {
+    padding: 0;
+  }
+
+  dl dt {
+    padding: 0;
+    margin-top: 16px;
+    font-size: 1em;
+    font-style: italic;
+    font-weight: bold;
+  }
+
+  dl dd {
+    padding: 0 16px;
+    margin-bottom: 16px;
+  }
+
+  blockquote {
+    padding: 0 15px;
+    color: #777;
+    border-left: 4px solid #ddd;
+  }
+
+  blockquote > :first-child {
+    margin-top: 0;
+  }
+
+  blockquote > :last-child {
+    margin-bottom: 0;
+  }
+
+  table {
+    display: block;
+    width: 100%;
+    overflow: auto;
+    word-break: normal;
+  }
+
+  table th {
+    font-weight: bold;
+  }
+
+  table th,
+  table td {
+    padding: 6px 13px;
+    border: 1px solid #ddd;
+  }
+
+  table tr {
+    background-color: #fff;
+    border-top: 1px solid #ccc;
+  }
+
+  table tr:nth-child(2n) {
+    background-color: #f8f8f8;
+  }
+
+  @media (min-width: 1200px) {
+    img {
+      max-width: 800px;
+    }
+  }
+
+  code {
+    padding: 0;
+    padding-top: 0.2em;
+    padding-bottom: 0.2em;
+    margin: 0;
+    background-color: rgba(0, 0, 0, 0.04);
+    border-radius: 3px;
+  }
+
+  code:before,
+  code:after {
+    letter-spacing: -0.2em;
+    content: '\00a0';
+  }
+
+  pre > code {
+    padding: 0;
+    margin: 0;
+    word-break: normal;
+    white-space: pre;
+    background: transparent;
+    border: 0;
+  }
+
+  .highlight {
+    margin-bottom: 16px;
+  }
+
+  .highlight pre,
+  pre {
+    padding: 16px;
+    overflow: auto;
+    line-height: 1.45;
+    background-color: #f7f7f7;
+    border-radius: 3px;
+  }
+
+  .highlight pre {
+    margin-bottom: 0;
+    word-break: normal;
+  }
+
+  pre {
+    word-wrap: normal;
+  }
+
+  pre code {
+    display: inline;
+    max-width: initial;
+    padding: 0;
+    margin: 0;
+    overflow: initial;
+    line-height: inherit;
+    word-wrap: normal;
+    background-color: transparent;
+    border: 0;
+  }
+
+  pre code:before,
+  pre code:after {
+    content: normal;
+  }
+
+  kbd {
+    display: inline-block;
+    padding: 3px 5px;
+    line-height: 10px;
+    color: #555;
+    vertical-align: middle;
+    background-color: #fcfcfc;
+    border: solid 1px #ccc;
+    border-bottom-color: #bbb;
+    border-radius: 3px;
+    box-shadow: inset 0 -1px 0 #bbb;
+  }
+
+  hr {
+    border-bottom-color: #eee;
+  }
+}