chore(packages): move the packages to root

core/src/components/picker/picker.scss

@@ -0,0 +1,182 @@
+@import "./picker.vars";
+
+// Picker
+// --------------------------------------------------
+
+ion-picker {
+  @include position(0, null, null, 0);
+
+  position: absolute;
+  z-index: $z-index-overlay;
+  display: block;
+
+  width: $picker-width;
+  height: $picker-width;
+
+  contain: strict;
+
+  -webkit-font-smoothing: antialiased;
+  font-smoothing: antialiased;
+}
+
+.picker-toolbar {
+  z-index: 1;
+
+  width: 100%;
+
+  contain: strict;
+}
+
+.picker-wrapper {
+  @include position(null, 0, 0, 0);
+  @include margin(auto);
+  @include transform(translate3d(0, 100%, 0));
+
+  position: absolute;
+  z-index: $z-index-overlay-wrapper;
+  display: flex;
+
+  overflow: hidden;
+
+  flex-direction: column;
+
+  width: $picker-width;
+  max-width: $picker-max-width;
+
+  contain: strict;
+}
+
+.picker-columns {
+  @include margin(null, null, constant(safe-area-inset-bottom), null);
+  @include margin(null, null, env(safe-area-inset-bottom), null);
+
+  position: relative;
+  display: flex;
+
+  overflow: hidden;
+
+  justify-content: center;
+
+  contain: strict;
+
+  @include rtl() {
+    // Date is the same format in both directions
+    flex-direction: row-reverse;
+  }
+}
+
+.picker-col {
+  box-sizing: content-box;
+  position: relative;
+  display: flex;
+
+  flex: 1;
+  justify-content: center;
+
+  height: 100%;
+
+  contain: content;
+}
+
+.picker-opts {
+  position: relative;
+
+  flex: 1;
+
+  max-width: 100%;
+}
+
+.picker-prefix {
+  @include text-align(end);
+
+  position: relative;
+
+  flex: 2;
+
+  min-width: 45%;
+  max-width: 50%;
+
+  white-space: nowrap;
+}
+
+.picker-suffix {
+  @include text-align(start);
+
+  position: relative;
+
+  flex: 2;
+
+  min-width: 45%;
+  max-width: 50%;
+
+  white-space: nowrap;
+}
+
+// contain property is supported by Chrome
+.picker-opt {
+  @include position(0, null, null, 0);
+  @include text-align(center);
+
+  position: absolute;
+
+  display: block;
+  overflow: hidden;
+
+  width: 100%;
+
+  border: 0;
+
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  will-change: transform;
+  contain: strict;
+}
+
+.picker-opt.picker-opt-disabled {
+  pointer-events: none;
+}
+
+.picker-opt-disabled {
+  opacity: 0;
+}
+
+.picker-opts-left {
+  @include ltr() {
+    justify-content: flex-start;
+  }
+
+  @include rtl() {
+    justify-content: flex-end;
+  }
+}
+
+.picker-opts-right {
+  @include ltr() {
+    justify-content: flex-end;
+  }
+
+  @include rtl() {
+    justify-content: flex-start;
+  }
+}
+
+.picker-above-highlight,
+.picker-below-highlight {
+  display: none;
+
+  pointer-events: none;
+}
+
+.picker-button {
+  border: 0;
+  font-family: inherit;
+}
+
+.picker-opt,
+.picker-button {
+  &:active,
+  &:focus {
+    outline: none;
+  }
+}