zgty/zgty-mas-m
8
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

初始化移动端提交

Browse Source
This commit is contained in:
chenbowen
2025-09-30 00:08:23 +08:00
parent 08784ca8f3
commit f2ffc65094
406 changed files with 55626 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

217
sheep/ui/su-fixed/su-fixed.vue Normal file
View File

@@ -0,0 +1,217 @@
<template>
<view class="ui-fixed">
<view
class="ui-fixed-box"
:id="`fixed-${uuid}`"
:class="[{ fixed: state.fixed }]"
:style="[
{
left: sticky ? 'auto' : '0px',
top: state.fixed && !bottom ? (noNav ? val : val + sys_navBar) + 'px' : 'auto',
bottom: insetHeight,
zIndex: index + sheep.$zIndex.navbar,
},
!alway ? { opacity: state.opacityVal } : '',
]"
>
<view
class="ui-fixed-content"
@tap="toTop"
:style="[{ zIndex: index + sheep.$zIndex.navbar }]"
>
<slot></slot>
<view
v-if="safeAreaInsets.bottom && bottom && isInset"
class="inset-bottom"
:style="[{ height: safeAreaInsets.bottom + 'px' }]"
></view>
</view>
<view class="ui-fixed-bottom" :class="[bg]" v-if="bottom"></view>
<view
class="ui-fixed-bg"
:class="[ui, bg]"
:style="[
{ zIndex: index + sheep.$zIndex.navbar - 1 },
bgStyles,
opacity ? { opacity: state.opacityVal } : '',
]"
></view>
</view>
<view
class="skeleton"
:style="[{ height: state.content.height + 'px', width: width + 'px' }]"
v-if="sticky ? state.fixed : placeholder && state.fixed"
></view>
</view>
</template>
<script setup>
import { onPageScroll } from '@dcloudio/uni-app';
import { getCurrentInstance, unref, onMounted, reactive, nextTick, computed } from 'vue';
import sheep from '@/sheep';
const { safeAreaInsets } = sheep.$platform.device;
const vm = getCurrentInstance();
const uuid = sheep.$helper.guid();
const sys_navBar = sheep.$platform.navbar;
const state = reactive({
content: {},
fixed: true,
scrollTop: 0,
opacityVal: 0,
});
const insetHeight = computed(() => {
if (state.fixed && props.bottom) {
if (props.isInset) {
return props.val + 'px';
} else {
return props.val + safeAreaInsets.bottom + 'px';
}
} else {
return 'auto';
}
});
const props = defineProps({
noNav: {
type: Boolean,
default: false,
},
bottom: {
type: Boolean,
default: false,
},
bg: {
type: String,
default: '',
},
bgStyles: {
type: Object,
default() {},
},
val: {
type: Number,
default: 0,
},
width: {
type: [String, Number],
default: 0,
},
alway: {
type: Boolean,
default: true,
},
opacity: {
type: Boolean,
default: false,
},
index: {
type: [Number, String],
default: 0,
},
placeholder: {
type: [Boolean],
default: false,
},
sticky: {
type: [Boolean],
default: false,
},
noFixed: {
type: Boolean,
default: false,
},
ui: {
type: String,
default: '',
},
clickTo: {
type: Boolean,
default: false,
},
//是否需要安全区
isInset: {
type: Boolean,
default: true,
},
});
state.fixed = !unref(props.sticky);
onPageScroll((e) => {
let top = e.scrollTop;
state.scrollTop = top;
state.opacityVal = top > sheep.$platform.navbar ? 1 : top * 0.01;
});
onMounted(() => {
nextTick(() => {
computedQuery();
});
});
const computedQuery = () => {
uni.createSelectorQuery()
.in(vm)
.select(`#fixed-${uuid}`)
.boundingClientRect((data) => {
if (data != null) {
state.content = data;
if (unref(props.sticky)) {
setFixed(state.scrollTop);
}
}
})
.exec();
};
const setFixed = (value) => {
if (unref(props.bottom)) {
state.fixed =
value >=
state.content.bottom -
sheep.$platform.device.windowHeight +
state.content.height +
unref(props.val);
} else {
state.fixed =
value >=
state.content.top -
(unref(props.noNav) ? unref(props.val) : unref(props.val) + sheep.$platform.navbar);
}
};
const toTop = () => {
if (props.hasToTop) {
uni.pageScrollTo({
scrollTop: state.content.top,
duration: 100,
});
}
};
</script>
<style lang="scss">
.ui-fixed {
.ui-fixed-box {
position: relative;
width: 100%;
&.fixed {
position: fixed;
}
.ui-fixed-content {
position: relative;
}
.ui-fixed-bg {
position: absolute;
width: 100%;
height: 100%;
top: 0;
z-index: 1;
pointer-events: none;
}
}
}
.inset-bottom {
background: #fff;
}
</style>

