press-pix/common/styles/pubgm/direction-base.less

基于 PixUI 的 Press 组件库

/**
 * 方向敏感混合宏定义 - direction-base.less
 * ============================================
 * @author lauheeliu（刘诏熹）
 * @email lauheeliu@tencent.com
 * 
 * 📖 功能说明
 * -----------
 * 提供 LTR/RTL 双向布局支持的混合宏集合，自动输出两套样式
 * 实现一套代码同时支持从左到右(LTR)和从右到左(RTL)的文本方向
 * 
 * 🎯 设计理念
 * -----------
 * 1. 使用混合宏封装方向敏感属性（如 .margin-inline-start(10px)）
 * 2. 混合宏自动输出 LTR 默认样式 + RTL 覆盖样式
 * 3. 通过 :global(.rtl-map) 父选择器触发 RTL 样式
 * 4. 零冗余代码：组件无需关心方向逻辑，只需调用混合宏
 * 
 * 📝 使用方法
 * -----------
 * // 1. 在组件样式文件顶部导入此文件
 * @import '../../../local-component/ui/styles/direction-base.less';
 * 
 * // 2. 使用混合宏定义方向敏感样式
 * .container {
 *   .margin-inline-start(0.2rem);         // LTR: margin-left, RTL: margin-right
 *   .padding-inline-end(0.4rem);          // LTR: padding-right, RTL: padding-left
 *   .border-inline-start(0.02rem solid #ccc); // LTR: border-left, RTL: border-right
 *   .text-align-start();                  // LTR: text-align: left, RTL: text-align: right
 *   .flex-direction-row();                // LTR: flex-direction: row, RTL: row-reverse
 * }
 * 
 * 🔄 RTL 模式切换
 * ---------------
 * // JavaScript 中根据语言动态添加类名到根元素
 * const isRTLLanguage = ['ar', 'he', 'fa', 'ur'].includes(currentLanguage);
 * document.documentElement.classList.toggle('rtl-map', isRTLLanguage);
 * 
 * ⚠️ 注意事项
 * -----------
 * 1. 使用前必须在样式文件中手动导入此文件：@import './direction-base.less'
 * 2. 避免直接使用 left/right 等物理属性，统一使用混合宏
 * 3. 新增方向敏感属性时需同步更新此文件
 * 4. 建议使用 rem 单位以支持响应式设计（换算公式：px * 2 / 100 = rem）
 * 5. 仅在需要使用混合宏的文件中导入，避免不必要的依赖
 */

/* ============================================
 * 📐 文本对齐混合宏
 * ============================================ */

/**
 * 文本起始对齐（逻辑属性）
 * @description LTR: text-align: left | RTL: text-align: right
 */
.text-align-start() {
  text-align: left;
  
  :global(.rtl-map) & {
    text-align: right;
  }
}

/**
 * 文本结束对齐（逻辑属性）
 * @description LTR: text-align: right | RTL: text-align: left
 */
.text-align-end() {
  text-align: right;
  
  :global(.rtl-map) & {
    text-align: left;
  }
}

/* ============================================
 * 🔄 Flex 布局方向混合宏
 * ============================================ */

/**
 * Flex 行方向（逻辑属性）
 * @description LTR: flex-direction: row | RTL: flex-direction: row-reverse
 */
.flex-direction-row() {
  flex-direction: row;
  
  :global(.rtl-map) & {
    flex-direction: row-reverse;
  }
}

/**
 * Flex 行反向（逻辑属性）
 * @description LTR: flex-direction: row-reverse | RTL: flex-direction: row
 */
.flex-direction-row-reverse() {
  flex-direction: row-reverse;
  
  :global(.rtl-map) & {
    flex-direction: row;
  }
}

/* ============================================
 * ↔️ Flex 主轴对齐混合宏
 * ============================================ */

/**
 * 主轴起始对齐（逻辑属性）
 * @description LTR: justify-content: flex-start | RTL: justify-content: flex-end
 */
.justify-content-start() {
  justify-content: flex-start;
  
  :global(.rtl-map) & {
    justify-content: flex-end;
  }
}

/**
 * 主轴结束对齐（逻辑属性）
 * @description LTR: justify-content: flex-end | RTL: justify-content: flex-start
 */
.justify-content-end() {
  justify-content: flex-end;
  
  :global(.rtl-map) & {
    justify-content: flex-start;
  }
}

