metro4
Version:
The front-end framework for Build responsive, mobile-first projects on the web with the first front-end component library in Metro Style
309 lines (260 loc) • 14.3 kB
text/less
@unitSize: 4px;
// Fonts
@fontName: -apple-system, system-ui, BlinkMacSystemFont,
"Segoe UI", "Roboto", "Ubuntu",
"Helvetica Neue", sans-serif;
@fontSize: @unitSize * 4;
// Colors
@lightenValue: 15%;
@darkenValue: 15%;
@transparent: transparent;
@brandColor1: #2ac4f4;
@brandColor2: #004d6f;
@black: #000000;
@white: #ffffff;
@dark: #1d1d1d;
@light: #f8f8f8;
@gray: #bebebe;
@grayBlue: #607d8b;
@grayWhite: #f5f5f5;
@grayMouse: #455a64;
@lime: #a4c400;
@green: #60a917;
@emerald: #008a00;
@blue: #00AFF0;
@teal: #00aba9;
@cyan: #1ba1e2;
@cobalt: #0050ef;
@indigo: #6a00ff;
@violet: #aa00ff;
@pink: #dc4fad;
@magenta: #d80073;
@crimson: #a20025;
@red: #CE352C;
@orange: #fa6800;
@amber: #f0a30a;
@yellow: #fff000;
@brown: #825a2c;
@olive: #6d8764;
@steel: #647687;
@mauve: #76608a;
@taupe: #87794e;
@lightLime: lighten(@lime, @lightenValue);
@lightGreen: lighten(@green, @lightenValue);
@lightEmerald: lighten(@emerald, @lightenValue);
@lightBlue: lighten(@blue, @lightenValue);
@lightTeal: lighten(@teal, @lightenValue);
@lightCyan: lighten(@cyan, @lightenValue);
@lightCobalt: lighten(@cobalt, @lightenValue);
@lightIndigo: lighten(@indigo, @lightenValue);
@lightViolet: lighten(@violet, @lightenValue);
@lightPink: lighten(@pink, @lightenValue);
@lightMagenta: lighten(@magenta, @lightenValue);
@lightCrimson: lighten(@crimson, @lightenValue);
@lightRed: lighten(@red, @lightenValue);
@lightOrange: lighten(@orange, @lightenValue);
@lightAmber: lighten(@amber, @lightenValue);
@lightYellow: lighten(@yellow, @lightenValue);
@lightBrown: lighten(@brown, @lightenValue);
@lightOlive: lighten(@olive, @lightenValue);
@lightSteel: lighten(@steel, @lightenValue);
@lightMauve: lighten(@mauve, @lightenValue);
@lightTaupe: lighten(@taupe, @lightenValue);
@lightGray: lighten(@gray, @lightenValue);
@lightGrayBlue: lighten(@grayBlue, @lightenValue);
@darkLime: darken(@lime, @darkenValue);
@darkGreen: darken(@green, @darkenValue);
@darkEmerald: darken(@emerald, @darkenValue);
@darkBlue: darken(@blue, @darkenValue);
@darkTeal: darken(@teal, @darkenValue);
@darkCyan: darken(@cyan, @darkenValue);
@darkCobalt: darken(@cobalt, @darkenValue);
@darkIndigo: darken(@indigo, @darkenValue);
@darkViolet: darken(@violet, @darkenValue);
@darkPink: darken(@pink, @darkenValue);
@darkMagenta: darken(@magenta, @darkenValue);
@darkCrimson: darken(@crimson, @darkenValue);
@darkRed: darken(@red, @darkenValue);
@darkOrange: darken(@orange, @darkenValue);
@darkAmber: darken(@amber, @darkenValue);
@darkYellow: darken(@yellow, @darkenValue);
@darkBrown: darken(@brown, @darkenValue);
@darkOlive: darken(@olive, @darkenValue);
@darkSteel: darken(@steel, @darkenValue);
@darkMauve: darken(@mauve, @darkenValue);
@darkTaupe: darken(@taupe, @darkenValue);
@darkGray: darken(@gray, @darkenValue);
@darkGrayBlue: darken(@grayBlue, @darkenValue);
@colorList: black, white, dark, light, grayBlue, grayWhite, grayMouse, brandColor1, brandColor2,
lime, green, emerald, blue, teal, cyan, cobalt, indigo, violet, pink, magenta, crimson, red, orange, amber, yellow, brown, olive, steel, mauve, taupe, gray,
lightLime, lightGreen, lightEmerald, lightBlue, lightTeal, lightCyan, lightCobalt, lightIndigo, lightViolet, lightPink, lightMagenta, lightCrimson, lightRed, lightOrange, lightAmber, lightYellow, lightBrown, lightOlive, lightSteel, lightMauve, lightTaupe, lightGray, lightGrayBlue,
darkLime, darkGreen, darkEmerald, darkBlue, darkTeal, darkCyan, darkCobalt, darkIndigo, darkViolet, darkPink, darkMagenta, darkCrimson, darkRed, darkOrange, darkAmber, darkYellow, darkBrown, darkOlive, darkSteel, darkMauve, darkTaupe, darkGray, darkGrayBlue;
@colorListLength: length(@colorList);
// Body
@bodyColor: lighten(@black, 13%);
// Hover
@hoverBackground: rgba(red(@dark), green(@dark), blue(@dark), .1);
@hoverBackground2: rgba(red(@dark), green(@dark), blue(@dark), .5);
@hoverBackgroundLight3: rgba(red(@white), green(@white), blue(@white), .3);
@hoverBackgroundLight2: rgba(red(@white), green(@white), blue(@white), .2);
@hoverBackgroundLight1: rgba(red(@white), green(@white), blue(@white), .1);
@hoverBackgroundLight: rgba(red(@white), green(@white), blue(@white), .01);
// Appbar
@appBarBackground: @brandColor2;
@appBarBackgroundActive: lighten(@brandColor2, 10%);
@appBarColor: @white;
// Taskbar
@taskBarBackground: #053046;
@taskBarItemHover: rgba(red(@white), green(@white), blue(@white), .1);
@taskBarItemActive: rgba(red(@white), green(@white), blue(@white), .3);
// Form and Inputs
@inputBorder: #d9d9d9;
@checkBackground: darken(@inputBorder, 10%);
// Disabled
@disabledBackground: #e9e9e9;
@disabledBorder: #e9e9e9;
@disabledColor: lighten(@dark, 50%);
// Borders
@borderRadius: .25rem;
@borderColor: darken(@light, 10%);
// Links
@linkColor: #0366d6;
@linkColorHover: #0056b3;
// Accent colors
@primaryColor: #0366d6;
@secondaryColor: @grayBlue;
@successColor: @green;
@alertColor: @red;
@warningColor: @lightOrange;
@yellowColor: #ffe484;
@infoColor: @lightCyan;
@darkColor: lighten(@dark, 20%);
@lightColor: @light;
@brand1Color: @brandColor1;
@brand2Color: @brandColor2;
@accentColors: primary, secondary, success, alert, warning, yellow, info, dark, light;
@buttonPredefinedTypes: primary, secondary, success, alert, warning, yellow, info, dark, light, brand1, brand2;
@buttonPredefinedTypesLength: length(@buttonPredefinedTypes);
// Selected element
@selectedElementBorder: @lightCyan;
// Z-index
@zindex-selectedCheck: 100;
@zindex-absolute: 500;
@zindex-dropdown: 1000;
@zindex-sticky: 1020;
@zindex-fixed: 1030;
@zindex-modal-backdrop: 1040;
@zindex-modal: 1050;
@zindex-popover: 1060;
@zindex-tooltip: 1070;
@zindex-top: 1080;
@zindex-notify: 1085;
@zindex-charms: 1090;
@zindex-overlay: 2000;
@zindex-fullscreen: 2147483647;
// Percents breakpoints
@percentBreakpointsList: 25, 50, 75, 100;
@percentBreakpointsLength: length(@percentBreakpointsList);
// Tiles
@tileApp: 44px 44px;
@tileSmall: 70px 70px;
@tileMedium: 150px 150px;
@tileWide: 310px 150px;
@tileLarge: 310px 310px;
@tileMargin: 5px;
@tileCellSize: extract(@tileMedium, 1);
@tileOutlineColor: rgba(red(@dark), green(@dark), blue(@dark), .1);
@tileTransformPerspective: 500px;
@tileTransformRotate: 0.138372rad;
@tileSize: extract(@tileMedium, 1);
// Media breakpoints
@fs: 0;
@xs: 360px;
@sm: 576px;
@ld: 640px;
@md: 768px;
@lg: 992px;
@xl: 1200px;
@xxl: 1452px;
@xxxl: 1600px;
@xxxxl: 1800px;
@xxxxxl: 2000px;
@mediaBreakpointListMobile: fs, sm, ld, md, lg, xl, xxl, xxxl, xxxxl, xxxxxl;
@mediaBreakpointListMobileLength: length(@mediaBreakpointListMobile);
@percents: 25, 33, 50, 75, 100;
@percentsLength: length(@percents);
// Transition
@transition-speed: .3s;
@transition-short: all .15s ease-in-out;
@transition-base: all .3s ease-in-out;
@transition-long: all 1s ease-in-out;
@transition-margin: margin .3s ease-in-out;
@transition-fade: opacity .15s linear;
@transition-color: color .3s linear;
@transition-collapse: max-height .3s ease;
@transition-width: width .3s ease;
@transition-left: left .3s ease;
@transition-right: right .3s ease;
@transition-top: top .3s ease;
@transition-bottom: bottom .3s ease;
@transition-transform: transform .3s ease;
// Grid
@gridColumns12: 12;
@gridGapSize: 12px;
@gridCellBaseSize: 8.333335%;
// Windows
@winBorderSize: .5rem;
@winBorderColor: #6badf6;
@winBorderColorInactive: #ebebeb;
@winDialogContentBackground: #ededed;
@winFlatBackgroundColor: #ffffff;
@winFlatBorderColor: #e9e9e9;
@winFlatSystemButtonHoverBackground: #cde6f7;
@winFlatSystemButtonActiveBackground: #92c0e0;
@winFlatSystemButtonActiveColor: #2a8dd4;
@winFlatSystemButtonRestColor: #777777;
@winCloseButtonColor: #c75050;
@winCloseButtonActiveColor: #e04343;
@winCloseButtonInActiveColor: #bcbcbc;
@winCaptionBackground: #3c6478;
@winCaptionColor: @white;
@streamerItemWidth: 224px;
@streamerTimelineImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOAAAAATCAYAAACJKwFWAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo2OWY4NzBhNi0zODU3LWFmNDEtYWMzZS03YzlkOTcxZjMxOTIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NEREMzg4NkJBQjkyMTFFN0JDQTVFMzg4RUE0RDc4RkQiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NEREMzg4NkFBQjkyMTFFN0JDQTVFMzg4RUE0RDc4RkQiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6YzEyZGQ1NjktNmM3YS0yZTQ2LTg2MmQtZWY3OGU5MmQ4NWY2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjY5Zjg3MGE2LTM4NTctYWY0MS1hYzNlLTdjOWQ5NzFmMzE5MiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pv3rUTMAAAIHSURBVHja7Jq/S0JRHMWfpj37oSA8qikIImioIaghaHDrD2hqaG4R6i8paGksh2iIQGhoCYewocChhkDEoAjsx5IGDZV2Ll6huXvoKZwPHHwuh3O/737f03tvpNVqeUKIcIiYBiwUCoe4LhH8FqAadO/oE0BT0AUh0xxUhyqOPklohpRpFvqEbh194tA8dGX9XJi2fteE8S1CN1DD0WcSSpHmpslUhl4dfcahMeiSMTdj9qKYyWR2/uKA5v39dd1OUNebOAKtQtuEQa5Bd9C5o4+pVRbaImRagd6hU4LXJinTMjQMHZEymfn05eizBE1AOUKmDegAeiY8PE0z7xIyZaP2op/0Rk1AaYKPeQP6pEyD9inqyigx05B9ozLG5ttPV5I2FwPf1suVFGlsnUwBwSdt5zmD/qh+hQsRHmpAIdSAQqgBhRBqQCHUgEKIfyBG9jP7SD4pV5KYibFs3EfMZJbWu+0I0oDH24ZI2nq5krD3j5UpTvDxiZnoDWg2Ot8IPmbjfI+UqQo9EXw+vPZJCgYn0HeXNeCjx9vfKtt6uVIjPqhMpjrBx5ykqXRrA1ZJPg3P/RhTh2OSzwu0T/J66MJfQ2dEL1adisRMOZJPyeMcjdN/QCHCRg0ohBpQCDWgECKkBgxUip4k4rVXLiMqRU8SdBowr1r0JE2vvbTeVCl6kvyPAAMASGlSBhr76A8AAAAASUVORK5CYII=";
@activityRingTime: 4000ms;
@activityRingSize: 32px;
@activityColor: @white;
@activityColorDark: @darkGray;
@activityRingRotate: -14deg;
@activityRingTimeMute: 30;
@hintBackground: rgba(255, 252, 192, 1);
@hintColor: @dark;
@mpStep: 4;
@mpUnit: px;
@playerInactiveColor: #555555;
@playerActiveColor: @green;
@playerHoverColor: @white;
@playerControlsBackground: rgba(34, 34, 34, 0.5);
@ribbonMenuStaticBackground: #1979ca;
@ribbonMenuBackground: #ffffff;
@ribbonMenuActiveBackground: #f5f6f7;
@ribbonMenuBorder: #dadbdc;
@ribbonMenuItemBorder: #a4cef9;
@ribbonMenuItemActiveBorder: #1979ca;
@ribbonMenuItemHoverBackground: rgba(red(#a4cef9), green(#a4cef9), blue(#a4cef9), .2);
@ribbonMenuItemActiveBackground: rgba(red(#a4cef9), green(#a4cef9), blue(#a4cef9), .8);
@ribbonDropdownBackground: #fbfcfd;
@ribbonDropdownDivider: #dcddde;
@ribbonDropdownShadow: #e3e4e5;
@inputHeight: 36px;
@input-lx: 50px;
@input-sx: 28px;
@badgeFontSize: 12px;
@johnDoe: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD//gA7Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2NjIpLCBxdWFsaXR5ID0gOTAK/9sAQwADAgIDAgIDAwMDBAMDBAUIBQUEBAUKBwcGCAwKDAwLCgsLDQ4SEA0OEQ4LCxAWEBETFBUVFQwPFxgWFBgSFBUU/9sAQwEDBAQFBAUJBQUJFA0LDRQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQU/8AAEQgAUABQAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/aAAwDAQACEQMRAD8A+t+KKPxo/GgA70Yo/Gj8aADFH4VesdC1HUl3WtjcXCf344yV/PGKW+0HUtNXddWNzbp/fkjIX88YoAofhR+FH40fjQAfhR+FH40fjQAUUUUAFepeAPh5D9li1LVYhK8g3Q27j5VXszDuT6f5HA+FtOXVvEWn2rjMcko3j1UckfkDX0MBgYHAoARVCKFUBVHAA6ClZQwKkZBGCDS0UAec+Pvh3BJay6lpUQimjBeW3QYVx3Kjsfbv/PyqvpuvnvxfpqaT4l1C1QbY0lJUDsrfMB+RoAyKKKKACiiigDa8GXq6f4p02eQgIJQpJ7Bvlz+tfQP4V8yDg17P4A8cw65ZxWV5IE1KMbfmP+uA7j39R+NAHaUfhSUUAL+FeA+OL1NQ8WalNGQU83YCO+0Bf6V6b498cQ6BZyWlrIJNSkXaApz5QP8AEff0FeKk5OTyTQAUUUUAH40fjRU1naTX93DbQIXmlYIijuTQBc0Dw/eeI74W1mm49XkbhUHqTXsHhz4eaXoCpI8YvbscmaYZAP8Asr0H8/etHwv4cg8M6XHaxANIfmllxy7dz9PStigA/Gk/GlooA5bxJ8PdL19XkWMWd43PnwjGT/tL0P8AP3rx/X/D954cvjbXibT1SReVceoNfRFZHijw5B4m0uS1lAWQfNFLjlG7H6etAHz5+NH41NeWk1hdzW06FJonKMp7EGoaACvQfhBowudTudRkXK2y7I8j+Nup/Afzrz6vafhRaCDwmkgHM8zufwO3/wBloA7Kiij8KACkpaSgBaSj8KKAPJvi/owttTttRjXC3K7JMf3l6H8R/KvPq9p+K1qJ/CbyEcwTI4P1O3/2avFqAP/Z";
// animation
@defaultPerspective: 600px;
@defaultAnimationSpeed: .3s;
// additional; colors
@ribbedSize: 20px;
@ribbedAlpha: .15;
@ribbedAngle: -45deg;
@alpha: .5;