45
sheep/ui/su-popup/keypress.js Normal file
View File

@@ -0,0 +1,45 @@
// #ifdef H5
export default {
name: 'Keypress',
props: {
disable: {
type: Boolean,
default: false,
},
},
mounted() {
const keyNames = {
esc: ['Esc', 'Escape'],
tab: 'Tab',
enter: 'Enter',
space: [' ', 'Spacebar'],
up: ['Up', 'ArrowUp'],
left: ['Left', 'ArrowLeft'],
right: ['Right', 'ArrowRight'],
down: ['Down', 'ArrowDown'],
delete: ['Backspace', 'Delete', 'Del'],
};
const listener = ($event) => {
if (this.disable) {
return;
}
const keyName = Object.keys(keyNames).find((key) => {
const keyName = $event.key;
const value = keyNames[key];
return value === keyName || (Array.isArray(value) && value.includes(keyName));
});
if (keyName) {
// 避免和其他按键事件冲突
setTimeout(() => {
this.$emit(keyName, {});
}, 0);
}
};
document.addEventListener('keyup', listener);
// this.$once('hook:beforeDestroy', () => {
// document.removeEventListener('keyup', listener)
// })
},
render: () => {},
};
// #endif

589
sheep/ui/su-popup/su-popup.vue Normal file
View File

