atlas-guide/assets/css/dev_atlas-style.css.map

Atlas is living style-guides & pattern library static site generator with extensive CSS monitoring and components info that could be used virtually with any scss/css project

{"version":3,"sources":["bindings/styleguide/_atlas-style-section.scss","_dev-atlas-settings.scss","bindings/styleguide/_atlas-style-columns.scss","bindings/styleguide/_atlas-style-palette.scss","bindings/styleguide/_atlas-style-scale.scss","bindings/styleguide/_atlas-style-font.scss","bindings/styleguide/_atlas-style-layer.scss","bindings/styleguide/_atlas-style-motion.scss","bindings/styleguide/_atlas-style-space.scss","bindings/styleguide/_atlas-style-breaks.scss"],"names":[],"mappings":"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","file":"dev_atlas-style.css","sourcesContent":[".atlas-style-section {\n\tcolor: $atlas-color-text;\n\tmargin: $space-md-atlas 0 $space-xl-atlas;\n\tposition: relative;\n\n\t&__title {\n\t\tfont-family: $font-sans-atlas;\n\t\tfont-size: $scale-xl-atlas;\n\t\tfont-weight: bold;\n\t\tletter-spacing: -0.04em;\n\t\tmargin-bottom: $space-lg-atlas;\n\t}\n}\n","@use \"sass:math\";\n\n// Palette\n$color-grey60-atlas: hsl(0, 0%, 60%);\n$color-grey70-atlas: hsl(0, 0%, 70%);\n$color-grey80-atlas: hsl(0, 0%, 80%);\n$color-grey90-atlas: hsl(0, 0%, 90%);\n$color-grey95-atlas: hsl(0, 0%, 95%);\n$color-white-atlas: hsl(0, 0%, 100%);\n\n$color-blue-atlas: hsl(213, 75%, 54%);\n$color-blue79-atlas: hsl(213, 66%, 79%);\n\n$color-pink-atlas: hsl(328, 100%, 60%);\n$color-red-atlas: hsl(0, 92%, 60%);\n$color-orange-atlas: hsl(38, 92%, 60%);\n$color-yellow-atlas: hsl(53, 92%, 60%);\n$color-green-atlas: hsl(85, 60%, 60%);\n\n// Fonts\n$font-sans-atlas: \"Arial\", \"FreeSans\", sans-serif;\n$font-mono-atlas: \"DejaVu Sans Mono\", \"SFMono-Regular\", \"Menlo\", \"Consolas\", \"Lucida Console\", monospace;\n\n// Sizes\n$size-font-atlas: 16px; // 16px\n$size-line-atlas: $size-font-atlas * 1.25; // 20px\n\n// Scales\n$scale-sm-atlas: 12.8px;\n$scale-md-atlas: 15px;\n$scale-lg-atlas: 20px;\n$scale-xl-atlas: 25px;\n$scale-xxl-atlas: 39px;\n$scale-xxxl-atlas: 48.8px;\n\n// Spaces\n$space-sm-atlas: math.div($size-line-atlas, 2); // 10px\n$space-md-atlas: $size-line-atlas; // 20px\n$space-xm-atlas: math.div($size-line-atlas, 2) * 3; // 30px\n$space-lg-atlas: $size-line-atlas * 2; // 40px\n$space-xl-atlas: $size-line-atlas * 3; // 60px\n\n// Depth\n$depth--1: inset 0 3px 10px 1px rgba(black, 0.34);\n$depth-0: none;\n$depth-1: 0 3px 10px 1px rgba(black, 0.34);\n$depth-2: 0 9px 30px 3px rgba(black, 0.44);\n$depth-3: 0 30px 50px 5px rgba(black, 0.44);\n$depth-4: 0 45px 60px 6px rgba(black, 0.44);\n\n// Motion\n$motion-ease: cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s;\n$motion-fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1) 0.2s;\n$motion-linear-out-slow-in: cubic-bezier(0, 0, 0.2, 1) 0.2s;\n$motion-fast-out-linear-in: cubic-bezier(0.4, 0, 1, 1) 0.2s;\n\n// Breakpoints\n$break-xl: 1367px;\n$break-md: 1024px;\n$break-sm: 767px;\n\n// Applied colors\n$atlas-color-text: hsl(210, 0%, 35%);\n$atlas-color-divider: $color-grey70-atlas;\n$atlas-aside-bg: $color-grey95-atlas;\n$atlas-aside-bd: hsl(0, 0%, 87%);\n$atlas-aside-selected: hsl(0, 0%, 88%);\n\n// Applied sizes\n$atlas-scale-mono-small: 11px;\n$atlas-scale-primary: $scale-md-atlas;\n$atlas-scale-secondary: $scale-sm-atlas;\n\n// Applied radiuses\n$atlas-radius: 5px;\n","@use \"sass:math\";\n\n.atlas-style-columns {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\n\t&__item {\n\t\tmargin-bottom: $space-md-atlas;\n\n\t\t&._bottom {\n\t\t\talign-self: flex-end;\n\t\t}\n\t}\n\n\t&._span6 {\n\t\t.atlas-style-columns__item {\n\t\t\twidth: math.div(100%, 6);\n\t\t}\n\t}\n\n\t&._span3 {\n\t\t.atlas-style-columns__item {\n\t\t\tmin-width: math.div(100%, 3);\n\t\t\twidth: math.div(100%, 3);\n\t\t}\n\t}\n\n\t&._box {\n\t\talign-items: flex-end;\n\n\t\t.atlas-style-columns__item {\n\t\t\tmargin: 1px;\n\t\t}\n\t}\n}\n",".atlas-style-palette {\n\tfont-family: $font-sans-atlas;\n\ttext-align: center;\n\n\t&__swatch {\n\t\twidth: 100%;\n\t}\n\n\t&__text {\n\t\tfont-size: 32px;\n\t}\n\n\t&__caption {\n\t\tfont-family: $font-mono-atlas;\n\t\tfont-size: $atlas-scale-mono-small;\n\t}\n}\n",".atlas-style-scale {\n\talign-items: center;\n\tdisplay: flex;\n\tjustify-content: space-between;\n\tmargin-bottom: 0.5em;\n\twidth: 100%;\n\n\t&__text {\n\t\tline-height: 1.2;\n\t\toverflow: hidden;\n\t\tposition: relative;\n\t}\n\n\t&__text-content {\n\t\toverflow: hidden;\n\t\ttext-indent: 70px;\n\t\ttext-overflow: ellipsis;\n\t\twhite-space: nowrap;\n\t\twidth: 100%;\n\n\t\t&::after {\n\t\t\tcontent: \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris.\";\n\t\t}\n\t}\n\n\t&__name {\n\t\tfont-family: $font-mono-atlas;\n\t\tfont-size: $atlas-scale-mono-small;\n\t\tmin-width: 200px;\n\t\tpadding-left: $space-md-atlas;\n\t\twidth: 200px;\n\t}\n}\n",".atlas-style-font {\n\tmargin-right: $space-md-atlas;\n\n\t&__caption {\n\t\tborder-top: 1px solid $atlas-color-divider;\n\t\tdisplay: flex;\n\t\tfont-family: $font-mono-atlas;\n\t\tfont-size: $atlas-scale-mono-small;\n\t\tmargin-top: $space-sm-atlas;\n\t\tpadding-top: $space-sm-atlas;\n\t}\n\n\t&__name {\n\t\tmargin-bottom: $space-sm-atlas;\n\t\tmargin-right: $space-sm-atlas;\n\t\twhite-space: nowrap;\n\n\t\t&::after {\n\t\t\tcontent: \":\";\n\t\t}\n\t}\n\n\t&__example {\n\t\t&._logo {\n\t\t\tfont-size: 64px;\n\t\t\tline-height: 1;\n\n\t\t\t&::before {\n\t\t\t\tcontent: \"Aa\";\n\t\t\t}\n\t\t}\n\n\t\t&._characters {\n\t\t\toverflow: hidden;\n\t\t\twhite-space: nowrap;\n\n\t\t\t&::before {\n\t\t\t\tcontent: \"a b c d e f g h i j k l m n o p q r s t u v w x y z\";\n\t\t\t}\n\t\t}\n\n\t\t&._characters-capital {\n\t\t\toverflow: hidden;\n\t\t\twhite-space: nowrap;\n\n\t\t\t&::before {\n\t\t\t\tcontent: \"A B C D E F G H I J K L M N O P Q R S T U V W X Y Z\";\n\t\t\t}\n\t\t}\n\n\t\t&._digits {\n\t\t\t&::before {\n\t\t\t\tcontent: \"1 2 3 4 5 6 7 8 9 0\";\n\t\t\t}\n\t\t}\n\t}\n}\n",".atlas-style-layer {\n\tpadding-bottom: 100%;\n\tposition: relative;\n\twidth: 100%;\n\n\t&__box {\n\t\talign-items: center;\n\t\tdisplay: flex;\n\t\tfont-family: $font-mono-atlas;\n\t\tfont-size: $atlas-scale-mono-small;\n\t\theight: 100%;\n\t\tjustify-content: center;\n\t\tposition: absolute;\n\t\ttext-align: center;\n\t\twidth: 100%;\n\t}\n}\n","@use \"sass:math\";\n\n.atlas-style-motion {\n\tdisplay: flex;\n\n\t&__caption {\n\t\tfont-family: $font-mono-atlas;\n\t\tfont-size: $atlas-scale-mono-small;\n\t\tline-height: $space-md-atlas;\n\t\tmin-width: 200px;\n\t\twidth: 200px;\n\t}\n\n\t&__frame {\n\t\theight: $space-md-atlas;\n\t\tposition: relative;\n\t\twidth: 100%;\n\t}\n\n\t&__ball {\n\t\tanimation-play-state: paused !important; /* stylelint-disable-line */\n\t\tbackground-color: $color-blue-atlas;\n\t\tborder-radius: 100%;\n\t\theight: math.div($space-md-atlas, 2);\n\t\tleft: 0;\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\ttransform: translateY(50%);\n\t\twidth: math.div($space-md-atlas, 2);\n\n\t\t.atlas-style-motion:hover & {\n\t\t\tanimation-play-state: initial !important; /* stylelint-disable-line */\n\t\t}\n\t}\n}\n\n@at-root {\n\t@keyframes atlas-transition-example {\n\t\t0% {\n\t\t\tleft: 0;\n\t\t}\n\n\t\t100% {\n\t\t\tleft: 100%;\n\t\t}\n\t}\n}\n",".atlas-style-space {\n\tmargin: $space-lg-atlas 0;\n\n\t&__text {\n\t\tbackground-color: $color-blue79-atlas;\n\t\tcolor: $color-blue79-atlas;\n\t}\n\n\t&__name {\n\t\tleft: 0;\n\t\tposition: absolute;\n\t\tright: 0;\n\t\ttext-align: center;\n\t}\n\n\t&__spacer {\n\t\tbackground-color: lighten($color-blue79-atlas, 15%);\n\t\tfont-family: $font-mono-atlas;\n\t\tfont-size: $atlas-scale-mono-small;\n\t\tposition: relative;\n\t\ttext-align: center;\n\t}\n\n\t&._vertical {\n\t\tdisplay: flex;\n\t\toverflow: hidden;\n\t\toverflow-x: auto;\n\n\t\t.atlas-style-space__item {\n\t\t\tdisplay: flex;\n\t\t\ttext-align: justify;\n\t\t}\n\n\t\t.atlas-style-space__name {\n\t\t\tpadding-left: $space-sm-atlas;\n\t\t\ttransform: rotate(90deg);\n\t\t\twhite-space: nowrap;\n\t\t}\n\t}\n}\n\n.atlas-style-space-ruler {\n\tborder-style: solid solid solid none;\n\tborder-width: 1px;\n\tbottom: 0;\n\tbox-sizing: border-box;\n\tcolor: deeppink;\n\tfont-family: $font-mono-atlas;\n\tfont-size: $atlas-scale-mono-small;\n\tmargin-left: 5px;\n\tpadding-right: 5px;\n\tposition: absolute;\n\tright: 0;\n\ttop: 0;\n\twidth: 0;\n\n\tspan {\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\tright: 13px;\n\t}\n\n\t&._bottom {\n\t\tborder-style: none solid solid;\n\t\theight: 5px;\n\t\tleft: 0;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tright: 0;\n\t\ttop: initial;\n\t\twidth: 100%;\n\n\t\tspan {\n\t\t\tdisplay: block;\n\t\t\tposition: absolute;\n\t\t\tright: 0;\n\t\t\ttop: 13px;\n\t\t}\n\t}\n\n\t&._left {\n\t\tborder-style: solid none solid solid;\n\t\tleft: 60px;\n\t\tright: initial;\n\n\t\tspan {\n\t\t\tdisplay: block;\n\t\t\tposition: absolute;\n\t\t\tright: 15px;\n\t\t}\n\t}\n\n\t&._middle {\n\t\tright: 50%;\n\t}\n}\n\n.atlas-style-box {\n\tbackground-color: lighten($color-blue79-atlas, 15%);\n\tbox-sizing: border-box;\n\tposition: relative;\n\n\t&__inner {\n\t\talign-items: center;\n\t\tbackground-color: $color-white-atlas;\n\t\tbox-sizing: border-box;\n\t\tdisplay: flex;\n\t\tfont-family: $font-mono-atlas;\n\t\tfont-size: $atlas-scale-mono-small;\n\t\theight: 100px;\n\t\ttext-align: center;\n\t\twidth: 100px;\n\t}\n}\n",".atlas-style-breaks {\n\tdisplay: flex;\n\tfont-family: $font-mono-atlas;\n\tfont-size: $atlas-scale-mono-small;\n\tmargin-bottom: $space-lg-atlas;\n\n\t&__item {\n\t\talign-items: center;\n\t\tcounter-increment: breaks;\n\t\tdisplay: flex;\n\n\t\t&::before {\n\t\t\tcolor: $color-blue-atlas;\n\t\t\tcontent: counter(breaks);\n\t\t\tdisplay: inline-block;\n\t\t\tfont-family: $font-sans-atlas;\n\t\t\tfont-size: 35px;\n\t\t\tpadding-right: $space-sm-atlas;\n\t\t}\n\t}\n\n\t&__item-inner {\n\t\tpadding-right: $space-lg-atlas;\n\t}\n\n\t&__name {}\n\n\t&__value {}\n}\n\n.atlas-style-breaks-graph {\n\t.atlas-tick-breaks {\n\t\tline {\n\t\t\tstroke: deeppink;\n\t\t\tstroke-width: 2px;\n\t\t}\n\n\t\ttext {\n\t\t\tfill: deeppink;\n\t\t\tfont-family: $font-mono-atlas;\n\t\t\tfont-size: 11px;\n\t\t}\n\t}\n\n\t.atlas-tick-lines {\n\t\tline {\n\t\t\tstroke: $color-grey80-atlas;\n\t\t}\n\t}\n\n\t.atlas-tick-hints {\n\t\tline {\n\t\t\tstroke: $color-grey80-atlas;\n\t\t}\n\n\t\ttext {\n\t\t\tfill: $color-blue-atlas;\n\t\t\tfont-family: $font-mono-atlas;\n\t\t}\n\t}\n}\n"]}