@arco-design/mobile-react 2.26.0 → 2.27.0

package/dist/style.css

@@ -3315,6 +3315,221 @@ samp {
   stroke: #ffffff;
 }
 
+
+.arco-index-bar {
+  position: relative;
+  background:  white ;
+  overflow: hidden;
+}
+.arco-index-bar-container {
+  height: 100%;
+  overflow-y: auto;
+}
+.arco-index-bar-container::-webkit-scrollbar {
+  display: none;
+}
+.arco-index-bar-group-active {
+  color:  #165dff ;
+}
+.arco-index-bar-group-title {
+  padding-left:  0.32rem ;
+  height:  0.48rem ;
+  background:  #f7f8fa ;
+  font-size:  0.28rem ;
+  color:  #86909c ;
+  display: flex;
+  align-items: center;
+}
+.arco-index-bar-group-item {
+  height:  1.08rem ;
+  display: flex;
+  align-items: center;
+  margin-left:  0.32rem ;
+  font-size:  0.32rem ;
+}
+.arco-index-bar-group-item:not(:last-child) {
+  position: relative;
+  border-width: 0;
+}
+.arco-index-bar-group-item:not(:last-child)::after {
+  content: '';
+  width: 100%;
+  height: 1PX;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  z-index: 1;
+  border-bottom-style: solid;
+  border-bottom-width: 1PX;
+  border-bottom-color: #e5e6eb;
+  box-sizing: border-box;
+  transform-origin: left bottom;
+  -webkit-transform-origin: left bottom;
+  pointer-events: none;
+  border-radius: 0;
+}
+@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
+  .arco-index-bar-group-item:not(:last-child)::after {
+    transform: scaleY(0.5);
+    -webkit-transform: scaleY(0.5);
+    border-radius: 0;
+  }
+}
+@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
+  .arco-index-bar-group-item:not(:last-child)::after {
+    transform: scaleY(0.33333333);
+    -webkit-transform: scaleY(0.33333333);
+    border-radius: 0;
+  }
+}
+.arco-index-bar-sidebar {
+  position: absolute;
+  z-index: 2;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%) translateZ(0);
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+.arco-index-bar-sidebar-touching {
+  left: 0;
+}
+.arco-index-bar-sidebar-item {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  position: relative;
+  padding:  0.04rem 0.16rem ;
+  cursor: pointer;
+}
+.arco-index-bar-sidebar-item-wrapper {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width:  0.2rem ;
+  font-size:  0.2rem ;
+  line-height:  0.28rem ;
+}
+.arco-index-bar-sidebar-item:last-child {
+  padding-bottom: 0px;
+}
+.arco-index-bar-sidebar-active {
+  color:  #165dff ;
+}
+.arco-index-bar-sidebar-sweat {
+  position: absolute;
+  height:  1rem ;
+  min-width:  1rem ;
+  line-height:  1rem ;
+  border-radius: 9999px;
+  text-align: center;
+  padding:  0 0.16rem ;
+  background:  #323232 ;
+  right:  0.72rem ;
+  font-size:  0.48rem ;
+  color:  white ;
+}
+.arco-index-bar-sidebar-sweat::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  right:  -0.54rem ;
+  width: 0;
+  height: 0;
+  border:  0.36rem solid transparent ;
+  border: 18px solid transparent;
+  border-left-color:  #323232 ;
+  border-radius: 4px;
+}
+.arco-index-bar-sidebar-toast {
+  position: absolute;
+  background:  #323232 ;
+  color:  white ;
+  left: 50%;
+  top: 50%;
+  min-width:  0.96rem ;
+  height:  0.96rem ;
+  line-height:  0.96rem ;
+  transform: translate(-50%, -50%);
+  text-align: center;
+  padding:  0 0.16rem ;
+  font-size:  0.48rem ;
+  border-radius:  0.08rem ;
+}
+
+.arco-keyboard {
+  background:  #f2f3f5 ;
+  padding:  0.16rem ;
+  -webkit-touch-callout: none;
+  /* iOS Safari */
+  -webkit-user-select: none;
+  /* Chrome/Safari/Opera */
+  /* Konqueror */
+  -moz-user-select: none;
+  /* Firefox */
+  /* Internet Explorer/Edge */
+  user-select: none;
+  /* Non-prefixed version, currently*/
+}
+.arco-keyboard-wrapper {
+  display: flex;
+}
+.arco-keyboard-key-wrapper {
+  flex: 2 0 auto;
+}
+.arco-keyboard-row {
+  display: flex;
+}
+.arco-keyboard-row:not(.arco-keyboard-row:nth-last-child(1)) {
+  margin-bottom:  0.16rem ;
+}
+.arco-keyboard-row .arco-keyboard-key:not(.arco-keyboard-row .arco-keyboard-key:nth-child(1)) {
+  margin-left:  0.16rem ;
+}
+.arco-keyboard-row .arco-keyboard-key-special {
+  flex: 2.1 0 auto;
+}
+.arco-keyboard-col {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  margin-left:  0.16rem ;
+}
+.arco-keyboard-col .arco-keyboard-key:not(.arco-keyboard-col .arco-keyboard-key:nth-child(1)) {
+  margin-top:  0.16rem ;
+}
+.arco-keyboard-col .arco-keyboard-key-confirm {
+  flex: 2.5 0 auto;
+  background:  #165dff ;
+  color:  #ffffff ;
+  font-size:  0.36rem ;
+}
+.arco-keyboard-key {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  font-weight:  500 ;
+  font-size:  0.44rem ;
+  line-height:  0.6rem ;
+  background:  #ffffff ;
+  height:  0.96rem ;
+  border-radius:  0.08rem ;
+  color:  #1d2129 ;
+}
+.arco-keyboard-key:active {
+  background:  #e5e6eb ;
+}
+.arco-keyboard-key .arco-icon {
+  font-size:  0.52rem ;
+}
+.arco-keyboard-popup {
+  display: none;
+}
+
 .arco-load-more {
   text-align: center;
   font-size:  0.28rem ;
@@ -4651,7 +4866,6 @@ samp {
   padding-left:  0.4rem ;
 }
 
-
 .arco-swipe-action {
   position: relative;
   transition: transform 0s;