diff --git a/at-rules/-1/img/json.jpg b/at-rules/-1/img/json.jpg new file mode 100644 index 0000000..7989787 Binary files /dev/null and b/at-rules/-1/img/json.jpg differ diff --git a/at-rules/-1/img/sprite.svg b/at-rules/-1/img/sprite.svg new file mode 100644 index 0000000..49884ee --- /dev/null +++ b/at-rules/-1/img/sprite.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/at-rules/-1/img/wallpaper.jpg b/at-rules/-1/img/wallpaper.jpg new file mode 100644 index 0000000..3258efd Binary files /dev/null and b/at-rules/-1/img/wallpaper.jpg differ diff --git a/at-rules/-1/index.html b/at-rules/-1/index.html new file mode 100644 index 0000000..0692ca5 --- /dev/null +++ b/at-rules/-1/index.html @@ -0,0 +1,127 @@ + + + + + + + Document + + + +
+ +
+ +
+ + +
+
+ +
+ +
+ + +
+ Edit profile +
+ +
+ + +
+
+
+ + + +
+ + +
+ + wallpaper +
+ + + + + + + +
+
+ +
+ + profile-photo + +
+ + +
+
+ + +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+
+ +
+
+
+ +
+ + \ No newline at end of file diff --git a/at-rules/-1/style.css b/at-rules/-1/style.css new file mode 100644 index 0000000..71546d7 --- /dev/null +++ b/at-rules/-1/style.css @@ -0,0 +1,589 @@ +/* +CSS variables + +Global CSS custom properties which used in mlut. + +--ml-gg = 0.75rem - [grid gutter](section-concepts.html#kssref-concepts-custom_unit-gg). +--ml-gscc = 12 - number of columns in the grid system. Sets by [$gs-columns](section-settings.html#kssref-settings-gs). Available only with `$legacy-grid-system` flag enabled + +Styleguide: css_lib.styles.css_vars +*/ +:root { + --ml-gg: 0.75rem; +} +@media (min-width: 992px) { + :root { + --ml-gg: 1rem; + } +} + +/* +Btn + +Helper for creating buttons. Prepares any element to styling as a button. + +Markup: ../../../docs/examples/css_lib-helpers/btn/btn.html + +Styleguide: css_lib.helpers.btn +*/ +.btn { + display: inline-block; + margin: 0; + padding: 0; + line-height: inherit; + text-align: center; + text-decoration: none; + vertical-align: middle; + background: none; + border: 0; + cursor: pointer; +} + +html { + box-sizing: border-box; + --ml-accent500: rgba(231, 233, 234, 0.5); + --ml-accent900: #e7e9ea; + --ml-accent850: #0f1419; + --ml-accent600: #333639; + --ml-accent200: #1d9bf0; + --ml-accent300: #fa4646; + --ml-accent400: #6bc4ff; + --ml-secondary900: #4a4a4a; + --ml-secondary850: #bdbdbd; + --ml-secondary400: rgba(0,0,0,0.40); + --ml-secondary300: rgba(0,0,0,0.20); + --ml-secondary200: rgba(0,0,0,0.10); +} + +*, +*::before, +*::after { + box-sizing: inherit; +} + +button, +input, +textarea { + font-family: inherit; + font-size: 100%; + margin: 0; +} + +div { + scrollbar-width: auto; + scrollbar-color: #3e4144 #16181c; +} + +.Bgc-white { + background-color: white; +} + +.C-\$accent900 { + color: var(--ml-accent900); +} + +.Fnf-mUss { + font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; +} + +.-HeaderH13u { + --ml-headerH: 3.25rem; +} + +.M0 { + margin: 0px; +} + +.Ps-a { + position: absolute; +} + +.W100p { + width: 100%; +} + +.H100vh { + height: 100vh; +} + +.Bgc-grey { + background-color: grey; +} + +.D-f { + display: flex; +} + +.Jc-c { + justify-content: center; +} + +.Ai-c { + align-items: center; +} + +.Mxw600 { + max-width: 600px; +} + +.-Sz100p { + width: 100%; + height: 100%; +} + +.Bgc-black { + background-color: black; +} + +.Ovy-s { + overflow-y: scroll; +} + +.P0\;0\;5u { + padding: 0px 0px 1.25rem; +} + +.Ctnn-form { + container-name: form; +} + +.Ctnt-is { + container-type: inline-size; +} + +.P2u { + padding: 0.5rem; +} + +.H-\$headerH { + height: var(--ml-headerH); +} + +.Ps-sk { + position: sticky; +} + +.Bgc\#000\*50p { + background-color: rgba(0, 0, 0, 0.5); +} + +.Bgc\#000\*0\.5 { + background-color: rgba(0, 0, 0, 0.5); +} + +.Zi20 { + z-index: 20; +} + +.Ai-str { + align-items: stretch; +} + +.Jc-fs { + justify-content: flex-start; +} + +.W10p { + width: 10%; +} + +.H100p { + height: 100%; +} + +.Bd-n { + border: none; +} + +.Bgc-tp { + background-color: transparent; +} + +.Apcr1 { + aspect-ratio: 1; +} + +.D { + display: block; +} + +.Bdrd100p { + border-radius: 100%; +} + +.-Ts { + transition-duration: 0.3s; + transition-property: background-color, border-color, color, fill, stroke, backdrop-filter, box-shadow, filter, opacity, transform; +} + +.-Sz26 { + width: 26px; + height: 26px; +} + +.Us-n { + user-select: none; +} + +.Va-b { + vertical-align: bottom; +} + +.W90p { + width: 90%; +} + +.Fnw700 { + font-weight: 700; +} + +.Fns4\.5u { + font-size: 1.125rem; +} + +.P0\.5u\;0 { + padding: 0.125rem 0px; +} + +.Ml-a { + margin-left: auto; +} + +.Bgc-\$accent900 { + background-color: var(--ml-accent900); +} + +.C-\$accent850 { + color: var(--ml-accent850); +} + +.W18u { + width: 4.5rem; +} + +.Bdrd10u { + border-radius: 2.5rem; +} + +.Fnw600 { + font-weight: 600; +} + +.Lnh100p { + line-height: 100%; +} + +.P0 { + padding: 0px; +} + +.Ps { + position: relative; +} + +.Mt-\$headerH { + margin-top: var(--ml-headerH); +} + +.H35u { + height: 8.75rem; +} + +.Ov-h { + overflow: hidden; +} + +.Mb15u { + margin-bottom: 3.75rem; +} + +.P0\;1 { + padding: 0px 1px; +} + +.Zi2 { + z-index: 2; +} + +.T0 { + top: 0px; +} + +.L0 { + left: 0px; +} + +.Gap5u { + gap: 1.25rem; +} + +.Bgc-\$secondary400 { + background-color: var(--ml-secondary400); +} + +.O1 { + opacity: 1; +} + +.Zi10 { + z-index: 10; +} + +.H25u { + height: 6.25rem; +} + +.D-ib { + display: inline-block; +} + +.Bd2\;s\;black { + border: 2px solid black; +} + +.T23u { + top: 5.75rem; +} + +.L5u { + left: 1.25rem; +} + +.Mxw100p { + max-width: 100%; +} + +.Bgc-\$secondary200 { + background-color: var(--ml-secondary200); +} + +.-Ts_\:input\,\:textarea input, .-Ts_\:input\,\:textarea textarea { + transition-duration: 0.3s; + transition-property: background-color, border-color, color, fill, stroke, backdrop-filter, box-shadow, filter, opacity, transform; +} + +.C-\$accent500_\:input\,\:textarea input, .C-\$accent500_\:input\,\:textarea textarea { + color: var(--ml-accent500); +} + +.Bd1\;s\;\$accent600 { + border: 1px solid var(--ml-accent600); +} + +.Bdc-\$accent200_fw:focus-within { + border-color: var(--ml-accent200); +} + +.C-\$accent600 { + color: var(--ml-accent600); +} + +.Bdrd2u { + border-radius: 0.5rem; +} + +.Ct-\'\;\'\;\'\*\'_af::after { + content: ' ' '*'; +} + +.C-\$accent300_fw\:af:focus-within::after { + color: var(--ml-accent300); +} + +.Ps-a_af::after { + position: absolute; +} + +.T2u_af::after { + top: 0.5rem; +} + +.R2u_af::after { + right: 0.5rem; +} + +.Bdc-\$accent400_\!fw\:h:not(:focus-within):hover { + border-color: var(--ml-accent400); +} + +.Mb1u { + margin-bottom: 0.25rem; +} + +.-Ctx:focus-within .\^\:fw\:_C-\$accent200 { + color: var(--ml-accent200); +} + +.Ol-n_f:focus { + outline: none; +} + +.-Ctx:focus-within .\^\:fw\:_C-\$accent900 { + color: var(--ml-accent900); +} + +.Rs-n { + resize: none; +} + +@media (min-width: 520px) { + .sm_P0\;3u_\:div div { + padding: 0px 0.75rem; + } +} +@media (min-width: 768px) { + .md_H160u { + height: 40rem; + } +} +@media (min-width: 768px) { + .md_Mxh90vh { + max-height: 90vh; + } +} +@media (min-width: 768px) { + .md_T5p { + top: 5%; + } +} +@media (min-width: 768px) { + .md_Bdrd5u { + border-radius: 1.25rem; + } +} +@media (min-width: 768px) { + .md_-Bdtrd5u { + border-top-right-radius: 1.25rem; + border-top-left-radius: 1.25rem; + } +} +@media (min-width: 768px) { + .md_Fns5\.5u { + font-size: 1.375rem; + } +} +@media (min-width: 768px) { + .md_H50u { + height: 12.5rem; + } +} +@media (min-width: 768px) { + .md_Mb20u { + margin-bottom: 5rem; + } +} +@media (min-width: 768px) { + .md_H30u { + height: 7.5rem; + } +} +@media (min-width: 768px) { + .md_T38u { + top: 9.5rem; + } +} +@media (min-width: 768px) { + .md_P0\;5u_\:div div { + padding: 0px 1.25rem; + } +} +@media (min-width: 768px) { + .md_W38gg { + width: calc(var(--ml-gg) * 38); + } +} +@media (min-width: 768px) { + .md_H170u { + height: 42.5rem; + } +} +@media (min-width: 768px) { + .md_Bdrd3u { + border-radius: 0.75rem; + } +} +@media (min-width: 768px) { + .md_Bdtlr3u { + border-top-left-radius: 0.75rem; + } +} +@media (min-width: 768px) { + .md_Bdblr3u { + border-bottom-left-radius: 0.75rem; + } +} +@container form (min-width: 600px) { + .\@c\:form\:w\>\=600_P2u\;3u { + padding: 0.5rem 0.75rem; + } +} +@media (hover) { + .\@\:hv_Bgc-\$secondary900_h:hover { + background-color: var(--ml-secondary900); + } +} +@media (hover: none) { + .\@\:hv-n_Bgc-\$secondary900_a:active { + background-color: var(--ml-secondary900); + } +} +@container form (max-width: 539px) { + .\@c\:form\:w\<540_P0\;3u { + padding: 0px 0.75rem; + } +} +@media (hover) { + .\@\:hv_Bgc-\$secondary850_h:hover { + background-color: var(--ml-secondary850); + } +} +@media (hover: none) { + .\@\:hv-n_Bgc-\$secondary850_a:active { + background-color: var(--ml-secondary850); + } +} +@media (hover) { + .\@\:hv_Bgc-\$secondary200_h:hover { + background-color: var(--ml-secondary200); + } +} +@media (hover) { + .\@\:hv_Bgc-\$secondary300_h:hover { + background-color: var(--ml-secondary300); + } +} +@media (hover: none) { + .\@\:hv-n_Bgc-\$secondary300_a:active { + background-color: var(--ml-secondary300); + } +} +@media (hover) { + .\@\:hv_O0 { + opacity: 0; + } +} +@media (hover) { + .-Ctx-wallpaper:hover .\@\:hv_\^wallpaper\:h\:_O1 { + opacity: 1; + } +} +@media (hover) { + .\@\:hv_O1_h:hover { + opacity: 1; + } +} +@layer base { + .\@l\:base_Mb6u_\:div div { + margin-bottom: 1.5rem; + } +} +@layer base { + .\@l\:base_P0\;2u_\:div div { + padding: 0px 0.5rem; + } +} +@media (hover) { + .\@\:hv_Bdc-\$accent400_\!fw\:h:not(:focus-within):hover { + border-color: var(--ml-accent400); + } +} \ No newline at end of file diff --git a/at-rules/0/img/json.jpg b/at-rules/0/img/json.jpg new file mode 100644 index 0000000..7989787 Binary files /dev/null and b/at-rules/0/img/json.jpg differ diff --git a/at-rules/0/img/sprite.svg b/at-rules/0/img/sprite.svg new file mode 100644 index 0000000..49884ee --- /dev/null +++ b/at-rules/0/img/sprite.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/at-rules/0/img/wallpaper.jpg b/at-rules/0/img/wallpaper.jpg new file mode 100644 index 0000000..3258efd Binary files /dev/null and b/at-rules/0/img/wallpaper.jpg differ diff --git a/at-rules/0/index.html b/at-rules/0/index.html new file mode 100644 index 0000000..cd6b087 --- /dev/null +++ b/at-rules/0/index.html @@ -0,0 +1,127 @@ + + + + + + + Document + + + +
+ +
+ +
+ + +
+
+ + +
+ +
+ + +
+ Edit profile +
+ +
+ + +
+
+
+ + + +
+ + +
+ + wallpaper +
+ + + + + + + +
+
+ +
+ + profile-photo + +
+ + +
+
+ + +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+
+ +
+
+
+
+ + \ No newline at end of file diff --git a/at-rules/0/style.css b/at-rules/0/style.css new file mode 100644 index 0000000..b26e10c --- /dev/null +++ b/at-rules/0/style.css @@ -0,0 +1,512 @@ +/* +CSS variables + +Global CSS custom properties which used in mlut. + +--ml-gg = 0.75rem - [grid gutter](section-concepts.html#kssref-concepts-custom_unit-gg). +--ml-gscc = 12 - number of columns in the grid system. Sets by [$gs-columns](section-settings.html#kssref-settings-gs). Available only with `$legacy-grid-system` flag enabled + +Styleguide: css_lib.styles.css_vars +*/ +:root { + --ml-gg: 0.75rem; +} +@media (min-width: 992px) { + :root { + --ml-gg: 1rem; + } +} + +/* +Btn + +Helper for creating buttons. Prepares any element to styling as a button. + +Markup: ../../../docs/examples/css_lib-helpers/btn/btn.html + +Styleguide: css_lib.helpers.btn +*/ +.btn { + display: inline-block; + margin: 0; + padding: 0; + line-height: inherit; + text-align: center; + text-decoration: none; + vertical-align: middle; + background: none; + border: 0; + cursor: pointer; +} + +html { + box-sizing: border-box; + --ml-accent500: rgba(231, 233, 234, 0.5); + --ml-accent900: #e7e9ea; + --ml-accent850: #0f1419; + --ml-accent600: #333639; + --ml-accent200: #1d9bf0; + --ml-accent300: #fa4646; + --ml-accent400: #6bc4ff; + --ml-secondary900: #4a4a4a; + --ml-secondary850: #bdbdbd; + --ml-secondary400: rgba(0,0,0,0.40); + --ml-secondary300: rgba(0,0,0,0.20); + --ml-secondary200: rgba(0,0,0,0.10); +} + +*, +*::before, +*::after { + box-sizing: inherit; +} + +button, +input, +textarea { + font-family: inherit; + font-size: 100%; + margin: 0; +} + +div { + scrollbar-width: auto; + scrollbar-color: #3e4144 #16181c; +} + +.Bgc-white { + background-color: white; +} + +.C-\$accent900 { + color: var(--ml-accent900); +} + +.Fnf-mUss { + font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; +} + +.-HeaderH13u { + --ml-headerH: 3.25rem; +} + +.M0 { + margin: 0px; +} + +.Ps-a { + position: absolute; +} + +.W100p { + width: 100%; +} + +.H100vh { + height: 100vh; +} + +.Bgc-grey { + background-color: grey; +} + +.D-f { + display: flex; +} + +.Jc-c { + justify-content: center; +} + +.Ai-c { + align-items: center; +} + +.Mxw600 { + max-width: 600px; +} + +.W90p { + width: 90%; +} + +.H160u { + height: 40rem; +} + +.Mxh90vh { + max-height: 90vh; +} + +.Bgc-black { + background-color: black; +} + +.T5p { + top: 5%; +} + +.Bdrd5u { + border-radius: 1.25rem; +} + +.Ovy-s { + overflow-y: scroll; +} + +.P0\;0\;5u { + padding: 0px 0px 1.25rem; +} + +.P2u\;3u { + padding: 0.5rem 0.75rem; +} + +.H-\$headerH { + height: var(--ml-headerH); +} + +.Ps-f { + position: fixed; +} + +.Bgc\#000\*50p { + background-color: rgba(0, 0, 0, 0.5); +} + +.-Bdtrd5u { + border-top-right-radius: 1.25rem; + border-top-left-radius: 1.25rem; +} + +.Zi20 { + z-index: 20; +} + +.Ai-str { + align-items: stretch; +} + +.Jc-fs { + justify-content: flex-start; +} + +.-Sz100p { + width: 100%; + height: 100%; +} + +.W10p { + width: 10%; +} + +.H100p { + height: 100%; +} + +.Fnf-ih { + font-family: inherit; +} + +.Fns100p { + font-size: 100%; +} + +.Bd-n { + border: none; +} + +.Bgc-tp { + background-color: transparent; +} + +.Apcr1 { + aspect-ratio: 1; +} + +.D { + display: block; +} + +.Bdrd100p { + border-radius: 100%; +} + +.-Ts { + transition-duration: 0.3s; + transition-property: background-color, border-color, color, fill, stroke, backdrop-filter, box-shadow, filter, opacity, transform; +} + +.-Sz26 { + width: 26px; + height: 26px; +} + +.Us-n { + user-select: none; +} + +.Va-b { + vertical-align: bottom; +} + +.Fnw700 { + font-weight: 700; +} + +.Fns6u { + font-size: 1.5rem; +} + +.P0\.5u\;0 { + padding: 0.125rem 0px; +} + +.Ml-a { + margin-left: auto; +} + +.Bgc-\$accent900 { + background-color: var(--ml-accent900); +} + +.C-\$accent850 { + color: var(--ml-accent850); +} + +.W18u { + width: 4.5rem; +} + +.Bdrd10u { + border-radius: 2.5rem; +} + +.Fnw600 { + font-weight: 600; +} + +.Lnh100p { + line-height: 100%; +} + +.P0 { + padding: 0px; +} + +.Ps { + position: relative; +} + +.Mt-\$headerH { + margin-top: var(--ml-headerH); +} + +.H50u { + height: 12.5rem; +} + +.Ov-h { + overflow: hidden; +} + +.Mb20u { + margin-bottom: 5rem; +} + +.P0\;1 { + padding: 0px 1px; +} + +.Zi2 { + z-index: 2; +} + +.T0 { + top: 0px; +} + +.L0 { + left: 0px; +} + +.Gap5u { + gap: 1.25rem; +} + +.Bgc-\$secondary400 { + background-color: var(--ml-secondary400); +} + +.P2u { + padding: 0.5rem; +} + +.O1 { + opacity: 1; +} + +.Zi10 { + z-index: 10; +} + +.H30u { + height: 7.5rem; +} + +.D-ib { + display: inline-block; +} + +.Bd2\;s\;black { + border: 2px solid black; +} + +.T38u { + top: 9.5rem; +} + +.L5u { + left: 1.25rem; +} + +.Mxw100p { + max-width: 100%; +} + +.Bgc-\$secondary200 { + background-color: var(--ml-secondary200); +} + +.-Ts_\:input\,\:textarea input, .-Ts_\:input\,\:textarea textarea { + transition-duration: 0.3s; + transition-property: background-color, border-color, color, fill, stroke, backdrop-filter, box-shadow, filter, opacity, transform; +} + +.C-\$accent500_\:input\,\:textarea input, .C-\$accent500_\:input\,\:textarea textarea { + color: var(--ml-accent500); +} + +.Mb5u { + margin-bottom: 1.25rem; +} + +.P0\;5u { + padding: 0px 1.25rem; +} + +.Bd1\;s\;\$accent600 { + border: 1px solid var(--ml-accent600); +} + +.Bdc-\$accent200_fw:focus-within { + border-color: var(--ml-accent200); +} + +.C-\$accent600 { + color: var(--ml-accent600); +} + +.Bdrd2u { + border-radius: 0.5rem; +} + +.Ct-\'\;\'\;\'\*\'_af::after { + content: ' ' '*'; +} + +.C-\$accent300_fw\:af:focus-within::after { + color: var(--ml-accent300); +} + +.Ps-a_af::after { + position: absolute; +} + +.T2u_af::after { + top: 0.5rem; +} + +.R2u_af::after { + right: 0.5rem; +} + +.Bdc-\$accent400_\!fw\:h:not(:focus-within):hover { + border-color: var(--ml-accent400); +} + +.Mb1u { + margin-bottom: 0.25rem; +} + +.-Ctx:focus-within .\^\:fw\:_C-\$accent200 { + color: var(--ml-accent200); +} + +.Ol-n_f:focus { + outline: none; +} + +.-Ctx:focus-within .\^\:fw\:_C-\$accent900 { + color: var(--ml-accent900); +} + +.Rs-n { + resize: none; +} + +.W38gg { + width: calc(var(--ml-gg) * 38); +} + +.H170u { + height: 42.5rem; +} + +.Bdrd3u { + border-radius: 0.75rem; +} + +.Bdtlr5u { + border-top-left-radius: 1.25rem; +} + +.Bdblr3u { + border-bottom-left-radius: 0.75rem; +} + +.Ps-sk { + position: sticky; +} + +.Bdtlr3u { + border-top-left-radius: 0.75rem; +} + +.Bgc-\$secondary900_h:hover { + background-color: var(--ml-secondary900); +} + +.Bgc-\$secondary850_h:hover { + background-color: var(--ml-secondary850); +} + +.Bgc-\$secondary200_h:hover { + background-color: var(--ml-secondary200); +} + +.Bgc-\$secondary300_h:hover { + background-color: var(--ml-secondary300); +} + +.O0 { + opacity: 0; +} + +.-Ctx-wallpaper:hover .\^wallpaper\:h\:_O1 { + opacity: 1; +} + +.O1_h:hover { + opacity: 1; +} \ No newline at end of file diff --git a/style.scss b/style.scss index 71ab7d0..d090186 100644 --- a/style.scss +++ b/style.scss @@ -4,6 +4,7 @@ @use '@mlut/core/dist/sass/addons/demo-theme'; html { + box-sizing: border-box; --ml-accent500: rgba(231, 233, 234, 0.5); --ml-accent900: #e7e9ea; --ml-accent850: #0f1419; @@ -17,3 +18,23 @@ html { --ml-secondary300: rgba(0,0,0,0.20); --ml-secondary200: rgba(0,0,0,0.10); } + +*, +*::before, +*::after { + box-sizing: inherit; +} + +button, +input, +textarea { + font-family: inherit; + font-size: 100%; + margin: 0; +} + + +div { + scrollbar-width: auto; + scrollbar-color: #3e4144 #16181c; +} \ No newline at end of file