leiyun
/
ai_uniapp_v2
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 Commit
1 Branch
4.2 MiB
 
 
 
Tree: 635772c47b
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '635772c47b'
${ noResults }
ai_uniapp_v2/uni_modules/uview-plus/components/u-button/u-button.vue

578 lines
23 KiB
Raw Blame History 

  1. <template>

  2.     <!-- #ifndef APP-NVUE -->

  3.     <button

  4.         :hover-start-time="Number(hoverStartTime)"

  5.         :hover-stay-time="Number(hoverStayTime)"

  6.         :form-type="formType"

  7.         :open-type="openType"

  8.         :app-parameter="appParameter"

  9.         :hover-stop-propagation="hoverStopPropagation"

  10.         :send-message-title="sendMessageTitle"

  11.         :send-message-path="sendMessagePath"

  12.         :lang="lang"

  13.         :data-name="dataName"

  14.         :session-from="sessionFrom"

  15.         :send-message-img="sendMessageImg"

  16.         :show-message-card="showMessageCard"

  17.         @getphonenumber="getphonenumber"

  18.         @getuserinfo="getuserinfo"

  19.         @error="error"

  20.         @opensetting="opensetting"

  21.         @launchapp="launchapp"

  22.         @agreeprivacyauthorization="agreeprivacyauthorization"

  23.         :hover-class="!disabled && !loading ? 'u-button--active' : ''"

  24.         class="u-button u-reset-button"

  25.         :style="[baseColor, addStyle(customStyle)]"

  26.         @tap="clickHandler"

  27.         :class="bemClass"

  28.     >

  29.         <template v-if="loading">

  30.             <u-loading-icon

  31.                 :mode="loadingMode"

  32.                 :size="loadingSize * 1.15"

  33.                 :color="loadingColor"

  34.             ></u-loading-icon>

  35.             <text

  36.                 class="u-button__loading-text"

  37.                 :style="[{ fontSize: textSize + 'px' }]"

  38.                 >{{ loadingText || text }}</text

  39.             >

  40.         </template>

  41.         <template v-else>

  42.             <up-icon

  43.                 v-if="icon"

  44.                 :name="icon"

  45.                 :color="iconColorCom"

  46.                 :size="textSize * 1.35"

  47.                 :customStyle="{ marginRight: '2px' }"

  48.             ></up-icon>

  49.             <slot>

  50.                 <text

  51.                     class="u-button__text"

  52.                     :style="[{ fontSize: textSize + 'px' }]"

  53.                     >{{ text }}</text

  54.                 >

  55.             </slot>

  56.         </template>

  57.     </button>

  58.     <!-- #endif -->

  59. 

  60.     <!-- #ifdef APP-NVUE -->

  61.     <view

  62.         :hover-start-time="Number(hoverStartTime)"

  63.         :hover-stay-time="Number(hoverStayTime)"

  64.         class="u-button"

  65.         :hover-class="

  66.             !disabled && !loading && !color && (plain || type === 'info')

  67.                 ? 'u-button--active--plain'

  68.                 : !disabled && !loading && !plain

  69.                 ? 'u-button--active'

  70.                 : ''

  71.         "

  72.         @tap="clickHandler"

  73.         :class="bemClass"

  74.         :style="[baseColor, addStyle(customStyle)]"

  75.     >

  76.         <template v-if="loading">

  77.             <u-loading-icon

  78.                 :mode="loadingMode"

  79.                 :size="loadingSize * 1.15"

  80.                 :color="loadingColor"

  81.             ></u-loading-icon>

  82.             <text

  83.                 class="u-button__loading-text"

  84.                 :style="[nvueTextStyle]"

  85.                 :class="[plain && `u-button__text--plain--${type}`]"

  86.                 >{{ loadingText || text }}</text

  87.             >

  88.         </template>

  89.         <template v-else>

  90.             <up-icon

  91.                 v-if="icon"

  92.                 :name="icon"

  93.                 :color="iconColorCom"

  94.                 :size="textSize * 1.35"

  95.             ></up-icon>

  96.             <text

  97.                 class="u-button__text"

  98.                 :style="[

  99.                     {

  100.                         marginLeft: icon ? '2px' : 0,

  101.                     },

  102.                     nvueTextStyle,

  103.                 ]"

  104.                 :class="[plain && `u-button__text--plain--${type}`]"

  105.                 >{{ text }}</text

  106.             >

  107.         </template>

  108.     </view>

  109.     <!-- #endif -->

  110. </template>

  111. 

  112. <script lang="ts">

  113. import { buttonMixin } from "../../libs/mixin/button";

  114. import { openType } from "../../libs/mixin/openType";

  115. import { mpMixin } from '../../libs/mixin/mpMixin';

  116. import { mixin } from '../../libs/mixin/mixin';

  117. import { props } from "./props";

  118. import { addStyle } from '../../libs/function/index';

  119. import { throttle } from '../../libs/function/throttle';

  120. import { getThemeVar } from '../../libs/theme/runtime.js';

  121. /**

  122.  * button 按钮

  123.  * @description Button 按钮

  124.  * @tutorial https://uview-plus.jiangruyi.com/components/button.html

  125.  *

  126.  * @property {Boolean}			hairline				是否显示按钮的细边框 (默认 true )

  127.  * @property {String}			type					按钮的预置样式，info，primary，error，warning，success (默认 'info' )

  128.  * @property {String}			size					按钮尺寸，large，normal，mini （默认 normal）

  129.  * @property {String}			shape					按钮形状，circle（两边为半圆），square（带圆角） （默认 'square' ）

  130.  * @property {Boolean}			plain					按钮是否镂空，背景色透明 （默认 false）

  131.  * @property {Boolean}			disabled				是否禁用 （默认 false）

  132.  * @property {Boolean}			loading					按钮名称前是否带 loading 图标(App-nvue 平台，在 ios 上为雪花，Android上为圆圈) （默认 false）

  133.  * @property {String | Number}	loadingText				加载中提示文字

  134.  * @property {String}			loadingMode				加载状态图标类型 （默认 'spinner' ）

  135.  * @property {String | Number}	loadingSize				加载图标大小 （默认 15 ）

  136.  * @property {String}			openType				开放能力，具体请看uniapp稳定关于button组件部分说明

  137.  * @property {String}			formType				用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件

  138.  * @property {String}			appParameter			打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效 （注：只微信小程序、QQ小程序有效）

  139.  * @property {Boolean}			hoverStopPropagation	指定是否阻止本节点的祖先节点出现点击态，微信小程序有效（默认 true ）

  140.  * @property {String}			lang					指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文（默认 en ）

  141.  * @property {String}			sessionFrom				会话来源，openType="contact"时有效

  142.  * @property {String}			sendMessageTitle		会话内消息卡片标题，openType="contact"时有效

  143.  * @property {String}			sendMessagePath			会话内消息卡片点击跳转小程序路径，openType="contact"时有效

  144.  * @property {String}			sendMessageImg			会话内消息卡片图片，openType="contact"时有效

  145.  * @property {Boolean}			showMessageCard			是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，openType="contact"时有效（默认false）

  146.  * @property {String}			dataName				额外传参参数，用于小程序的data-xxx属性，通过target.dataset.name获取

  147.  * @property {String | Number}	throttleTime			节流，一定时间内只能触发一次 （默认 0 )

  148.  * @property {String | Number}	hoverStartTime			按住后多久出现点击态，单位毫秒 （默认 0 )

  149.  * @property {String | Number}	hoverStayTime			手指松开后点击态保留时间，单位毫秒 （默认 200 )

  150.  * @property {String | Number}	text					按钮文字，之所以通过props传入，是因为slot传入的话（注：nvue中无法控制文字的样式）

  151.  * @property {String}			icon					按钮图标

  152.  * @property {String}			iconColor				按钮图标颜色

  153.  * @property {String}			color					按钮颜色，支持传入linear-gradient渐变色

  154.  * @property {Object}			customStyle				定义需要用到的外部样式

  155.  *

  156.  * @event {Function}	click			非禁止并且非加载中，才能点击

  157.  * @event {Function}	getphonenumber	open-type="getPhoneNumber"时有效

  158.  * @event {Function}	getuserinfo		用户点击该按钮时，会返回获取到的用户信息，从返回参数的detail中获取到的值同uni.getUserInfo

  159.  * @event {Function}	error			当使用开放能力时，发生错误的回调

  160.  * @event {Function}	opensetting		在打开授权设置页并关闭后回调

  161.  * @event {Function}	launchapp		打开 APP 成功的回调

  162.  * @event {Function}	agreeprivacyauthorization	用户同意隐私协议事件回调

  163.  * @example <u-button>月落</u-button>

  164.  */

  165. export default {

  166.     name: "u-button",

  167.     // #ifdef MP

  168.     mixins: [mpMixin, mixin, buttonMixin, openType, props],

  169.     // #endif

  170.     // #ifndef MP

  171.     mixins: [mpMixin, mixin, props],

  172.     // #endif

  173.     data() {

  174.         return {};

  175.     },

  176.     computed: {

  177.         // 生成bem风格的类名

  178.         bemClass() {

  179.             // this.bem为一个computed变量，在mixin中

  180.             if (!this.color) {

  181.                 return this.bem(

  182.                     "button",

  183.                     ["type", "shape", "size"],

  184.                     ["disabled", "plain", "hairline"]

  185.                 );

  186.             } else {

  187.                 // 由于nvue的原因，在有color参数时，不需要传入type，否则会生成type相关的类型，影响最终的样式

  188.                 return this.bem(

  189.                     "button",

  190.                     ["shape", "size"],

  191.                     ["disabled", "plain", "hairline"]

  192.                 );

  193.             }

  194.         },

  195.         isDarkTheme() {

  196.             return this.$u.theme && this.$u.theme.mode === 'dark';

  197.         },

  198.         nvueMainColor() {

  199.             return this.resolveNvueColor(this.$u.color.mainColor, this.isDarkTheme ? '#f5f5f5' : '#303133');

  200.         },

  201.         nvueBorderColor() {

  202.             return this.resolveNvueColor(this.$u.color.borderColor, this.isDarkTheme ? '#3a3a3c' : '#dadbde');

  203.         },

  204.         themeTypeColor() {

  205.             const fallbackMap = {

  206.                 primary: '#3c9cff',

  207.                 success: '#5ac725',

  208.                 warning: '#f9ae3d',

  209.                 error: '#f56c6c',

  210.                 info: '#909399',

  211.             };

  212.             const type = fallbackMap[this.type] ? this.type : 'info';

  213.             return this.resolveNvueColor(

  214.                 this.upThemeVar(`--up-${type}`, fallbackMap[type]),

  215.                 fallbackMap[type]

  216.             );

  217.         },

  218.         nvueInfoBackgroundColor() {

  219.             return this.upThemeVar(

  220.                 '--up-button-info-background-color',

  221.                 this.upThemeVar(

  222.                     '--up-card-bg-color',

  223.                     this.isDarkTheme ? '#1c1c1e' : '#ffffff'

  224.                 )

  225.             );

  226.         },

  227.         nvuePlainBackgroundColor() {

  228.             return this.upThemeVar(

  229.                 '--up-button-plain-background-color',

  230.                 this.upThemeVar(

  231.                     '--up-card-bg-color',

  232.                     this.isDarkTheme ? '#1c1c1e' : '#ffffff'

  233.                 )

  234.             );

  235.         },

  236.         loadingColor() {

  237.             if (this.plain) {

  238.                 // 如果有设置color值，则用color值，否则使用type主题颜色

  239.                 return this.color

  240.                     ? this.color

  241.                     : this.themeTypeColor;

  242.             }

  243.             if (this.type === "info") {

  244.                 return this.isDarkTheme ? "#9ca3af" : "#c9c9c9";

  245.             }

  246.             return "rgb(200, 200, 200)";

  247.         },

  248.         iconColorCom() {

  249.             // 如果是镂空状态，设置了color就用color值，否则使用主题颜色，

  250.             // up-icon的color能接受一个主题颜色的值

  251.             if (this.iconColor) return this.iconColor;

  252. 			if (this.plain) {

  253.                 return this.color ? this.color : this.type;

  254.             } else {

  255.                 return this.type === "info" ? this.nvueMainColor : "#ffffff";

  256.             }

  257.         },

  258.         baseColor() {

  259.             let style = {};

  260.             if (this.color) {

  261.                 // 针对自定义了color颜色的情况，镂空状态下，就是用自定义的颜色

  262.                 style.color = this.plain ? this.color : "white";

  263.                 if (!this.plain) {

  264.                     // 非镂空，背景色使用自定义的颜色

  265.                     style["background-color"] = this.color;

  266.                 }

  267.                 if (this.color.indexOf("gradient") !== -1) {

  268.                     // 如果自定义的颜色为渐变色，不显示边框，以及通过backgroundImage设置渐变色

  269.                     // weex文档说明可以写borderWidth的形式，为什么这里需要分开写？

  270.                     // 因为weex是阿里巴巴为了部门业绩考核而做的你懂的东西，所以需要这么写才有效

  271.                     style.borderTopWidth = 0;

  272.                     style.borderRightWidth = 0;

  273.                     style.borderBottomWidth = 0;

  274.                     style.borderLeftWidth = 0;

  275.                     if (!this.plain) {

  276.                         style.backgroundImage = this.color;

  277.                     }

  278.                 } else {

  279.                     // 非渐变色，则设置边框相关的属性

  280.                     style.borderColor = this.color;

  281.                     style.borderWidth = "1px";

  282.                     style.borderStyle = "solid";

  283.                 }

  284.                 return style;

  285.             }

  286.             // #ifdef APP-NVUE

  287.             const typeColor = this.themeTypeColor;

  288.             if (this.plain) {

  289.                 style.color = this.type === 'info' ? this.nvueMainColor : typeColor;

  290.                 style.backgroundColor = this.nvuePlainBackgroundColor;

  291.                 style.borderColor = this.type === 'info' ? this.nvueBorderColor : typeColor;

  292.                 style.borderWidth = this.hairline ? '0.5px' : '1px';

  293.                 style.borderStyle = 'solid';

  294.             } else {

  295.                 style.borderWidth = this.hairline ? '0.5px' : '1px';

  296.                 style.borderStyle = 'solid';

  297.                 if (this.type === 'info') {

  298.                     style.color = this.nvueMainColor;

  299.                     style.backgroundColor = this.nvueInfoBackgroundColor;

  300.                     style.borderColor = this.nvueBorderColor;

  301.                 } else {

  302.                     style.color = '#ffffff';

  303.                     style.backgroundColor = typeColor;

  304.                     style.borderColor = typeColor;

  305.                 }

  306.             }

  307.             // #endif

  308.             return style;

  309.         },

  310.         // nvue版本按钮的字体不会继承父组件的颜色，需要对每一个text组件进行单独的设置

  311.         nvueTextStyle() {

  312.             let style = {};

  313.             // 针对自定义了color颜色的情况，镂空状态下，就是用自定义的颜色

  314.             if (this.type === "info") {

  315.                 style.color = this.nvueMainColor;

  316.             }

  317.             if (this.color) {

  318.                 style.color = this.plain ? this.color : "white";

  319.             } else if (this.plain && this.type !== 'info') {

  320.                 style.color = this.themeTypeColor;

  321.             }

  322.             style.fontSize = this.textSize + "px";

  323.             return style;

  324.         },

  325.         // 字体大小

  326.         textSize() {

  327.             let fontSize = 14,

  328.                 { size } = this;

  329.             if (size === "large") fontSize = 16;

  330.             if (size === "normal") fontSize = 14;

  331.             if (size === "small") fontSize = 12;

  332.             if (size === "mini") fontSize = 10;

  333.             return fontSize;

  334.         },

  335.     },

  336. 	emits: ['click', 'getphonenumber', 'getuserinfo',

  337. 		'error', 'opensetting', 'launchapp', 'agreeprivacyauthorization'],

  338.     methods: {

  339.         addStyle,

  340.         resolveNvueColor(colorValue, fallbackColor) {

  341.             if (typeof colorValue !== 'string') return fallbackColor;

  342.             if (colorValue.indexOf('var(') > -1) return fallbackColor;

  343.             return colorValue;

  344.         },

  345.         upThemeVar(varName, fallbackColor) {

  346.             return getThemeVar(varName, fallbackColor, this.$u);

  347.         },

  348.         clickHandler(e: any) {

  349.             // 非禁止并且非加载中，才能点击

  350.             if (!this.disabled && !this.loading) {

  351. 				// 进行节流控制，每this.throttle毫秒内，只在开始处执行

  352. 				throttle(() => {

  353. 					this.$emit("click", e);

  354. 				}, this.throttleTime);

  355.             }

  356.             // 是否阻止事件传播

  357.             this.stop && this.preventEvent(e)

  358.         },

  359.         // 下面为对接uniapp官方按钮开放能力事件回调的对接

  360.         getphonenumber(res: any) {

  361.             this.$emit("getphonenumber", res);

  362.         },

  363.         getuserinfo(res: any) {

  364.             this.$emit("getuserinfo", res);

  365.         },

  366.         error(res: any) {

  367.             this.$emit("error", res);

  368.         },

  369.         opensetting(res: any) {

  370.             this.$emit("opensetting", res);

  371.         },

  372.         launchapp(res: any) {

  373.             this.$emit("launchapp", res);

  374.         },

  375.         agreeprivacyauthorization(res) {

  376.             this.$emit("agreeprivacyauthorization", res);

  377.         },

  378.     },

  379. };

  380. </script>

  381. 

  382. <style lang="scss" scoped>

  383. /* #ifndef APP-NVUE */

  384. @import "./vue.scss";

  385. /* #endif */

  386. 

  387. /* #ifdef APP-NVUE */

  388. @import "./nvue.scss";

  389. /* #endif */

  390. 

  391. $u-button-u-button-height: 40px !default;

  392. $u-button-text-font-size: 15px !default;

  393. $u-button-loading-text-font-size: 15px !default;

  394. $u-button-loading-text-margin-left: 4px !default;

  395. $u-button-large-width: 100% !default;

  396. $u-button-large-height: 50px !default;

  397. $u-button-normal-padding: 0 12px !default;

  398. $u-button-large-padding: 0 15px !default;

  399. $u-button-normal-font-size: 14px !default;

  400. $u-button-small-min-width: 60px !default;

  401. $u-button-small-height: 30px !default;

  402. $u-button-small-padding: 0px 8px !default;

  403. $u-button-mini-padding: 0px 8px !default;

  404. $u-button-small-font-size: 12px !default;

  405. $u-button-mini-height: 22px !default;

  406. $u-button-mini-font-size: 10px !default;

  407. $u-button-mini-min-width: 50px !default;

  408. $u-button-disabled-opacity: 0.5 !default;

  409. $u-button-info-color: $u-main-color !default;

  410. $u-button-info-background-color: var(--up-button-info-background-color, var(--up-card-bg-color, #fff)) !default;

  411. $u-button-info-border-color: $u-border-color !default;

  412. $u-button-info-border-width: 1px !default;

  413. $u-button-info-border-style: solid !default;

  414. $u-button-success-color: #fff !default;

  415. $u-button-success-background-color: $u-success !default;

  416. $u-button-success-border-color: $u-button-success-background-color !default;

  417. $u-button-success-border-width: 1px !default;

  418. $u-button-success-border-style: solid !default;

  419. $u-button-primary-color: #fff !default;

  420. $u-button-primary-background-color: $u-primary !default;

  421. $u-button-primary-border-color: $u-button-primary-background-color !default;

  422. $u-button-primary-border-width: 1px !default;

  423. $u-button-primary-border-style: solid !default;

  424. $u-button-error-color: #fff !default;

  425. $u-button-error-background-color: $u-error !default;

  426. $u-button-error-border-color: $u-button-error-background-color !default;

  427. $u-button-error-border-width: 1px !default;

  428. $u-button-error-border-style: solid !default;

  429. $u-button-warning-color: #fff !default;

  430. $u-button-warning-background-color: $u-warning !default;

  431. $u-button-warning-border-color: $u-button-warning-background-color !default;

  432. $u-button-warning-border-width: 1px !default;

  433. $u-button-warning-border-style: solid !default;

  434. $u-button-block-width: 100% !default;

  435. $u-button-circle-border-top-right-radius: 100px !default;

  436. $u-button-circle-border-top-left-radius: 100px !default;

  437. $u-button-circle-border-bottom-left-radius: 100px !default;

  438. $u-button-circle-border-bottom-right-radius: 100px !default;

  439. $u-button-square-border-top-right-radius: 3px !default;

  440. $u-button-square-border-top-left-radius: 3px !default;

  441. $u-button-square-border-bottom-left-radius: 3px !default;

  442. $u-button-square-border-bottom-right-radius: 3px !default;

  443. $u-button-icon-min-width: 1em !default;

  444. $u-button-plain-background-color: var(--up-button-plain-background-color, var(--up-card-bg-color, #fff)) !default;

  445. $u-button-hairline-border-width: 0.5px !default;

  446. 

  447. .u-button {

  448.     height: $u-button-u-button-height;

  449.     position: relative;

  450.     align-items: center;

  451.     justify-content: center;

  452.     @include flex;

  453.     /* #ifndef APP-NVUE */

  454.     box-sizing: border-box;

  455.     /* #endif */

  456.     flex-direction: row;

  457. 

  458.     &__text {

  459.         font-size: $u-button-text-font-size;

  460.     }

  461. 

  462.     &__loading-text {

  463.         font-size: $u-button-loading-text-font-size;

  464.         margin-left: $u-button-loading-text-margin-left;

  465.     }

  466. 

  467.     &--large {

  468.         /* #ifndef APP-NVUE */

  469.         width: $u-button-large-width;

  470.         /* #endif */

  471.         height: $u-button-large-height;

  472.         padding: $u-button-large-padding;

  473.     }

  474. 

  475.     &--normal {

  476.         padding: $u-button-normal-padding;

  477.         font-size: $u-button-normal-font-size;

  478.     }

  479. 

  480.     &--small {

  481.         /* #ifndef APP-NVUE */

  482.         min-width: $u-button-small-min-width;

  483.         /* #endif */

  484.         height: $u-button-small-height;

  485.         padding: $u-button-small-padding;

  486.         font-size: $u-button-small-font-size;

  487.     }

  488. 

  489.     &--mini {

  490.         height: $u-button-mini-height;

  491.         font-size: $u-button-mini-font-size;

  492.         /* #ifndef APP-NVUE */

  493.         min-width: $u-button-mini-min-width;

  494.         /* #endif */

  495.         padding: $u-button-mini-padding;

  496.     }

  497. 

  498.     &--disabled {

  499.         opacity: $u-button-disabled-opacity;

  500.     }

  501. 

  502.     &--info {

  503.         color: $u-button-info-color;

  504.         background-color: $u-button-info-background-color;

  505.         border-color: $u-button-info-border-color;

  506.         border-width: $u-button-info-border-width;

  507.         border-style: $u-button-info-border-style;

  508.     }

  509. 

  510.     &--success {

  511.         color: $u-button-success-color;

  512.         background-color: $u-button-success-background-color;

  513.         border-color: $u-button-success-border-color;

  514.         border-width: $u-button-success-border-width;

  515.         border-style: $u-button-success-border-style;

  516.     }

  517. 

  518.     &--primary {

  519.         color: $u-button-primary-color;

  520.         background-color: $u-button-primary-background-color;

  521.         border-color: $u-button-primary-border-color;

  522.         border-width: $u-button-primary-border-width;

  523.         border-style: $u-button-primary-border-style;

  524.     }

  525. 

  526.     &--error {

  527.         color: $u-button-error-color;

  528.         background-color: $u-button-error-background-color;

  529.         border-color: $u-button-error-border-color;

  530.         border-width: $u-button-error-border-width;

  531.         border-style: $u-button-error-border-style;

  532.     }

  533. 

  534.     &--warning {

  535.         color: $u-button-warning-color;

  536.         background-color: $u-button-warning-background-color;

  537.         border-color: $u-button-warning-border-color;

  538.         border-width: $u-button-warning-border-width;

  539.         border-style: $u-button-warning-border-style;

  540.     }

  541. 

  542.     &--block {

  543.         @include flex;

  544.         width: $u-button-block-width;

  545.     }

  546. 

  547.     &--circle {

  548.         border-top-right-radius: $u-button-circle-border-top-right-radius;

  549.         border-top-left-radius: $u-button-circle-border-top-left-radius;

  550.         border-bottom-left-radius: $u-button-circle-border-bottom-left-radius;

  551.         border-bottom-right-radius: $u-button-circle-border-bottom-right-radius;

  552.     }

  553. 

  554.     &--square {

  555.         border-bottom-left-radius: $u-button-square-border-top-right-radius;

  556.         border-bottom-right-radius: $u-button-square-border-top-left-radius;

  557.         border-top-left-radius: $u-button-square-border-bottom-left-radius;

  558.         border-top-right-radius: $u-button-square-border-bottom-right-radius;

  559.     }

  560. 

  561.     &__icon {

  562.         /* #ifndef APP-NVUE */

  563.         min-width: $u-button-icon-min-width;

  564.         line-height: inherit !important;

  565.         vertical-align: top;

  566.         /* #endif */

  567.     }

  568. 

  569.     &--plain {

  570.         background-color: $u-button-plain-background-color;

  571.     }

  572. 

  573.     &--hairline {

  574.         border-width: $u-button-hairline-border-width !important;

  575.     }

  576. }

  577. </style>