@@ -0,0 +1,589 @@
<template>
<view
v-if="showPopup"
class="uni-popup"
:class="[popupstyle, isDesktop ? 'fixforpc-z-index' : '']"
:style="[{ zIndex: zIndex }]"
@touchmove.stop.prevent="clear"
>
<view @touchstart="touchstart">
<uni-transition
key="1"
v-if="maskShow"
name="mask"
mode-class="fade"
:styles="maskClass"
:duration="duration"
:show="showTrans"
@click="onTap"
/>
<uni-transition
key="2"
:mode-class="ani"
name="content"
:styles="{ ...transClass, ...borderRadius }"
:duration="duration"
:show="showTrans"
@click="onTap"
>
<view
v-if="showPopup"
class="uni-popup__wrapper"
:style="[{ backgroundColor: bg }, borderRadius]"
:class="[popupstyle]"
@click="clear"
>
<uni-icons
v-if="showClose"
class="close-icon"
color="#F6F6F6"
type="closeempty"
size="32"
@click="close"
></uni-icons>
<slot />
</view>
</uni-transition>
</view>
<!-- #ifdef H5 -->
<keypress v-if="maskShow" @esc="onTap" />
<!-- #endif -->
</view>
<!-- #ifdef MP -->
<view v-else style="display: none">
<slot></slot>
</view>
<!-- #endif -->
</template>
<script>
// #ifdef H5
import keypress from './keypress.js';
// #endif
/**
* PopUp 弹出层
* @description 弹出层组件，为了解决遮罩弹层的问题
* @tutorial https://ext.dcloud.net.cn/plugin?id=329
* @property {String} type = [top|center|bottom|left|right|message|dialog|share] 弹出方式
* @value top 顶部弹出
* @value center 中间弹出
* @value bottom 底部弹出
* @value left 左侧弹出
* @value right 右侧弹出
* @value message 消息提示
* @value dialog 对话框
* @value share 底部分享示例
* @property {Boolean} animation = [true|false] 是否开启动画
* @property {Boolean} maskClick = [true|false] 蒙版点击是否关闭弹窗(废弃)
* @property {Boolean} isMaskClick = [true|false] 蒙版点击是否关闭弹窗
* @property {String} backgroundColor 主窗口背景色
* @property {String} maskBackgroundColor 蒙版颜色
* @property {Boolean} safeArea 是否适配底部安全区
* @event {Function} change 打开关闭弹窗触发，e={show: false}
* @event {Function} maskClick 点击遮罩触发
*/
import sheep from '@/sheep';
export default {
name: 'SuPopup',
components: {
// #ifdef H5
keypress,
// #endif
},
emits: ['change', 'maskClick', 'close'],
props: {
// 开启状态
show: {
type: Boolean,
default: false,
},
// 顶部，底部时有效
space: {
type: Number,
default: 0,
},
// 默认圆角
round: {
type: [String, Number],
default: 0,
},
// 是否显示关闭
showClose: {
type: Boolean,
default: false,
},
// 开启动画
animation: {
type: Boolean,
default: true,
},
// 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层
// message: 消息提示 ; dialog : 对话框
type: {
type: String,
default: 'bottom',
},
// maskClick
isMaskClick: {
type: Boolean,
default: null,
},
// TODO 2 个版本后废弃属性 ，使用 isMaskClick
maskClick: {
type: Boolean,
default: null,
},
// 可设置none
backgroundColor: {
type: String,
default: '#ffffff',
},
backgroundImage: {
type: String,
default: '',
},
safeArea: {
type: Boolean,
default: true,
},
maskBackgroundColor: {
type: String,
default: 'rgba(0, 0, 0, 0.4)',
},
zIndex: {
type: [String, Number],
default: 10075,
},
},
watch: {
show: {
handler: function (newValue, oldValue) {
if (typeof oldValue === 'undefined' && !newValue) {
return;
}
if (newValue) {
this.open();
} else {
this.close();
}
},
immediate: true,
},
/**
* 监听type类型
*/
type: {
handler: function (type) {
if (!this.config[type]) return;
this[this.config[type]](true);
},
immediate: true,
},
isDesktop: {
handler: function (newVal) {
if (!this.config[newVal]) return;
this[this.config[this.type]](true);
},
immediate: true,
},
/**
* 监听遮罩是否可点击
* @param {Object} val
*/
maskClick: {
handler: function (val) {
this.mkclick = val;
},
immediate: true,
},
isMaskClick: {
handler: function (val) {
this.mkclick = val;
},
immediate: true,
},
// H5 下禁止底部滚动
showPopup(show) {
// #ifdef H5
// fix by mehaotian 处理 h5 滚动穿透的问题
document.getElementsByTagName('body')[0].style.overflow = show ? 'hidden' : 'visible';
// #endif
},
},
data() {
return {
sheep,
duration: 300,
ani: [],
showPopup: false,
showTrans: false,
popupWidth: 0,
popupHeight: 0,
config: {
top: 'top',
bottom: 'bottom',
center: 'center',
left: 'left',
right: 'right',
message: 'top',
dialog: 'center',
share: 'bottom',
},
maskClass: {
position: 'fixed',
bottom: 0,
top: 0,
left: 0,
right: 0,
backgroundColor: 'rgba(0, 0, 0, 0.4)',
},
transClass: {
position: 'fixed',
left: 0,
right: 0,
},
maskShow: true,
mkclick: true,
popupstyle: this.isDesktop ? 'fixforpc-top' : 'top',
};
},
computed: {
isDesktop() {
return this.popupWidth >= 500 && this.popupHeight >= 500;
},
bg() {
if (this.backgroundColor === '' || this.backgroundColor === 'none') {
return 'transparent';
}
return this.backgroundColor;
},
borderRadius() {
if (this.round) {
if (this.type === 'bottom') {
return {
'border-top-left-radius': parseFloat(this.round) + 'px',
'border-top-right-radius': parseFloat(this.round) + 'px',
};
}
if (this.type === 'center') {
return {
'border-top-left-radius': parseFloat(this.round) + 'px',
'border-top-right-radius': parseFloat(this.round) + 'px',
'border-bottom-left-radius': parseFloat(this.round) + 'px',
'border-bottom-right-radius': parseFloat(this.round) + 'px',
};
}
if (this.type === 'top') {
return {
'border-bottom-left-radius': parseFloat(this.round) + 'px',
'border-bottom-right-radius': parseFloat(this.round) + 'px',
};
}
}
},
},
mounted() {
const fixSize = () => {
const { windowWidth, windowHeight, windowTop, safeArea, screenHeight, safeAreaInsets } =
sheep.$platform.device;
this.popupWidth = windowWidth;
this.popupHeight = windowHeight + (windowTop || 0);
// TODO fix by mehaotian 是否适配底部安全区 ,目前微信ios 、和 app ios 计算有差异，需要框架修复
if (safeArea && this.safeArea) {
// #ifdef MP-WEIXIN
this.safeAreaInsets = screenHeight - safeArea.bottom;
// #endif
// #ifndef MP-WEIXIN
this.safeAreaInsets = safeAreaInsets.bottom;
// #endif
} else {
this.safeAreaInsets = 0;
}
};
fixSize();
// #ifdef H5
// window.addEventListener('resize', fixSize)
// this.$once('hook:beforeDestroy', () => {
// window.removeEventListener('resize', fixSize)
// })
// #endif
},
// #ifndef VUE3
// TODO vue2
destroyed() {
this.setH5Visible();
},
// #endif
// #ifdef VUE3
// TODO vue3
unmounted() {
this.setH5Visible();
},
// #endif
created() {
// this.mkclick = this.isMaskClick || this.maskClick
if (this.isMaskClick === null && this.maskClick === null) {
this.mkclick = true;
} else {
this.mkclick = this.isMaskClick !== null ? this.isMaskClick : this.maskClick;
}
if (this.animation) {
this.duration = 300;
} else {
this.duration = 0;
}
// TODO 处理 message 组件生命周期异常的问题
this.messageChild = null;
// TODO 解决头条冒泡的问题
this.clearPropagation = false;
this.maskClass.backgroundColor = this.maskBackgroundColor;
},
methods: {
setH5Visible() {
// #ifdef H5
// fix by mehaotian 处理 h5 滚动穿透的问题
document.getElementsByTagName('body')[0].style.overflow = 'visible';
// #endif
},
/**
* 公用方法，不显示遮罩层
*/
closeMask() {
this.maskShow = false;
},
/**
* 公用方法，遮罩层禁止点击
*/
disableMask() {
this.mkclick = false;
},
// TODO nvue 取消冒泡
clear(e) {
// #ifndef APP-NVUE
e.stopPropagation();
// #endif
this.clearPropagation = true;
},
open(direction) {
// fix by mehaotian 处理快速打开关闭的情况
if (this.showPopup) {
clearTimeout(this.timer);
this.showPopup = false;
}
let innerType = ['top', 'center', 'bottom', 'left', 'right', 'message', 'dialog', 'share'];
if (!(direction && innerType.indexOf(direction) !== -1)) {
direction = this.type;
}
if (!this.config[direction]) {
console.error('缺少类型：', direction);
return;
}
this[this.config[direction]]();
this.$emit('change', {
show: true,
type: direction,
});
},
close(type) {
this.showTrans = false;
this.$emit('change', {
show: false,
type: this.type,
});
this.$emit('close');
clearTimeout(this.timer);
// // 自定义关闭事件
// this.customOpen && this.customClose()
this.timer = setTimeout(() => {
this.showPopup = false;
}, 300);
},
// TODO 处理冒泡事件，头条的冒泡事件有问题 ，先这样兼容
touchstart() {
this.clearPropagation = false;
},
onTap() {
if (this.clearPropagation) {
// fix by mehaotian 兼容 nvue
this.clearPropagation = false;
return;
}
this.$emit('maskClick');
if (!this.mkclick) return;
this.close();
},
/**
* 顶部弹出样式处理
*/
top(type) {
this.popupstyle = this.isDesktop ? 'fixforpc-top' : 'top';
this.ani = ['slide-top'];
this.transClass = {
position: 'fixed',
left: 0,
right: 0,
top: this.space + 'px',
backgroundColor: this.bg,
};
// TODO 兼容 type 属性 ，后续会废弃
if (type) return;
this.showPopup = true;
this.showTrans = true;
this.$nextTick(() => {
if (this.messageChild && this.type === 'message') {
this.messageChild.timerClose();
}
});
},
/**
* 底部弹出样式处理
*/
bottom(type) {
this.popupstyle = 'bottom';
this.ani = ['slide-bottom'];
this.transClass = {
position: 'fixed',
left: 0,
right: 0,
bottom: 0,
paddingBottom: this.safeAreaInsets + this.space + 'px',
backgroundColor: this.bg,
};
// TODO 兼容 type 属性 ，后续会废弃
if (type) return;
this.showPopup = true;
this.showTrans = true;
},
/**
* 中间弹出样式处理
*/
center(type) {
this.popupstyle = 'center';
this.ani = ['zoom-out', 'fade'];
this.transClass = {
position: 'fixed',
/* #ifndef APP-NVUE */
display: 'flex',
flexDirection: 'column',
/* #endif */
bottom: 0,
left: 0,
right: 0,
top: 0,
justifyContent: 'center',
alignItems: 'center',
};
// TODO 兼容 type 属性 ，后续会废弃
if (type) return;
this.showPopup = true;
this.showTrans = true;
},
left(type) {
this.popupstyle = 'left';
this.ani = ['slide-left'];
this.transClass = {
position: 'fixed',
left: 0,
bottom: 0,
top: 0,
backgroundColor: this.bg,
/* #ifndef APP-NVUE */
display: 'flex',
flexDirection: 'column',
/* #endif */
};
// TODO 兼容 type 属性 ，后续会废弃
if (type) return;
this.showPopup = true;
this.showTrans = true;
},
right(type) {
this.popupstyle = 'right';
this.ani = ['slide-right'];
this.transClass = {
position: 'fixed',
bottom: 0,
right: 0,
top: 0,
backgroundColor: this.bg,
/* #ifndef APP-NVUE */
display: 'flex',
flexDirection: 'column',
/* #endif */
};
// TODO 兼容 type 属性 ，后续会废弃
if (type) return;
this.showPopup = true;
this.showTrans = true;
},
},
};
</script>
<style lang="scss">
// 关闭icon
.close-icon {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -80rpx;
z-index: 100;
}
.uni-popup {
position: fixed;
/* #ifndef APP-NVUE */
z-index: 99;
/* #endif */
&.top,
&.left,
&.right {
/* #ifdef H5 */
top: var(--window-top);
/* #endif */
/* #ifndef H5 */
top: 0;
/* #endif */
}
.uni-popup__wrapper {
/* #ifndef APP-NVUE */
display: block;
/* #endif */
position: relative;
background: v-bind(backgroundImage) no-repeat;
background-size: 100% 100%;
/* iphonex 等安全区设置，底部安全区适配 */
/* #ifndef APP-NVUE */
// padding-bottom: constant(safe-area-inset-bottom);
// padding-bottom: env(safe-area-inset-bottom);
/* #endif */
&.left,
&.right {
/* #ifdef H5 */
padding-top: var(--window-top);
/* #endif */
/* #ifndef H5 */
padding-top: 0;
/* #endif */
flex: 1;
}
}
}
.fixforpc-z-index {
/* #ifndef APP-NVUE */
z-index: 999;
/* #endif */
}
.fixforpc-top {
top: 0;
}
</style>

