How to use the @uifabric/merge-styles/lib/transforms/rtlifyRules.getRTL function in @uifabric/merge-styles

To help you get started, we’ve selected a few @uifabric/merge-styles examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github s-bauer / office-ui-fabric-vue / src / components / Slider / OfficeSlider.vue View on Github external
private onMouseMoveOrTouchMove(event: MouseEvent | TouchEvent, suppressEventCancelation?: boolean): void {
            if (!this.$refs.sliderLine)
                return;

            const {max, min, step} = this;
            const steps: number = (max! - min!) / step!;
            const sliderPositionRect: ClientRect = (this.$refs.sliderLine as HTMLDivElement).getBoundingClientRect();
            const sliderLength: number = !this.vertical ? sliderPositionRect.width : sliderPositionRect.height;
            const stepLength: number = sliderLength / steps;
            let currentSteps: number | undefined;
            let distance: number | undefined;

            if (!this.vertical) {
                const left: number | undefined = this.getPosition(event, this.vertical);
                distance = getRTL() ? sliderPositionRect.right - left! : left! - sliderPositionRect.left;
                currentSteps = distance / stepLength;
            } else {
                const bottom: number | undefined = this.getPosition(event, this.vertical);
                distance = sliderPositionRect.bottom - bottom!;
                currentSteps = distance / stepLength;
            }

            let currentValue: number | undefined;
            let renderedValue: number | undefined;

            // The value shouldn't be bigger than max or be smaller than min.
            if (currentSteps! > Math.floor(steps)) {
                renderedValue = currentValue = max as number;
            } else if (currentSteps! < 0) {
                renderedValue = currentValue = min as number;
            } else {
github s-bauer / office-ui-fabric-vue / packages / office-ui-fabric-vue / src / ProgressIndicator / OfficeProgressIndicator.styles.ts View on Github external
export const getStyles = (props: IProgressIndicatorStyleProps): IProgressIndicatorStyles => {
  const isRTL = getRTL();
  const { className, indeterminate, theme, barHeight = 2 } = props;

  const { palette, semanticColors } = theme;
  const classNames = getGlobalClassNames(GlobalClassNames, theme);

  const marginBetweenText = 8;
  const textHeight = 18;
  const progressTrackColor = palette.neutralLight;

  return {
    root: [
      classNames.root,
      theme.fonts.medium,
      {
        fontWeight: FontWeights.regular
      },
github s-bauer / office-ui-fabric-vue / src / components / Slider / OfficeSlider.vue View on Github external
private get thumbStyle() {
            const direction: string = this.vertical ? "bottom" : getRTL() ? "right" : "left";
            return {
                [direction]: this.thumbOffsetPercent + "%"
            };
        }