[{"data":1,"prerenderedAt":770},["Reactive",2],{"content-query-5EYLXmZwXq":3},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"image":10,"head":11,"body":25,"_type":765,"_id":766,"_source":767,"_file":768,"_extension":769},"/mixins/scrollbar","mixins",false,"","Scrollbar","scrollbar фрейморка ZUI","/public/favicon.icn",{"meta":12},[13,16,19,22],{"name":14,"content":15},"keywords","css, framework, scss, sass",{"name":17,"content":18},"robots","index, follow",{"name":20,"content":21},"author","Alexander Zharikov",{"name":23,"content":24},"copyright","© 2023 Zharikov.design",{"type":26,"children":27,"toc":760},"root",[28,36,42,541,548,604,610,652,658,663,754],{"type":29,"tag":30,"props":31,"children":33},"element","h1",{"id":32},"scrollbar",[34],{"type":35,"value":8},"text",{"type":29,"tag":37,"props":38,"children":39},"p",{},[40],{"type":35,"value":41},"Создает стиль для скролбара страницы или блока.",{"type":29,"tag":43,"props":44,"children":48},"pre",{"className":45,"code":46,"language":47,"meta":7,"style":7},"language-scss shiki shiki-themes github-light github-dark","$scrollbarBg: $white;\n$scrollbarThumb: $pages;\n$scrollbarWidth: $zui-4;\n$scrollbarBorder: 1px solid $scrollbarBg;\n$scrollbarBorderRadius: $zui-8;\n\n@mixin scrollbar {\n  scrollbar-width: $scrollbarWidth;\n  scrollbar-height: $scrollbarWidth;\n  scrollbar-color: $scrollbarThumb $scrollbarBg;\n  \n  &::-webkit-scrollbar {\n    width: $scrollbarWidth;\n    height: $scrollbarWidth;\n  }\n\n  &::-webkit-scrollbar-track {\n    background: $scrollbarBg;\n    border-radius: $scrollbarBorderRadius;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background-color: $scrollbarThumb;\n    border-radius: $scrollbarBorderRadius;\n    border: $scrollbarBorder;\n  }\n}\n","scss",[49],{"type":29,"tag":50,"props":51,"children":52},"code",{"__ignoreMap":7},[53,81,103,125,164,186,196,216,237,258,283,292,311,332,353,362,370,387,408,429,437,445,462,483,503,524,532],{"type":29,"tag":54,"props":55,"children":58},"span",{"class":56,"line":57},"line",1,[59,65,71,76],{"type":29,"tag":54,"props":60,"children":62},{"style":61},"--shiki-default:#E36209;--shiki-dark:#FFAB70",[63],{"type":35,"value":64},"$scrollbarBg",{"type":29,"tag":54,"props":66,"children":68},{"style":67},"--shiki-default:#24292E;--shiki-dark:#E1E4E8",[69],{"type":35,"value":70},": ",{"type":29,"tag":54,"props":72,"children":73},{"style":61},[74],{"type":35,"value":75},"$white",{"type":29,"tag":54,"props":77,"children":78},{"style":67},[79],{"type":35,"value":80},";\n",{"type":29,"tag":54,"props":82,"children":84},{"class":56,"line":83},2,[85,90,94,99],{"type":29,"tag":54,"props":86,"children":87},{"style":61},[88],{"type":35,"value":89},"$scrollbarThumb",{"type":29,"tag":54,"props":91,"children":92},{"style":67},[93],{"type":35,"value":70},{"type":29,"tag":54,"props":95,"children":96},{"style":61},[97],{"type":35,"value":98},"$pages",{"type":29,"tag":54,"props":100,"children":101},{"style":67},[102],{"type":35,"value":80},{"type":29,"tag":54,"props":104,"children":106},{"class":56,"line":105},3,[107,112,116,121],{"type":29,"tag":54,"props":108,"children":109},{"style":61},[110],{"type":35,"value":111},"$scrollbarWidth",{"type":29,"tag":54,"props":113,"children":114},{"style":67},[115],{"type":35,"value":70},{"type":29,"tag":54,"props":117,"children":118},{"style":61},[119],{"type":35,"value":120},"$zui-4",{"type":29,"tag":54,"props":122,"children":123},{"style":67},[124],{"type":35,"value":80},{"type":29,"tag":54,"props":126,"children":128},{"class":56,"line":127},4,[129,134,138,144,150,155,160],{"type":29,"tag":54,"props":130,"children":131},{"style":61},[132],{"type":35,"value":133},"$scrollbarBorder",{"type":29,"tag":54,"props":135,"children":136},{"style":67},[137],{"type":35,"value":70},{"type":29,"tag":54,"props":139,"children":141},{"style":140},"--shiki-default:#005CC5;--shiki-dark:#79B8FF",[142],{"type":35,"value":143},"1",{"type":29,"tag":54,"props":145,"children":147},{"style":146},"--shiki-default:#D73A49;--shiki-dark:#F97583",[148],{"type":35,"value":149},"px",{"type":29,"tag":54,"props":151,"children":152},{"style":140},[153],{"type":35,"value":154}," solid",{"type":29,"tag":54,"props":156,"children":157},{"style":61},[158],{"type":35,"value":159}," $scrollbarBg",{"type":29,"tag":54,"props":161,"children":162},{"style":67},[163],{"type":35,"value":80},{"type":29,"tag":54,"props":165,"children":167},{"class":56,"line":166},5,[168,173,177,182],{"type":29,"tag":54,"props":169,"children":170},{"style":61},[171],{"type":35,"value":172},"$scrollbarBorderRadius",{"type":29,"tag":54,"props":174,"children":175},{"style":67},[176],{"type":35,"value":70},{"type":29,"tag":54,"props":178,"children":179},{"style":61},[180],{"type":35,"value":181},"$zui-8",{"type":29,"tag":54,"props":183,"children":184},{"style":67},[185],{"type":35,"value":80},{"type":29,"tag":54,"props":187,"children":189},{"class":56,"line":188},6,[190],{"type":29,"tag":54,"props":191,"children":193},{"emptyLinePlaceholder":192},true,[194],{"type":35,"value":195},"\n",{"type":29,"tag":54,"props":197,"children":199},{"class":56,"line":198},7,[200,205,211],{"type":29,"tag":54,"props":201,"children":202},{"style":146},[203],{"type":35,"value":204},"@mixin",{"type":29,"tag":54,"props":206,"children":208},{"style":207},"--shiki-default:#6F42C1;--shiki-dark:#B392F0",[209],{"type":35,"value":210}," scrollbar",{"type":29,"tag":54,"props":212,"children":213},{"style":67},[214],{"type":35,"value":215}," {\n",{"type":29,"tag":54,"props":217,"children":219},{"class":56,"line":218},8,[220,225,229,233],{"type":29,"tag":54,"props":221,"children":222},{"style":140},[223],{"type":35,"value":224},"  scrollbar-width",{"type":29,"tag":54,"props":226,"children":227},{"style":67},[228],{"type":35,"value":70},{"type":29,"tag":54,"props":230,"children":231},{"style":61},[232],{"type":35,"value":111},{"type":29,"tag":54,"props":234,"children":235},{"style":67},[236],{"type":35,"value":80},{"type":29,"tag":54,"props":238,"children":240},{"class":56,"line":239},9,[241,246,250,254],{"type":29,"tag":54,"props":242,"children":243},{"style":140},[244],{"type":35,"value":245},"  scrollbar-height",{"type":29,"tag":54,"props":247,"children":248},{"style":67},[249],{"type":35,"value":70},{"type":29,"tag":54,"props":251,"children":252},{"style":61},[253],{"type":35,"value":111},{"type":29,"tag":54,"props":255,"children":256},{"style":67},[257],{"type":35,"value":80},{"type":29,"tag":54,"props":259,"children":261},{"class":56,"line":260},10,[262,267,271,275,279],{"type":29,"tag":54,"props":263,"children":264},{"style":140},[265],{"type":35,"value":266},"  scrollbar-color",{"type":29,"tag":54,"props":268,"children":269},{"style":67},[270],{"type":35,"value":70},{"type":29,"tag":54,"props":272,"children":273},{"style":61},[274],{"type":35,"value":89},{"type":29,"tag":54,"props":276,"children":277},{"style":61},[278],{"type":35,"value":159},{"type":29,"tag":54,"props":280,"children":281},{"style":67},[282],{"type":35,"value":80},{"type":29,"tag":54,"props":284,"children":286},{"class":56,"line":285},11,[287],{"type":29,"tag":54,"props":288,"children":289},{"style":67},[290],{"type":35,"value":291},"  \n",{"type":29,"tag":54,"props":293,"children":295},{"class":56,"line":294},12,[296,302,307],{"type":29,"tag":54,"props":297,"children":299},{"style":298},"--shiki-default:#22863A;--shiki-dark:#85E89D",[300],{"type":35,"value":301},"  &",{"type":29,"tag":54,"props":303,"children":304},{"style":207},[305],{"type":35,"value":306},"::-webkit-scrollbar",{"type":29,"tag":54,"props":308,"children":309},{"style":67},[310],{"type":35,"value":215},{"type":29,"tag":54,"props":312,"children":314},{"class":56,"line":313},13,[315,320,324,328],{"type":29,"tag":54,"props":316,"children":317},{"style":140},[318],{"type":35,"value":319},"    width",{"type":29,"tag":54,"props":321,"children":322},{"style":67},[323],{"type":35,"value":70},{"type":29,"tag":54,"props":325,"children":326},{"style":61},[327],{"type":35,"value":111},{"type":29,"tag":54,"props":329,"children":330},{"style":67},[331],{"type":35,"value":80},{"type":29,"tag":54,"props":333,"children":335},{"class":56,"line":334},14,[336,341,345,349],{"type":29,"tag":54,"props":337,"children":338},{"style":140},[339],{"type":35,"value":340},"    height",{"type":29,"tag":54,"props":342,"children":343},{"style":67},[344],{"type":35,"value":70},{"type":29,"tag":54,"props":346,"children":347},{"style":61},[348],{"type":35,"value":111},{"type":29,"tag":54,"props":350,"children":351},{"style":67},[352],{"type":35,"value":80},{"type":29,"tag":54,"props":354,"children":356},{"class":56,"line":355},15,[357],{"type":29,"tag":54,"props":358,"children":359},{"style":67},[360],{"type":35,"value":361},"  }\n",{"type":29,"tag":54,"props":363,"children":365},{"class":56,"line":364},16,[366],{"type":29,"tag":54,"props":367,"children":368},{"emptyLinePlaceholder":192},[369],{"type":35,"value":195},{"type":29,"tag":54,"props":371,"children":373},{"class":56,"line":372},17,[374,378,383],{"type":29,"tag":54,"props":375,"children":376},{"style":298},[377],{"type":35,"value":301},{"type":29,"tag":54,"props":379,"children":380},{"style":207},[381],{"type":35,"value":382},"::-webkit-scrollbar-track",{"type":29,"tag":54,"props":384,"children":385},{"style":67},[386],{"type":35,"value":215},{"type":29,"tag":54,"props":388,"children":390},{"class":56,"line":389},18,[391,396,400,404],{"type":29,"tag":54,"props":392,"children":393},{"style":140},[394],{"type":35,"value":395},"    background",{"type":29,"tag":54,"props":397,"children":398},{"style":67},[399],{"type":35,"value":70},{"type":29,"tag":54,"props":401,"children":402},{"style":61},[403],{"type":35,"value":64},{"type":29,"tag":54,"props":405,"children":406},{"style":67},[407],{"type":35,"value":80},{"type":29,"tag":54,"props":409,"children":411},{"class":56,"line":410},19,[412,417,421,425],{"type":29,"tag":54,"props":413,"children":414},{"style":140},[415],{"type":35,"value":416},"    border-radius",{"type":29,"tag":54,"props":418,"children":419},{"style":67},[420],{"type":35,"value":70},{"type":29,"tag":54,"props":422,"children":423},{"style":61},[424],{"type":35,"value":172},{"type":29,"tag":54,"props":426,"children":427},{"style":67},[428],{"type":35,"value":80},{"type":29,"tag":54,"props":430,"children":432},{"class":56,"line":431},20,[433],{"type":29,"tag":54,"props":434,"children":435},{"style":67},[436],{"type":35,"value":361},{"type":29,"tag":54,"props":438,"children":440},{"class":56,"line":439},21,[441],{"type":29,"tag":54,"props":442,"children":443},{"emptyLinePlaceholder":192},[444],{"type":35,"value":195},{"type":29,"tag":54,"props":446,"children":448},{"class":56,"line":447},22,[449,453,458],{"type":29,"tag":54,"props":450,"children":451},{"style":298},[452],{"type":35,"value":301},{"type":29,"tag":54,"props":454,"children":455},{"style":207},[456],{"type":35,"value":457},"::-webkit-scrollbar-thumb",{"type":29,"tag":54,"props":459,"children":460},{"style":67},[461],{"type":35,"value":215},{"type":29,"tag":54,"props":463,"children":465},{"class":56,"line":464},23,[466,471,475,479],{"type":29,"tag":54,"props":467,"children":468},{"style":140},[469],{"type":35,"value":470},"    background-color",{"type":29,"tag":54,"props":472,"children":473},{"style":67},[474],{"type":35,"value":70},{"type":29,"tag":54,"props":476,"children":477},{"style":61},[478],{"type":35,"value":89},{"type":29,"tag":54,"props":480,"children":481},{"style":67},[482],{"type":35,"value":80},{"type":29,"tag":54,"props":484,"children":486},{"class":56,"line":485},24,[487,491,495,499],{"type":29,"tag":54,"props":488,"children":489},{"style":140},[490],{"type":35,"value":416},{"type":29,"tag":54,"props":492,"children":493},{"style":67},[494],{"type":35,"value":70},{"type":29,"tag":54,"props":496,"children":497},{"style":61},[498],{"type":35,"value":172},{"type":29,"tag":54,"props":500,"children":501},{"style":67},[502],{"type":35,"value":80},{"type":29,"tag":54,"props":504,"children":506},{"class":56,"line":505},25,[507,512,516,520],{"type":29,"tag":54,"props":508,"children":509},{"style":140},[510],{"type":35,"value":511},"    border",{"type":29,"tag":54,"props":513,"children":514},{"style":67},[515],{"type":35,"value":70},{"type":29,"tag":54,"props":517,"children":518},{"style":61},[519],{"type":35,"value":133},{"type":29,"tag":54,"props":521,"children":522},{"style":67},[523],{"type":35,"value":80},{"type":29,"tag":54,"props":525,"children":527},{"class":56,"line":526},26,[528],{"type":29,"tag":54,"props":529,"children":530},{"style":67},[531],{"type":35,"value":361},{"type":29,"tag":54,"props":533,"children":535},{"class":56,"line":534},27,[536],{"type":29,"tag":54,"props":537,"children":538},{"style":67},[539],{"type":35,"value":540},"}\n",{"type":29,"tag":542,"props":543,"children":545},"h2",{"id":544},"переменные",[546],{"type":35,"value":547},"Переменные",{"type":29,"tag":37,"props":549,"children":550},{},[551,557,559,563,569,571,574,580,582,585,591,593,596,602],{"type":29,"tag":50,"props":552,"children":554},{"className":553},[],[555],{"type":35,"value":556},"$scrollbarBg: $white;",{"type":35,"value":558}," - основной цвет скролбара;",{"type":29,"tag":560,"props":561,"children":562},"br",{},[],{"type":29,"tag":50,"props":564,"children":566},{"className":565},[],[567],{"type":35,"value":568},"$scrollbarThumb: $pages;",{"type":35,"value":570}," - цвет ползунка;",{"type":29,"tag":560,"props":572,"children":573},{},[],{"type":29,"tag":50,"props":575,"children":577},{"className":576},[],[578],{"type":35,"value":579},"$scrollbarWidth: $zui-4;",{"type":35,"value":581}," - размер скролбара (ширина/высота);",{"type":29,"tag":560,"props":583,"children":584},{},[],{"type":29,"tag":50,"props":586,"children":588},{"className":587},[],[589],{"type":35,"value":590},"$scrollbarBorder: 1px solid $scrollbarBg;",{"type":35,"value":592}," - ширина ползунка;",{"type":29,"tag":560,"props":594,"children":595},{},[],{"type":29,"tag":50,"props":597,"children":599},{"className":598},[],[600],{"type":35,"value":601},"$scrollbarBorderRadius: $zui-8;",{"type":35,"value":603}," - скругление углов.",{"type":29,"tag":542,"props":605,"children":607},{"id":606},"вызов",[608],{"type":35,"value":609},"Вызов",{"type":29,"tag":43,"props":611,"children":613},{"className":45,"code":612,"language":47,"meta":7,"style":7},"body {\n  @include scrollbar;\n}\n",[614],{"type":29,"tag":50,"props":615,"children":616},{"__ignoreMap":7},[617,629,645],{"type":29,"tag":54,"props":618,"children":619},{"class":56,"line":57},[620,625],{"type":29,"tag":54,"props":621,"children":622},{"style":298},[623],{"type":35,"value":624},"body",{"type":29,"tag":54,"props":626,"children":627},{"style":67},[628],{"type":35,"value":215},{"type":29,"tag":54,"props":630,"children":631},{"class":56,"line":83},[632,637,641],{"type":29,"tag":54,"props":633,"children":634},{"style":146},[635],{"type":35,"value":636},"  @include",{"type":29,"tag":54,"props":638,"children":639},{"style":207},[640],{"type":35,"value":210},{"type":29,"tag":54,"props":642,"children":643},{"style":67},[644],{"type":35,"value":80},{"type":29,"tag":54,"props":646,"children":647},{"class":56,"line":105},[648],{"type":29,"tag":54,"props":649,"children":650},{"style":67},[651],{"type":35,"value":540},{"type":29,"tag":542,"props":653,"children":655},{"id":654},"скрытие-скролбара",[656],{"type":35,"value":657},"Скрытие скролбара",{"type":29,"tag":37,"props":659,"children":660},{},[661],{"type":35,"value":662},"Данный миксин скрывает скролбар но оставляет возможность скролить.",{"type":29,"tag":43,"props":664,"children":666},{"className":45,"code":665,"language":47,"meta":7,"style":7},"@mixin nosb {\n  &::-webkit-scrollbar {\n    width: 0;\n    height: 0;\n  }\n}\n",[667],{"type":29,"tag":50,"props":668,"children":669},{"__ignoreMap":7},[670,686,701,721,740,747],{"type":29,"tag":54,"props":671,"children":672},{"class":56,"line":57},[673,677,682],{"type":29,"tag":54,"props":674,"children":675},{"style":146},[676],{"type":35,"value":204},{"type":29,"tag":54,"props":678,"children":679},{"style":207},[680],{"type":35,"value":681}," nosb",{"type":29,"tag":54,"props":683,"children":684},{"style":67},[685],{"type":35,"value":215},{"type":29,"tag":54,"props":687,"children":688},{"class":56,"line":83},[689,693,697],{"type":29,"tag":54,"props":690,"children":691},{"style":298},[692],{"type":35,"value":301},{"type":29,"tag":54,"props":694,"children":695},{"style":207},[696],{"type":35,"value":306},{"type":29,"tag":54,"props":698,"children":699},{"style":67},[700],{"type":35,"value":215},{"type":29,"tag":54,"props":702,"children":703},{"class":56,"line":105},[704,708,712,717],{"type":29,"tag":54,"props":705,"children":706},{"style":140},[707],{"type":35,"value":319},{"type":29,"tag":54,"props":709,"children":710},{"style":67},[711],{"type":35,"value":70},{"type":29,"tag":54,"props":713,"children":714},{"style":140},[715],{"type":35,"value":716},"0",{"type":29,"tag":54,"props":718,"children":719},{"style":67},[720],{"type":35,"value":80},{"type":29,"tag":54,"props":722,"children":723},{"class":56,"line":127},[724,728,732,736],{"type":29,"tag":54,"props":725,"children":726},{"style":140},[727],{"type":35,"value":340},{"type":29,"tag":54,"props":729,"children":730},{"style":67},[731],{"type":35,"value":70},{"type":29,"tag":54,"props":733,"children":734},{"style":140},[735],{"type":35,"value":716},{"type":29,"tag":54,"props":737,"children":738},{"style":67},[739],{"type":35,"value":80},{"type":29,"tag":54,"props":741,"children":742},{"class":56,"line":166},[743],{"type":29,"tag":54,"props":744,"children":745},{"style":67},[746],{"type":35,"value":361},{"type":29,"tag":54,"props":748,"children":749},{"class":56,"line":188},[750],{"type":29,"tag":54,"props":751,"children":752},{"style":67},[753],{"type":35,"value":540},{"type":29,"tag":755,"props":756,"children":757},"style",{},[758],{"type":35,"value":759},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":7,"searchDepth":83,"depth":83,"links":761},[762,763,764],{"id":544,"depth":83,"text":547},{"id":606,"depth":83,"text":609},{"id":654,"depth":83,"text":657},"markdown","content:3.mixins:scrollbar.md","content","3.mixins/scrollbar.md","md",1731665135850]