devextreme/less/sources/widgets/material/typography.material.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/material/typography.material.less)
* Version: 20.1.4
* Build date: Tue Jun 02 2020
*
* Copyright (c) 2012 - 2020 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
@import (css) "https://fonts.googleapis.com/css?family=Roboto:300,400,500,700";
@import (css) "https://fonts.googleapis.com/earlyaccess/notokufiarabic.css";

@font-face {
    font-family: 'RobotoFallback';
    font-style: normal;
    font-weight: 300;
    src:
        local('Roboto Light'),
        local('Roboto-Light'),
        url(~"fonts/Roboto-300.woff2") format('woff2'),
        url(~"fonts/Roboto-300.woff") format('woff'),
        url(~"fonts/Roboto-300.ttf") format('truetype');
}

@font-face {
    font-family: 'RobotoFallback';
    font-style: normal;
    font-weight: 400;
    src:
        local('Roboto'),
        local('Roboto-Regular'),
        url(~"fonts/Roboto-400.woff2") format('woff2'),
        url(~"fonts/Roboto-400.woff") format('woff'),
        url(~"fonts/Roboto-400.ttf") format('truetype');
}

@font-face {
    font-family: 'RobotoFallback';
    font-style: normal;
    font-weight: 500;
    src:
        local('Roboto Medium'),
        local('Roboto-Medium'),
        url(~"fonts/Roboto-500.woff2") format('woff2'),
        url(~"fonts/Roboto-500.woff") format('woff'),
        url(~"fonts/Roboto-500.ttf") format('truetype');
}

@font-face {
    font-family: 'RobotoFallback';
    font-style: normal;
    font-weight: 700;
    src:
        local('Roboto Bold'),
        local('Roboto-Bold'),
        url(~"fonts/Roboto-700.woff2") format('woff2'),
        url(~"fonts/Roboto-700.woff") format('woff'),
        url(~"fonts/Roboto-700.ttf") format('truetype');
}

.dx-s-font-mixin() {
    font-size: @MATERIAL_S_FONT_SIZE;
}

.dx-theme-material-typography {
    background-color: @typography-bg;
    .dx-base-typography();

    h1 {
        font-weight: 300;
        font-size: @MATERIAL_H1_FONT_SIZE;
        letter-spacing: -1.5px;
    }

    h2 {
        font-weight: 300;
        font-size: @MATERIAL_H2_FONT_SIZE;
        letter-spacing: -0.5px;
    }

    h3 {
        font-weight: 400;
        font-size: @MATERIAL_H3_FONT_SIZE;
    }

    h4 {
        font-weight: 400;
        font-size: @MATERIAL_H4_FONT_SIZE;
        letter-spacing: 0.25px;
    }

    h5 {
        font-weight: 400;
        font-size: @MATERIAL_H5_FONT_SIZE;
    }

    h6 {
        font-weight: 500;
        font-size: @MATERIAL_H6_FONT_SIZE;
        letter-spacing: 0.15px;
    }

    .dx-font-xl {
        font-size: @MATERIAL_XL_FONT_SIZE;
    }

    .dx-font-l {
        font-size: @MATERIAL_L_FONT_SIZE;
    }

    .dx-font-m {
        font-size: @MATERIAL_M_FONT_SIZE;
    }

    .dx-font-s {
        .dx-s-font-mixin();
    }

    small,
    .dx-font-xs {
        font-size: @MATERIAL_XS_FONT_SIZE;
    }

    a {
        color: @typography-link-color;
    }
}