/* ============================================
 * 📦 Flex 换行对齐混合宏
 * ============================================ */

/**
 * 换行起始对齐（逻辑属性）
 * @description LTR: align-content: flex-start | RTL: align-content: flex-end
 */
.align-content-start() {
  align-content: flex-start;
  
  :global(.rtl-map) & {
    align-content: flex-end;
  }
}

/**
 * 换行结束对齐（逻辑属性）
 * @description LTR: align-content: flex-end | RTL: align-content: flex-start
 */
.align-content-end() {
  align-content: flex-end;
  
  :global(.rtl-map) & {
    align-content: flex-start;
  }
}

/* ============================================
 * ⬍ Flex 交叉轴对齐混合宏（align-items）
 * ============================================ */

/**
 * 交叉轴起始对齐（逻辑属性）
 * @description LTR: align-items: flex-start | RTL: align-items: flex-end
 */
.align-items-start() {
  align-items: flex-start;
  
  :global(.rtl-map) & {
    align-items: flex-end;
  }
}

/**
 * 交叉轴结束对齐（逻辑属性）
 * @description LTR: align-items: flex-end | RTL: align-items: flex-start
 */
.align-items-end() {
  align-items: flex-end;
  
  :global(.rtl-map) & {
    align-items: flex-start;
  }
}

/* ============================================
 * ⬍ Flex 单项交叉轴对齐混合宏（align-self）
 * ============================================ */

/**
 * 单项交叉轴起始对齐（逻辑属性）
 * @description LTR: align-self: flex-start | RTL: align-self: flex-end
 */
.align-self-start() {
  align-self: flex-start;
  
  :global(.rtl-map) & {
    align-self: flex-end;
  }
}

/**
 * 单项交叉轴结束对齐（逻辑属性）
 * @description LTR: align-self: flex-end | RTL: align-self: flex-start
 */
.align-self-end() {
  align-self: flex-end;
  
  :global(.rtl-map) & {
    align-self: flex-start;
  }
}

/* ============================================
 * 📏 外边距混合宏（Margin）
 * ============================================ */

/**
 * 行内起始外边距（逻辑属性）
 * @param {string} @value - 外边距值（如：10px, 1rem）
 * @description LTR: margin-left | RTL: margin-right
 */
.margin-inline-start(@value) {
  margin-left: @value;
  
  :global(.rtl-map) & {
    margin-left: 0;
    margin-right: @value;
  }
}

/**
 * 行内结束外边距（逻辑属性）
 * @param {string} @value - 外边距值（如：10px, 1rem）
 * @description LTR: margin-right | RTL: margin-left
 */
.margin-inline-end(@value) {
  margin-right: @value;
  
  :global(.rtl-map) & {
    margin-right: 0;
    margin-left: @value;
  }
}

/* ============================================
 * 📦 内边距混合宏（Padding）
 * ============================================ */

/**
 * 行内起始内边距（逻辑属性）
 * @param {string} @value - 内边距值（如：10px, 1rem）
 * @description LTR: padding-left | RTL: padding-right
 */
.padding-inline-start(@value) {
  padding-left: @value;
  
  :global(.rtl-map) & {
    padding-left: 0;
    padding-right: @value;
  }
}

/**
 * 行内结束内边距（逻辑属性）
 * @param {string} @value - 内边距值（如：10px, 1rem）
 * @description LTR: padding-right | RTL: padding-left
 */
.padding-inline-end(@value) {
  padding-right: @value;
  
  :global(.rtl-map) & {
    padding-right: 0;
    padding-left: @value;
  }
}

/* ============================================
 * 🔲 边框混合宏（Border）
 * ============================================ */

/**
 * 行内起始边框（逻辑属性）
 * @param {string} @value - 边框值（如：1px solid #ccc）
 * @description LTR: border-left | RTL: border-right
 */
.border-inline-start(@value) {
  border-left: @value;
  
  :global(.rtl-map) & {
    border-left: none;
    border-right: @value;
  }
}

/**
 * 行内结束边框（逻辑属性）
 * @param {string} @value - 边框值（如：1px solid #ccc）
 * @description LTR: border-right | RTL: border-left
 */
.border-inline-end(@value) {
  border-right: @value;
  
  :global(.rtl-map) & {
    border-right: none;
    border-left: @value;
  }
}