301
sheep/ui/su-radio/su-radio.vue Normal file
View File

@@ -0,0 +1,301 @@
<template>
<view
class="ui-radio ss-flex ss-col-center"
@tap="onRaido"
:class="[{ disabled: disabled }, { img: src }, ui]"
:style="[customStyle]"
>
<slot name="leftLabel"></slot>
<view
v-if="!none"
class="ui-radio-input"
:class="[isChecked ? 'cur ' + bg : unbg, src ? 'radius' : 'round']"
></view>
<image class="ui-radio-img radius" v-if="src" :src="src" mode="aspectFill"></image>
<view class="ui-radio-content" v-else>
<slot>
<view class="ui-label-text" :style="[labelStyle]">{{ label }}</view>
</slot>
</view>
<view
v-if="ui.includes('card')"
class="ui-radio-bg round"
:class="[isChecked ? 'cur ' + bg : '']"
></view>
</view>
</template>
<script setup>
/**
* 单选 - radio
*
*
* property {Object} customStyle - 自定义样式
* property {String} ui - radio样式Class
* property {String} modelValue - 绑定值
* property {Boolean} disabled - 是否禁用
* property {String} bg - 选中时背景Class
* property {String} unbg - 未选中时背景Class
* property {String} src - 图片选中radio
* property {String} label - label文本
* property {Boolean} none - 是否隐藏raido按钮
*
* @slot default - 自定义label样式
* @event {Function} change - change事件
*
*/
import { computed, reactive, watchPostEffect, getCurrentInstance } from 'vue';
const vm = getCurrentInstance();
// 组件数据
const state = reactive({
currentValue: false,
});
// 定义事件
const emits = defineEmits(['change', 'update:modelValue']);
// 接收参数
const props = defineProps({
customStyle: {
type: Object,
default: () => ({}),
},
ui: {
type: String,
default: 'check', //check line
},
modelValue: {
type: [String, Number, Boolean],
default: false,
},
disabled: {
type: Boolean,
default: false,
},
bg: {
type: String,
default: 'ui-BG-Main',
},
unbg: {
type: String,
default: 'borderss',
},
src: {
type: String,
default: '',
},
label: {
type: String,
default: '',
},
labelStyle: {
type: Object,
default: () => ({}),
},
none: {
type: Boolean,
default: false,
},
});
watchPostEffect(() => {
state.currentValue = props.modelValue;
emits('update:modelValue', state.currentValue);
});
// 是否选中
const isChecked = computed(() => state.currentValue);
// 点击
const onRaido = () => {
if (props.disabled) return;
state.currentValue = !state.currentValue;
emits('update:modelValue', state.currentValue);
emits('change', {
label: props.label,
value: state.currentValue,
});
};
</script>
<style lang="scss" scoped>
.ui-radio {
display: flex;
align-items: center;
margin: 0 0.5em 0 0;
height: 18px;
.ui-radio-input {
margin: 0 0.5em 0 0;
display: inline-block;
width: 18px;
height: 18px;
vertical-align: middle;
line-height: 18px;
&::before {
content: '';
position: absolute;
width: 0;
height: 0;
background-color: currentColor;
border-radius: 18px;
@include position-center;
}
}
.ui-radio-input.cur {
position: relative;
&::before {
width: 10px;
height: 10px;
transition: $transition-base;
}
}
&:last-child {
margin: 0 0.14286em;
}
&.check {
.ui-radio-input {
&::before {
font-family: 'colorui';
content: '\e69f';
width: 18px;
height: 18px;
font-size: 0;
background-color: transparent;
}
}
.ui-radio-input.cur {
&::before {
width: 18px;
height: 18px;
font-size: 1em;
transform: scale(0.8);
text-align: center;
line-height: 18px;
}
}
}
&.line {
.ui-radio-input.cur {
&::before {
width: calc(100% - 2px);
height: calc(100% - 2px);
background-color: var(--ui-BG);
}
&::after {
content: '';
position: absolute;
width: 10px;
height: 10px;
background-color: inherit;
border-radius: 50%;
@include position-center;
}
}
}
&.lg {
.ui-radio-input {
font-size: 18px;
}
}
&.img {
position: relative;
margin: 0 0.28572em 0;
.ui-radio-input {
width: 42px;
height: 42px;
border-radius: 0px;
position: absolute;
margin: 0;
left: -1px;
top: -1px;
&::before {
width: 40px;
height: 40px;
border-radius: $radius;
}
&.cur {
width: 44px;
height: 44px;
top: -2px;
left: -2px;
border-radius: 7px !important;
opacity: 0.8;
}
}
.ui-radio-img {
width: 40px;
height: 40px;
display: block;
overflow: hidden;
border-radius: 10px;
}
}
&.card {
display: flex;
margin: 30rpx;
padding: 30rpx;
position: relative;
border-radius: $radius !important;
flex-direction: row-reverse;
justify-content: space-between;
.ui-radio-bg {
content: '';
position: absolute;
width: 200%;
height: 200%;
transform: scale(0.5);
border-radius: #{$radius * 2} !important;
z-index: 0;
left: 0;
top: 0;
transform-origin: 0 0;
background-color: var(--ui-BG);
}
.ui-radio-input {
position: relative;
z-index: 1;
margin-right: 0;
}
.ui-radio-bg::after {
content: '';
position: absolute;
width: calc(200% - 16px);
height: calc(200% - 16px);
transform: scale(0.5);
transform-origin: 0 0;
background-color: var(--ui-BG) !important;
left: 4px;
top: 4px;
border-radius: #{$radius * 2 + 8} !important;
z-index: 0;
}
.ui-radio-content {
position: relative;
z-index: 1;
display: flex;
align-items: center;
flex: 1;
}
}
}
</style>