merge

wechatMp/pages/examples/g-input/index.json

@@ -2,6 +2,6 @@
   "navigationBarTitleText": "Input 输入框",
   "usingComponents": {
     "g-input": "../../../components/UI/g-input/index",
-    "g-pannel": "../../../components/UI/g-pannel/index"
+    "g-pannel": "../../../components/UI/g-panel/index"
   }
 }

wechatMp/styles/base.less

@@ -73,3 +73,9 @@
 @border-radius-base : 4px;
 
 @border-radius-small : 2px;
+
+@btn-circle-size : 40rpx;
+
+@btn-circle-size-mini : 30rpx;
+
+@btn-circle-size-large : 48rpx;

wechatMp/styles/cpn.less

@@ -1,222 +0,0 @@
-@import "./base.less";
-
-//btn
-.btn-color(@color) {
-  color: #fff !important;
-  background: @color !important;
-}
-
-.btn-primary() {
-  .btn-color(@primary-color);
-}
-
-.btn-ghost() {
-  .btn-color(#fff);
-
-  color: @text-color !important;
-}
-
-.g-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  vertical-align: middle;
-  touch-action: manipulation;
-  cursor: pointer;
-  background-image: none;
-  white-space: nowrap;
-  user-select: none;
-  font-size: @size-font-base;
-  border-radius: @border-radius-base;
-  border: 0 !important;
-  position: relative;
-  text-decoration: none;
-  height: @btn-size-base;
-  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 10%);
-
-  &-fullWidth {
-    width: 100% !important;
-    margin: 0 !important;
-  }
-
-  &-hover {
-    opacity: 0.9;
-  }
-
-  &-long {
-    border-radius: 0;
-    margin: 0;
-    box-shadow: none;
-  }
-
-  &-large {
-    font-size: @size-font-large;
-    height: @btn-size-large;
-  }
-
-  &-small {
-    font-size: @size-font-small;
-    height: @btn-size-small;
-  }
-
-  &-primary {
-    .btn-primary;
-  }
-
-  &-ghost {
-    .btn-ghost;
-  }
-
-  &-success {
-    .btn-color(@success-color);
-  }
-
-  &-warning {
-    .btn-color(@warning-color);
-  }
-
-  &-error {
-    .btn-color(@error-color);
-  }
-
-  &-info {
-    .btn-color(@info-color);
-  }
-
-  &-loading {
-    opacity: 0.6;
-  }
-
-  &-loading-inner {
-    display: inline-block;
-    margin-right: 12px;
-    vertical-align: middle;
-    width: 14px;
-    height: 14px;
-    background: transparent;
-    border-radius: 50%;
-    border: 2px solid #fff;
-    border-color: #fff #fff #fff transparent;
-    animation: btn-spin 0.6s linear;
-    animation-iteration-count: infinite;
-  }
-
-  &-disabled {
-    color: @btn-disable-color !important;
-    background: @btn-disable-bg !important;
-  }
-}
-
-@keyframes btn-spin {
-  0% {
-    transform: rotate(0);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-//form
-
-.g-form {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  background-color: @background-color-base;
-  border: 0 solid @border-color-base;
-  border-top-width: 1px;
-  border-bottom-width: 1px;
-
-  &-item {
-    position: relative;
-    display: flex;
-    align-items: center;
-    background-color: #fff;
-    padding: @size-spacing-base;
-
-    &-label {
-      color: @title-color;
-      line-height: 1;
-      min-width: 150rpx;
-      padding-right: 20rpx;
-    }
-
-    &-content {
-      display: flex;
-      flex: 1;
-      overflow: hidden;
-      color: @text-color;
-      justify-content: flex-end;
-    }
-  }
-}
-
-.g-form > view:not(:last-child)::after {
-  .hairline();
-
-  border-bottom-width: 1px;
-  left: 15px;
-  right: 0;
-}
-
-//input
-.g-input {
-  flex: 1;
-  line-height: 1.6;
-  padding: 4px 0;
-  min-height: 22px;
-  height: auto;
-
-  &-border {
-    text-align: right;
-  }
-
-  &-error {
-    color: @error-color;
-  }
-}
-
-//pannel
-.g-cell {
-  padding: @size-spacing-base;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background-color: #fff;
-}
-
-.g-pannel {
-  display: flex;
-  flex-direction: column;
-
-  &-title {
-    padding: @size-spacing-small @size-spacing-base;
-    font-size: @size-font-base;
-    color: @title-color;
-  }
-}
-
-.g-border-radius {
-  border: 1px solid @border-color-base;
-  border-radius: @btn-border-radius;
-}
-
-.g-border-error {
-  border-color: @error-color;
-}
-
-//hairline
-.hairline() {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 200%;
-  height: 200%;
-  transform: scale(0.5);
-  transform-origin: 0 0;
-  pointer-events: none;
-  box-sizing: border-box;
-  border: 0 solid @border-color-split;
-}