/**
 * 行内起始边框宽度（逻辑属性）
 * @param {string} @value - 边框宽度值（如：1px, 2px）
 * @description LTR: border-left-width | RTL: border-right-width
 */
.border-inline-start-width(@value) {
  border-left-width: @value;
  
  :global(.rtl-map) & {
    border-left-width: 0;
    border-right-width: @value;
  }
}

/**
 * 行内结束边框宽度（逻辑属性）
 * @param {string} @value - 边框宽度值（如：1px, 2px）
 * @description LTR: border-right-width | RTL: border-left-width
 */
.border-inline-end-width(@value) {
  border-right-width: @value;
  
  :global(.rtl-map) & {
    border-right-width: 0;
    border-left-width: @value;
  }
}

/**
 * 行内起始边框样式（逻辑属性）
 * @param {string} @value - 边框样式值（如：solid, dashed）
 * @description LTR: border-left-style | RTL: border-right-style
 */
.border-inline-start-style(@value) {
  border-left-style: @value;
  
  :global(.rtl-map) & {
    border-left-style: none;
    border-right-style: @value;
  }
}

/**
 * 行内结束边框样式（逻辑属性）
 * @param {string} @value - 边框样式值（如：solid, dashed）
 * @description LTR: border-right-style | RTL: border-left-style
 */
.border-inline-end-style(@value) {
  border-right-style: @value;
  
  :global(.rtl-map) & {
    border-right-style: none;
    border-left-style: @value;
  }
}

/**
 * 行内起始边框颜色（逻辑属性）
 * @param {string} @value - 边框颜色值（如：#ccc, red）
 * @description LTR: border-left-color | RTL: border-right-color
 */
.border-inline-start-color(@value) {
  border-left-color: @value;
  
  :global(.rtl-map) & {
    border-right-color: @value;
  }
}

/**
 * 行内结束边框颜色（逻辑属性）
 * @param {string} @value - 边框颜色值（如：#ccc, red）
 * @description LTR: border-right-color | RTL: border-left-color
 */
.border-inline-end-color(@value) {
  border-right-color: @value;
  
  :global(.rtl-map) & {
    border-left-color: @value;
  }
}

/* ============================================
 * 📍 定位混合宏（Position）
 * ============================================ */

/**
 * 行内起始定位（逻辑属性）
 * @param {string} @value - 定位值（如：0, 10px, 50%）
 * @description LTR: left | RTL: right
 */
.inset-inline-start(@value) {
  left: @value;
  
  :global(.rtl-map) & {
    left: auto;
    right: @value;
  }
}

/**
 * 行内结束定位（逻辑属性）
 * @param {string} @value - 定位值（如：0, 10px, 50%）
 * @description LTR: right | RTL: left
 */
.inset-inline-end(@value) {
  right: @value;
  
  :global(.rtl-map) & {
    right: auto;
    left: @value;
  }
}

/* ============================================
 * 🔄 方向性图标混合宏（Directional Icons）
 * ============================================ */

/**
 * 方向性图标水平镜像（用于箭头、三角形等方向性图标）
 * @description 在 RTL 模式下自动水平翻转图标，支持可选的其他变换
 * @param {string} @otherTransforms - 可选，其他变换（如：rotate(45deg), scale(1.2)）
 * @note 参数传递时不要使用引号，直接传入 CSS 值
 * @example
 * // ✅ 基础用法：只翻转
 * .arrow-icon {
 *   .bgUrl('home/arrow.png');
 *   .rtl-flip-horizontal();  // RTL 模式下自动水平翻转
 * }
 * 
 * // ✅ 多个变换
 * .complex-arrow {
 *   .rtl-flip-horizontal(rotate(45deg) scale(1.2));  // 正确：不带引号
 * }
 * 
 * // ❌ 错误用法
 * .wrong-arrow {
 *   .rtl-flip-horizontal('rotate(45deg)');  // 错误：不要用引号
 * }
 */
.rtl-flip-horizontal(@otherTransforms: ~'') {
  & when not (@otherTransforms = ~'') {
    // 如果传入了其他变换，在 LTR 模式下也应用
    transform: @otherTransforms;
  }
  
  :global(.rtl-map) & {
    & when (@otherTransforms = ~'') {
      // 没有其他变换，只翻转
      transform: scaleX(-1);
    }
    & when not (@otherTransforms = ~'') {
      // 有其他变换，翻转 + 其他变换
      transform: scaleX(-1) @otherTransforms;
    }
  }
}