@transferwise/neptune-css 0.0.0-experimental-d24552b → 0.0.0-experimental-1d99bea

package/src/less/select.css

@@ -0,0 +1,99 @@
+.tw-select .tw-icon {
+  display: inline-block;
+  margin-right: 8px;
+  margin-right: var(--size-8);
+  margin-top: -2px;
+  vertical-align: middle;
+}
+[dir="rtl"] .tw-select .tw-icon {
+  margin-left: 8px;
+  margin-left: var(--size-8);
+  margin-right: 0;
+  margin-right: initial;
+}
+.tw-select .tw-dropdown-item--clickable {
+  cursor: pointer;
+}
+.tw-select .tw-dropdown-item--divider {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
+  border-bottom-color: rgba(0,0,0,0.10196);
+  border-bottom-color: var(--color-border-neutral);
+}
+.tw-select .tw-dropdown-item--focused {
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--color-background-neutral);
+}
+.tw-select .tw-dropdown-item .currency-flag {
+  margin-right: 8px;
+  margin-right: var(--size-8);
+}
+[dir="rtl"] .tw-select .tw-dropdown-item .currency-flag {
+  margin-left: 8px;
+  margin-left: var(--size-8);
+  margin-right: 0;
+  margin-right: initial;
+}
+.tw-select .tw-dropdown-item > a {
+  white-space: normal;
+}
+.tw-select .dropdown-toggle.btn-input.btn-sm {
+  padding-right: 32px;
+  padding-right: var(--size-32);
+}
+[dir="rtl"] .tw-select .dropdown-toggle.btn-input.btn-sm {
+  padding-left: 32px;
+  padding-left: var(--size-32);
+  padding-right: 0;
+  padding-right: initial;
+}
+.tw-select .dropdown-toggle.btn-input.btn-md {
+  padding-right: 40px;
+  padding-right: var(--size-40);
+}
+[dir="rtl"] .tw-select .dropdown-toggle.btn-input.btn-md {
+  padding-left: 40px;
+  padding-left: var(--size-40);
+  padding-right: 0;
+  padding-right: initial;
+}
+.tw-select .dropdown-toggle.btn-input.btn-lg {
+  padding-right: 48px;
+  padding-right: var(--size-48);
+}
+[dir="rtl"] .tw-select .dropdown-toggle.btn-input.btn-lg {
+  padding-left: 48px;
+  padding-left: var(--size-48);
+  padding-right: 0;
+  padding-right: initial;
+}
+.tw-select .dropdown-toggle tw-chevron-down-icon > span {
+  margin: 0   ;
+}
+[dir="rtl"] .tw-select .dropdown-toggle tw-chevron-down-icon > span {
+  margin: 0   ;
+}
+.tw-select .dropdown-toggle tw-icon span.tw-icon {
+  position: static;
+  display: inline-block;
+}
+.tw-select .circle .tw-icon {
+  vertical-align: middle;
+}
+@media (max-width: 599.98px) {
+  .tw-select.dropdown-menu.dropdown-menu--open {
+    max-height: 50vh;
+    max-height: 50svh;
+    max-width: 100%;
+    opacity: 1;
+    overflow: auto;
+    position: static;
+    transform: none;
+    visibility: visible;
+    width: 100% !important;
+  }
+}
+.tw-select-filter {
+  border: 0;
+}

package/src/less/select.less

@@ -0,0 +1,88 @@
+@import (reference) "../variables/neptune-tokens.less";
+@import (reference) "./mixins/_logical-properties.less";
+
+// Used only by Angular tw-select component
+// http://transferwise.github.io/styleguide-components/index.html#select
+// React Select uses Select.less (`.np-select`) in components package
+.tw-select {
+  .tw-icon {
+    display: inline-block;
+    .margin(right, var(--size-8));
+
+    margin-top: -2px;
+    vertical-align: middle;
+  }
+
+  .tw-dropdown-item {
+    &--clickable {
+      cursor: pointer;
+    }
+
+    &--divider {
+      border-bottom-style: solid;
+      border-bottom-width: 1px;
+      /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
+      border-bottom-color: var(--color-border-neutral);
+    }
+
+    &--focused {
+      background-color: var(--color-background-neutral);
+    }
+
+    .currency-flag {
+      .margin(right, var(--size-8));
+    }
+
+    > a {
+      white-space: normal;
+    }
+  }
+
+  .dropdown-toggle.btn-input {
+    &.btn-sm {
+      .padding(right, var(--size-32));
+    }
+
+    &.btn-md {
+      .padding(right, var(--size-40));
+    }
+
+    &.btn-lg {
+      .padding(right, var(--size-48));
+    }
+  }
+
+  // tw-chevron-down-icon - Angular component
+  .dropdown-toggle tw-chevron-down-icon > span { // stylelint-disable-line selector-type-no-unknown
+    .margin-shorthand(0);
+  }
+
+  // tw-icon - Angular component
+  .dropdown-toggle tw-icon span.tw-icon { // stylelint-disable-line selector-type-no-unknown
+    position: static;
+    display: inline-block;
+  }
+
+  .circle .tw-icon {
+    vertical-align: middle;
+  }
+}
+
+// open options in custom bottom sheet on mobile screens
+@media (--screen-xs-max) {
+  .tw-select.dropdown-menu.dropdown-menu--open {
+    max-height: 50vh;
+    max-height: 50svh;
+    max-width: 100%;
+    opacity: 1;
+    overflow: auto;
+    position: static;
+    transform: none;
+    visibility: visible;
+    width: 100% !important;
+  }
+}
+
+.tw-select-filter {
+  border: 0;
+}