@charset "UTF-8"; /* ==================================================================== ១. TEXT ALIGN & FLEX ALIGNMENT (ការតម្រែតម្រង់អត្ថបទ និង Content) -------------------------------------------------------------------- Note: កំណត់ទិសដៅ Alignment របស់ Content តាមរយះ attribute 'all' Examples: 1.
អត្ថបទនៅកណ្តាល (Horiz + Vert)
2.
កូនទី១
កូនទី២
3.
អត្ថបទនៅខាងឆ្វេង
4.
អត្ថបទនៅខាងស្តាំ
5.
អត្ថបទនៅកណ្តាលតាមជួរឈរ (Vertical Center)
==================================================================== */ [all~="sub_text_center"] > *,[all~="text_center"]{ display: flex; justify-content: center; align-items: center; text-align: center; } [all~="sub_text_top"] > *,[all~="text_top"]{ display: flex; align-items: baseline; } [all~="sub_text_middle"] > *,[all~="text_middle"]{ display: flex; align-items: center; } [all~="sub_text_bottom"] > *,[all~="text_bottom"]{ display: flex; align-items: end; } [all~="sub_text_right"] > *,[all~="text_right"]{ display: flex; justify-content: right; } [all~="sub_text_central"] > *,[all~="text_central"]{ display: flex; justify-content: center; } [all~="sub_text_left"] > *,[all~="text_left"]{ display: flex; justify-content: left; } /* ==================================================================== ២. GRID CONTAINER INITIALIZATION (ការកំណត់ទម្រង់ Inline-Grid) -------------------------------------------------------------------- Note: ប្រកាស Element ដែលប្រើប្រាស់ Class/Attribute ទាំងអស់ឲ្យទៅជា inline-grid ==================================================================== */ [all~="cols"], [all~="cols_1"], [all~="cols_2"], [all~="cols_3"], [all~="cols_4"], [all~="cols_5"], [all~="cols_6"], [all~="cols_7"], [all~="cols_8"], [all~="cols_9"], [all~="cols_10"], [all~="cols_11"], [all~="cols_12"], [all~="cols_13"], [all~="cols_14"], [all~="cols_15"], [all~="cols_16"], [all~="cols_17"], [all~="cols_18"], [all~="cols_19"], [all~="cols_20"], [all~="cols_21"], [all~="cols_22"], [all~="cols_23"], [all~="cols_24"],[all~="rows"], [all~="rows_1"], [all~="rows_2"], [all~="rows_3"], [all~="rows_4"], [all~="rows_5"], [all~="rows_6"], [all~="rows_7"], [all~="rows_8"], [all~="rows_9"], [all~="rows_10"], [all~="rows_11"], [all~="rows_12"], [all~="rows_13"], [all~="rows_14"], [all~="rows_15"], [all~="rows_16"], [all~="rows_17"], [all~="rows_18"], [all~="rows_19"], [all~="rows_20"], [all~="rows_21"], [all~="rows_22"], [all~="rows_23"], [all~="rows_24"], [all~="sub_cols"] > *, [all~="sub_cols_1"] > *, [all~="sub_cols_2"] > *, [all~="sub_cols_3"] > *, [all~="sub_cols_4"] > *, [all~="sub_cols_5"] > *, [all~="sub_cols_6"] > *, [all~="sub_cols_7"] > *, [all~="sub_cols_8"] > *, [all~="sub_cols_9"] > *, [all~="sub_cols_10"] > *, [all~="sub_cols_11"] > *, [all~="sub_cols_12"] > *, [all~="sub_cols_13"] > *, [all~="sub_cols_14"] > *, [all~="sub_cols_15"] > *, [all~="sub_cols_16"] > *, [all~="sub_cols_17"] > *, [all~="sub_cols_18"] > *, [all~="sub_cols_19"] > *, [all~="sub_cols_20"] > *, [all~="sub_cols_21"] > *, [all~="sub_cols_22"] > *, [all~="sub_cols_23"] > *, [all~="sub_cols_24"] > *,[all~="sub_rows"] > *, [all~="sub_rows_1"] > *, [all~="sub_rows_2"] > *, [all~="sub_rows_3"] > *, [all~="sub_rows_4"] > *, [all~="sub_rows_5"] > *, [all~="sub_rows_6"] > *, [all~="sub_rows_7"] > *, [all~="sub_rows_8"] > *, [all~="sub_rows_9"] > *, [all~="sub_rows_10"] > *, [all~="sub_rows_11"] > *, [all~="sub_rows_12"] > *, [all~="sub_rows_13"] > *, [all~="sub_rows_14"] > *, [all~="sub_rows_15"] > *, [all~="sub_rows_16"] > *, [all~="sub_rows_17"] > *, [all~="sub_rows_18"] > *, [all~="sub_rows_19"] > *, [all~="sub_rows_20"] > *, [all~="sub_rows_21"] > *, [all~="sub_rows_22"] > *, [all~="sub_rows_23"] > *, [all~="sub_rows_24"] > *, [all~="gap_5"], [all~="gap_10"], [all~="gap_15"], [all~="gap_20"],[all~="item_x"],[all~="item_y"],[all~="list_x"],[all~="list_y"]{display: inline-grid; box-sizing: border-box;align-content: start; } /* ==================================================================== ៣. GRID COLUMNS (ការកំណត់ចំនួនជួរឈរ 1 ដល់ 24 Columns) -------------------------------------------------------------------- Note: បែងចែកចំនួន Column ស្មើៗគ្នាក្នុង Container (1fr ដល់ 24fr) Examples: 1.
ក្បាល១
ក្បាល២
2.
១
២
៣
៤
3.
កូនទាំងអស់ចែកជា៣Columns
==================================================================== */ [all~="sub_cols_1"] > *,[all~="cols_1"]{grid-template-columns: repeat(1, 1fr);} [all~="sub_cols_2"] > *,[all~="cols_2"]{grid-template-columns: repeat(2, 1fr);} [all~="sub_cols_3"] > *,[all~="cols_3"]{grid-template-columns: repeat(3, 1fr);} [all~="sub_cols_4"] > *,[all~="cols_4"]{grid-template-columns: repeat(4, 1fr);} [all~="sub_cols_5"] > *,[all~="cols_5"]{grid-template-columns: repeat(5, 1fr);} [all~="sub_cols_6"] > *,[all~="cols_6"]{grid-template-columns: repeat(6, 1fr);} [all~="sub_cols_7"] > *,[all~="cols_7"]{grid-template-columns: repeat(7, 1fr);} [all~="sub_cols_8"] > *,[all~="cols_8"]{grid-template-columns: repeat(8, 1fr);} [all~="sub_cols_9"] > *,[all~="cols_9"]{grid-template-columns: repeat(9, 1fr);} [all~="sub_cols_10"] > *,[all~="cols_10"]{grid-template-columns: repeat(10, 1fr);} [all~="sub_cols_11"] > *,[all~="cols_11"]{grid-template-columns: repeat(11, 1fr);} [all~="sub_cols_12"] > *,[all~="cols_12"]{grid-template-columns: repeat(12, 1fr);} [all~="sub_cols_13"] > *,[all~="cols_13"]{grid-template-columns: repeat(13, 1fr);} [all~="sub_cols_14"] > *,[all~="cols_14"]{grid-template-columns: repeat(14, 1fr);} [all~="sub_cols_15"] > *,[all~="cols_15"]{grid-template-columns: repeat(15, 1fr);} [all~="sub_cols_16"] > *,[all~="cols_16"]{grid-template-columns: repeat(16, 1fr);} [all~="sub_cols_17"] > *,[all~="cols_17"]{grid-template-columns: repeat(17, 1fr);} [all~="sub_cols_18"] > *,[all~="cols_18"]{grid-template-columns: repeat(18, 1fr);} [all~="sub_cols_19"] > *,[all~="cols_19"]{grid-template-columns: repeat(19, 1fr);} [all~="sub_cols_20"] > *,[all~="cols_20"]{grid-template-columns: repeat(20, 1fr);} [all~="sub_cols_21"] > *,[all~="cols_21"]{grid-template-columns: repeat(21, 1fr);} [all~="sub_cols_22"] > *,[all~="cols_22"]{grid-template-columns: repeat(22, 1fr);} [all~="sub_cols_23"] > *,[all~="cols_23"]{grid-template-columns: repeat(23, 1fr);} [all~="sub_cols"] > *,[all~="sub_cols_24"] > *,[all~="cols"],[all~="cols_24"]{grid-template-columns: repeat(24, 1fr);} /* ==================================================================== ៤. GRID ROWS (ការកំណត់ចំនួនជួរដេក 1 ដល់ 24 Rows) -------------------------------------------------------------------- Note: បែងចែកចំនួន Row ស្មើៗគ្នាក្នុង Container Example:
Row 1
Row 2
Row 3
==================================================================== */ [all~="sub_rows_1"] > *,[all~="rows_1"]{ grid-template-rows:repeat(1, 1fr); } [all~="sub_rows_2"] > *,[all~="rows_2"]{ grid-template-rows:repeat(2, 1fr); } [all~="sub_rows_3"] > *,[all~="rows_3"]{ grid-template-rows:repeat(3, 1fr); } [all~="sub_rows_4"] > *,[all~="rows_4"]{ grid-template-rows:repeat(4, 1fr); } [all~="sub_rows_5"] > *,[all~="rows_5"]{ grid-template-rows:repeat(5, 1fr); } [all~="sub_rows_6"] > *,[all~="rows_6"]{ grid-template-rows:repeat(6, 1fr); } [all~="sub_rows_7"] > *,[all~="rows_7"]{ grid-template-rows:repeat(7, 1fr); } [all~="sub_rows_8"] > *,[all~="rows_8"]{ grid-template-rows:repeat(8, 1fr); } [all~="sub_rows_9"] > *,[all~="rows_9"]{ grid-template-rows:repeat(9, 1fr); } [all~="sub_rows_10"] > *,[all~="rows_10"]{ grid-template-rows:repeat(10, 1fr); } [all~="sub_rows_11"] > *,[all~="rows_11"]{ grid-template-rows:repeat(11, 1fr); } [all~="sub_rows_12"] > *,[all~="rows_12"]{ grid-template-rows:repeat(12, 1fr); } [all~="sub_rows_13"] > *,[all~="rows_13"]{ grid-template-rows:repeat(13, 1fr); } [all~="sub_rows_14"] > *,[all~="rows_14"]{ grid-template-rows:repeat(14, 1fr); } [all~="sub_rows_15"] > *,[all~="rows_15"]{ grid-template-rows:repeat(15, 1fr); } [all~="sub_rows_16"] > *,[all~="rows_16"]{ grid-template-rows:repeat(16, 1fr); } [all~="sub_rows_17"] > *,[all~="rows_17"]{ grid-template-rows:repeat(17, 1fr); } [all~="sub_rows_18"] > *,[all~="rows_18"]{ grid-template-rows:repeat(18, 1fr); } [all~="sub_rows_19"] > *,[all~="rows_19"]{ grid-template-rows:repeat(19, 1fr); } [all~="sub_rows_20"] > *,[all~="rows_20"]{ grid-template-rows:repeat(20, 1fr); } [all~="sub_rows_21"] > *,[all~="rows_21"]{ grid-template-rows:repeat(21, 1fr); } [all~="sub_rows_22"] > *,[all~="rows_22"]{ grid-template-rows:repeat(22, 1fr); } [all~="sub_rows_23"] > *,[all~="rows_23"]{ grid-template-rows:repeat(23, 1fr); } [all~="sub_rows"] > *,[all~="sub_rows_24"] > *,[all~="rows"],[all~="rows_24"]{ grid-template-rows:repeat(24, 1fr); } /* ==================================================================== ៥. GRID COLUMN SPAN (ការកំណត់ប្រវែង Span Column របស់ Element) -------------------------------------------------------------------- Note: កំណត់ឲ្យ Child Element រក្សាប្រវែងប៉ុន្មាន Column (span 1 ដល់ 24) Example:
កាន់កាប់ 4 Columns
កាន់កាប់ 8 Columns
==================================================================== */ [all~="sub_col_1"] > *,[all~="col_1"]{grid-column-end: span 1;} [all~="sub_col_2"] > *,[all~="col_2"]{grid-column-end: span 2;} [all~="sub_col_3"] > *,[all~="col_3"]{grid-column-end: span 3;} [all~="sub_col_4"] > *,[all~="col_4"]{grid-column-end: span 4;} [all~="sub_col_5"] > *,[all~="col_5"]{grid-column-end: span 5;} [all~="sub_col_6"] > *,[all~="col_6"]{grid-column-end: span 6;} [all~="sub_col_7"] > *,[all~="col_7"]{grid-column-end: span 7;} [all~="sub_col_8"] > *,[all~="col_8"]{grid-column-end: span 8;} [all~="sub_col_9"] > *,[all~="col_9"]{grid-column-end: span 9;} [all~="sub_col_10"] > *,[all~="col_10"]{grid-column-end: span 10;} [all~="sub_col_11"] > *,[all~="col_11"]{grid-column-end: span 11;} [all~="sub_col_12"] > *,[all~="col_12"]{grid-column-end: span 12;} [all~="sub_col_13"] > *,[all~="col_13"]{grid-column-end: span 13;} [all~="sub_col_14"] > *,[all~="col_14"]{grid-column-end: span 14;} [all~="sub_col_15"] > *,[all~="col_15"]{grid-column-end: span 15;} [all~="sub_col_16"] > *,[all~="col_16"]{grid-column-end: span 16;} [all~="sub_col_17"] > *,[all~="col_17"]{grid-column-end: span 17;} [all~="sub_col_18"] > *,[all~="col_18"]{grid-column-end: span 18;} [all~="sub_col_19"] > *,[all~="col_19"]{grid-column-end: span 19;} [all~="sub_col_20"] > *,[all~="col_20"]{grid-column-end: span 20;} [all~="sub_col_21"] > *,[all~="col_21"]{grid-column-end: span 21;} [all~="sub_col_22"] > *,[all~="col_22"]{grid-column-end: span 22;} [all~="sub_col_23"] > *,[all~="col_23"]{grid-column-end: span 23;} [all~="sub_col_24"] > *,[all~="sub_col"] > *,[all~="col_24"],[all~="col"]{grid-column-end: span 24;} /* ==================================================================== ៦. GRID ROW SPAN (ការកំណត់ប្រវែង Span Row របស់ Element) -------------------------------------------------------------------- Note: កំណត់ឲ្យ Child Element រក្សាប្រវែងប៉ុន្មាន Row តាមជួរឈរ (span 1 ដល់ 24) Example:
កាន់កាប់ 6 Rows
==================================================================== */ [all~="sub_row_1"] > *,[all~="row_1"]{grid-row-end: span 1;} [all~="sub_row_2"] > *,[all~="row_2"]{grid-row-end: span 2;} [all~="sub_row_3"] > *,[all~="row_3"]{grid-row-end: span 3;} [all~="sub_row_4"] > *,[all~="row_4"]{grid-row-end: span 4;} [all~="sub_row_5"] > *,[all~="row_5"]{grid-row-end: span 5;} [all~="sub_row_6"] > *,[all~="row_6"]{grid-row-end: span 6;} [all~="sub_row_7"] > *,[all~="row_7"]{grid-row-end: span 7;} [all~="sub_row_8"] > *,[all~="row_8"]{grid-row-end: span 8;} [all~="sub_row_9"] > *,[all~="row_9"]{grid-row-end: span 9;} [all~="sub_row_10"] > *,[all~="row_10"]{grid-row-end: span 10;} [all~="sub_row_11"] > *,[all~="row_11"]{grid-row-end: span 11;} [all~="sub_row_12"] > *,[all~="row_12"]{grid-row-end: span 12;} [all~="sub_row_13"] > *,[all~="row_13"]{grid-row-end: span 13;} [all~="sub_row_14"] > *,[all~="row_14"]{grid-row-end: span 14;} [all~="sub_row_15"] > *,[all~="row_15"]{grid-row-end: span 15;} [all~="sub_row_16"] > *,[all~="row_16"]{grid-row-end: span 16;} [all~="sub_row_17"] > *,[all~="row_17"]{grid-row-end: span 17;} [all~="sub_row_18"] > *,[all~="row_18"]{grid-row-end: span 18;} [all~="sub_row_19"] > *,[all~="row_19"]{grid-row-end: span 19;} [all~="sub_row_20"] > *,[all~="row_20"]{grid-row-end: span 20;} [all~="sub_row_21"] > *,[all~="row_21"]{grid-row-end: span 21;} [all~="sub_row_22"] > *,[all~="row_22"]{grid-row-end: span 22;} [all~="sub_row_23"] > *,[all~="row_23"]{grid-row-end: span 23;} [all~="sub_row_24"] > *,[all~="sub_row"] > *,[all~="row_24"],[all~="row"]{grid-row-end: span 24;} /* ==================================================================== ៧. GRID COLUMN OFFSET (ការរំកិលទីតាំងចាប់ផ្តើមរបស់ Column) -------------------------------------------------------------------- Note: កំណត់ចំណុចចាប់ផ្តើម (grid-column-start) របស់ Element Example:
Center Box
==================================================================== */ [all~="col_offset_0"]{grid-column-start: 1;} [all~="col_offset_1"]{grid-column-start: 2;} [all~="col_offset_2"]{grid-column-start: 3;} [all~="col_offset_3"]{grid-column-start: 4;} [all~="col_offset_4"]{grid-column-start: 5;} [all~="col_offset_5"]{grid-column-start: 6;} [all~="col_offset_6"]{grid-column-start: 7;} [all~="col_offset_7"]{grid-column-start: 8;} [all~="col_offset_8"]{grid-column-start: 9;} [all~="col_offset_9"]{grid-column-start: 10;} [all~="col_offset_10"]{grid-column-start: 11;} [all~="col_offset_11"]{grid-column-start: 12;} [all~="col_offset_12"]{grid-column-start: 13;} [all~="col_offset_13"]{grid-column-start: 14;} [all~="col_offset_14"]{grid-column-start: 15;} [all~="col_offset_15"]{grid-column-start: 16;} [all~="col_offset_16"]{grid-column-start: 17;} [all~="col_offset_17"]{grid-column-start: 18;} [all~="col_offset_18"]{grid-column-start: 19;} [all~="col_offset_19"]{grid-column-start: 20;} [all~="col_offset_20"]{grid-column-start: 21;} [all~="col_offset_21"]{grid-column-start: 22;} [all~="col_offset_22"]{grid-column-start: 23;} [all~="col_offset_23"]{grid-column-start: 24;} /*------------ row offset ------------*/ [all~="row_offset_0"]{grid-row-start: 1;} [all~="row_offset_1"]{grid-row-start: 2;} [all~="row_offset_2"]{grid-row-start: 3;} [all~="row_offset_3"]{grid-row-start: 4;} [all~="row_offset_4"]{grid-row-start: 5;} [all~="row_offset_5"]{grid-row-start: 6;} [all~="row_offset_6"]{grid-row-start: 7;} [all~="row_offset_7"]{grid-row-start: 8;} [all~="row_offset_8"]{grid-row-start: 9;} [all~="row_offset_9"]{grid-row-start: 10;} [all~="row_offset_10"]{grid-row-start: 11;} [all~="row_offset_11"]{grid-row-start: 12;} [all~="row_offset_12"]{grid-row-start: 13;} [all~="row_offset_13"]{grid-row-start: 14;} [all~="row_offset_14"]{grid-row-start: 15;} [all~="row_offset_15"]{grid-row-start: 16;} [all~="row_offset_16"]{grid-row-start: 17;} [all~="row_offset_17"]{grid-row-start: 18;} [all~="row_offset_18"]{grid-row-start: 19;} [all~="row_offset_19"]{grid-row-start: 20;} [all~="row_offset_20"]{grid-row-start: 21;} [all~="row_offset_21"]{grid-row-start: 22;} [all~="row_offset_22"]{grid-row-start: 23;} [all~="row_offset_23"]{grid-row-start: 24;} /*------------ list ------------*/ [all~="list_x"]{ overflow-x:auto; overflow-y:hidden; contain: size; box-sizing: border-box; grid-auto-flow: column; place-content: start; grid-auto-columns: max-content; & > *{ box-sizing: border-box; } } [all~="list_y"]{ overflow-y:auto; overflow-x:hidden; contain: size; box-sizing: border-box; grid-auto-flow: row; place-content: start; grid-auto-rows: max-content; & > *{ width:100%; box-sizing: border-box; } } /*------------ equal ------------*/ [all~="sub_equal"] > *,[all~="equal"]{ aspect-ratio: 1; align-self: flex-start;} [all~="sub_equal_12"] > *,[all~="equal_12"]{ aspect-ratio: 1 / 2; align-self: flex-start;} [all~="sub_equal_21"] > *,[all~="equal_21"]{ aspect-ratio: 2 / 1; align-self: flex-start;} [all~="sub_equal_23"] > *,[all~="equal_23"]{ aspect-ratio: 2 / 3; align-self: flex-start;} [all~="sub_equal_32"] > *,[all~="equal_32"]{ aspect-ratio: 3 / 2; align-self: flex-start;} [all~="sub_equal_43"] > *,[all~="equal_43"]{ aspect-ratio: 4 / 3; align-self: flex-start;} [all~="sub_equal_34"] > *,[all~="equal_34"]{ aspect-ratio: 3 / 4; align-self: flex-start;} [all~="sub_equal_45"] > *,[all~="equal_45"]{ aspect-ratio: 4 / 5; align-self: flex-start;} [all~="sub_equal_54"] > *,[all~="equal_54"]{ aspect-ratio: 5 / 4; align-self: flex-start;} [all~="sub_equal_56"] > *,[all~="equal_56"]{ aspect-ratio: 5 / 6; align-self: flex-start;} [all~="sub_equal_65"] > *,[all~="equal_65"]{ aspect-ratio: 6 / 5; align-self: flex-start;} /*------------ radius ------------*/ [all~="sub_radius_1"] > *,[all~="radius_1"]{ -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; } [all~="sub_radius_2"] > *,[all~="radius_2"]{ -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } [all~="sub_radius_3"] > *,[all~="radius_3"]{ -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } [all~="sub_radius_4"] > *,[all~="radius_4"]{ -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } [all~="sub_radius_5"] > *,[all~="radius_5"]{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } [all~="sub_radius_10"] > *,[all~="radius_10"]{ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } [all~="sub_radius_15"] > *,[all~="radius_15"]{ -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; } [all~="sub_radius_20"] > *,[all~="radius_20"]{ -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; } [all~="sub_radius_25"] > *,[all~="radius_25"]{ -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; } [all~="sub_radius_30"] > *,[all~="radius_30"]{ -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; } [all~="sub_circle"] > *,[all~="circle"]{ -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; overflow: hidden; } /*------------ hidden ------------*/ [all~="hidden"]{display: none !important;} /*------------ overflow auto------------*/ [all~="sub_overflow_x_auto"] > * ,[all~="overflow_x_auto"] { overflow-x: auto;} [all~="sub_overflow_y_auto"] > * ,[all~="overflow_y_auto"] { overflow-y: auto;} [all~="sub_overflow_auto"] > * ,[all~="overflow_auto"] { overflow: auto;} [all~="sub_overflow_x_scroll"]> * ,[all~="overflow_x_scroll"]{ overflow-x: scroll;} [all~="sub_overflow_y_scroll"]> * ,[all~="overflow_y_scroll"]{ overflow-y: scroll;} [all~="sub_overflow_scroll"] > * ,[all~="overflow_scroll"] { overflow: scroll;} [all~="sub_overflow_x_hidden"]> * ,[all~="overflow_x_hidden"]{ overflow-x: hidden;} [all~="sub_overflow_y_hidden"]> * ,[all~="overflow_y_hidden"]{ overflow-y: hidden;} [all~="sub_overflow_hidden"] > * ,[all~="overflow_hidden"] { overflow: hidden;} /*------------ height & width ------------*/ [all~="sub_max_content_x"] > *,[all~="max_content_x"]{ width: max-content;} [all~="sub_max_content_y"] > *,[all~="max_content_y"]{ height: max-content;} [all~="sub_full"] > *,[all~="full"]{height: 100%; width: 100%; box-sizing : border-box;} [all~="img_fill"]{ object-fit: fill;} [all~="img_fit_contain"]{ object-fit: contain;} [all~="img_cover"]{ object-fit: cover;} [all~="img_scale_down"]{ object-fit: scale-down;} [all~="sub_full_y"] > *,[all~="full_y"]{height: 100%;} [all~="sub_full_x"] > *,[all~="full_x"]{width: 100%;} [all~="sub_min_full_y"] > *,[all~="min_full_y"]{min-height: 100%;} [all~="sub_min_full_x"] > *,[all~="min_full_x"]{min-width: 100%;} [all~="sub_max_full_y"] > *,[all~="max_full_y"]{max-height: 100%;} [all~="sub_max_full_x"] > *,[all~="max_full_x"]{max-width: 100%;} [all~="sub_y_5%"] > *,[all~="y_5%"]{height: 5%;} [all~="sub_y_10%"] > *,[all~="y_10%"]{height: 10%;} [all~="sub_y_15%"] > *,[all~="y_15%"]{height: 15%;} [all~="sub_y_20%"] > *,[all~="y_20%"]{height: 20%;} [all~="sub_y_25%"] > *,[all~="y_25%"]{height: 25%;} [all~="sub_y_30%"] > *,[all~="y_30%"]{height: 30%;} [all~="sub_y_35%"] > *,[all~="y_35%"]{height: 35%;} [all~="sub_y_40%"] > *,[all~="y_40%"]{height: 40%;} [all~="sub_y_45%"] > *,[all~="y_45%"]{height: 45%;} [all~="sub_y_50%"] > *,[all~="y_50%"]{height: 50%;} [all~="sub_y_55%"] > *,[all~="y_55%"]{height: 55%;} [all~="sub_y_60%"] > *,[all~="y_60%"]{height: 60%;} [all~="sub_y_65%"] > *,[all~="y_65%"]{height: 65%;} [all~="sub_y_70%"] > *,[all~="y_70%"]{height: 70%;} [all~="sub_y_75%"] > *,[all~="y_75%"]{height: 75%;} [all~="sub_y_80%"] > *,[all~="y_80%"]{height: 80%;} [all~="sub_y_85%"] > *,[all~="y_85%"]{height: 85%;} [all~="sub_y_90%"] > *,[all~="y_90%"]{height: 90%;} [all~="sub_y_95%"] > *,[all~="y_95%"]{height: 95%;} [all~="sub_y_100%"] > *,[all~="y_100%"]{height: 100%;} [all~="sub_x_5vw"] > *,[all~="x_5vw"]{width: 5vw;} [all~="sub_x_10vw"] > *,[all~="x_10vw"]{width: 10vw;} [all~="sub_x_15vw"] > *,[all~="x_15vw"]{width: 15vw;} [all~="sub_x_20vw"] > *,[all~="x_20vw"]{width: 20vw;} [all~="sub_x_25vw"] > *,[all~="x_25vw"]{width: 25vw;} [all~="sub_x_30vw"] > *,[all~="x_30vw"]{width: 30vw;} [all~="sub_x_35vw"] > *,[all~="x_35vw"]{width: 35vw;} [all~="sub_x_40vw"] > *,[all~="x_40vw"]{width: 40vw;} [all~="sub_x_45vw"] > *,[all~="x_45vw"]{width: 45vw;} [all~="sub_x_50vw"] > *,[all~="x_50vw"]{width: 50vw;} [all~="sub_x_55vw"] > *,[all~="x_55vw"]{width: 55vw;} [all~="sub_x_60vw"] > *,[all~="x_60vw"]{width: 60vw;} [all~="sub_x_65vw"] > *,[all~="x_65vw"]{width: 65vw;} [all~="sub_x_70vw"] > *,[all~="x_70vw"]{width: 70vw;} [all~="sub_x_75vw"] > *,[all~="x_75vw"]{width: 75vw;} [all~="sub_x_80vw"] > *,[all~="x_80vw"]{width: 80vw;} [all~="sub_x_85vw"] > *,[all~="x_85vw"]{width: 85vw;} [all~="sub_x_90vw"] > *,[all~="x_90vw"]{width: 90vw;} [all~="sub_x_95vw"] > *,[all~="x_95vw"]{width: 95vw;} [all~="sub_x_100vw"] > *,[all~="x_100vw"]{width: 100vw;} [all~="sub_y_5vh"] > *,[all~="y_5vh"]{height: 5vh;} [all~="sub_y_10vh"] > *,[all~="y_10vh"]{height: 10vh;} [all~="sub_y_15vh"] > *,[all~="y_15vh"]{height: 15vh;} [all~="sub_y_20vh"] > *,[all~="y_20vh"]{height: 20vh;} [all~="sub_y_25vh"] > *,[all~="y_25vh"]{height: 25vh;} [all~="sub_y_30vh"] > *,[all~="y_30vh"]{height: 30vh;} [all~="sub_y_35vh"] > *,[all~="y_35vh"]{height: 35vh;} [all~="sub_y_40vh"] > *,[all~="y_40vh"]{height: 40vh;} [all~="sub_y_45vh"] > *,[all~="y_45vh"]{height: 45vh;} [all~="sub_y_50vh"] > *,[all~="y_50vh"]{height: 50vh;} [all~="sub_y_55vh"] > *,[all~="y_55vh"]{height: 55vh;} [all~="sub_y_60vh"] > *,[all~="y_60vh"]{height: 60vh;} [all~="sub_y_65vh"] > *,[all~="y_65vh"]{height: 65vh;} [all~="sub_y_70vh"] > *,[all~="y_70vh"]{height: 70vh;} [all~="sub_y_75vh"] > *,[all~="y_75vh"]{height: 75vh;} [all~="sub_y_80vh"] > *,[all~="y_80vh"]{height: 80vh;} [all~="sub_y_85vh"] > *,[all~="y_85vh"]{height: 85vh;} [all~="sub_y_90vh"] > *,[all~="y_90vh"]{height: 90vh;} [all~="sub_y_95vh"] > *,[all~="y_95vh"]{height: 95vh;} [all~="sub_y_100vh"] > *,[all~="y_100vh"]{height: 100vh;} [all~="sub_y_5"] > *,[all~="y_5"]{height: 5px;} [all~="sub_y_10"] > *,[all~="y_10"]{height: 10px;} [all~="sub_y_15"] > *,[all~="y_15"]{height: 15px;} [all~="sub_y_20"] > *,[all~="y_20"]{height: 20px;} [all~="sub_y_25"] > *,[all~="y_25"]{height: 25px;} [all~="sub_y_30"] > *,[all~="y_30"]{height: 30px;} [all~="sub_y_35"] > *,[all~="y_35"]{height: 35px;} [all~="sub_y_40"] > *,[all~="y_40"]{height: 40px;} [all~="sub_y_45"] > *,[all~="y_45"]{height: 45px;} [all~="sub_y_50"] > *,[all~="y_50"]{height: 50px;} [all~="sub_y_55"] > *,[all~="y_55"]{height: 55px;} [all~="sub_y_60"] > *,[all~="y_60"]{height: 60px;} [all~="sub_y_65"] > *,[all~="y_65"]{height: 65px;} [all~="sub_y_70"] > *,[all~="y_70"]{height: 70px;} [all~="sub_y_75"] > *,[all~="y_75"]{height: 75px;} [all~="sub_y_80"] > *,[all~="y_80"]{height: 80px;} [all~="sub_y_85"] > *,[all~="y_85"]{height: 85px;} [all~="sub_y_90"] > *,[all~="y_90"]{height: 90px;} [all~="sub_y_95"] > *,[all~="y_95"]{height: 95px;} [all~="sub_y_100"] > *,[all~="y_100"]{height: 100px;} [all~="sub_y_150"] > *,[all~="y_150"]{height: 150px;} [all~="sub_y_200"] > *,[all~="y_200"]{height: 200px;} [all~="sub_y_250"] > *,[all~="y_250"]{height: 250px;} [all~="sub_y_300"] > *,[all~="y_300"]{height: 300px;} [all~="sub_y_350"] > *,[all~="y_350"]{height: 350px;} [all~="sub_y_400"] > *,[all~="y_400"]{height: 400px;} [all~="sub_y_450"] > *,[all~="y_450"]{height: 450px;} [all~="sub_y_500"] > *,[all~="y_500"]{height: 500px;} [all~="sub_y_550"] > *,[all~="y_550"]{height: 550px;} [all~="sub_y_600"] > *,[all~="y_600"]{height: 600px;} [all~="sub_y_650"] > *,[all~="y_650"]{height: 650px;} [all~="sub_y_700"] > *,[all~="y_700"]{height: 700px;} [all~="sub_y_750"] > *,[all~="y_750"]{height: 750px;} [all~="sub_y_800"] > *,[all~="y_800"]{height: 800px;} [all~="sub_y_850"] > *,[all~="y_850"]{height: 850px;} [all~="sub_y_900"] > *,[all~="y_900"]{height: 900px;} [all~="sub_y_950"] > *,[all~="y_950"]{height: 950px;} [all~="sub_y_1000"] > *,[all~="y_1000"]{height: 1000px;} [all~="sub_x_5"] > *,[all~="x_5"]{width: 5px;} [all~="sub_x_10"] > *,[all~="x_10"]{width: 10px;} [all~="sub_x_15"] > *,[all~="x_15"]{width: 15px;} [all~="sub_x_20"] > *,[all~="x_20"]{width: 20px;} [all~="sub_x_25"] > *,[all~="x_25"]{width: 25px;} [all~="sub_x_30"] > *,[all~="x_30"]{width: 30px;} [all~="sub_x_35"] > *,[all~="x_35"]{width: 35px;} [all~="sub_x_40"] > *,[all~="x_40"]{width: 40px;} [all~="sub_x_45"] > *,[all~="x_45"]{width: 45px;} [all~="sub_x_50"] > *,[all~="x_50"]{width: 50px;} [all~="sub_x_55"] > *,[all~="x_55"]{width: 55px;} [all~="sub_x_60"] > *,[all~="x_60"]{width: 60px;} [all~="sub_x_65"] > *,[all~="x_65"]{width: 65px;} [all~="sub_x_70"] > *,[all~="x_70"]{width: 70px;} [all~="sub_x_75"] > *,[all~="x_75"]{width: 75px;} [all~="sub_x_80"] > *,[all~="x_80"]{width: 80px;} [all~="sub_x_85"] > *,[all~="x_85"]{width: 85px;} [all~="sub_x_90"] > *,[all~="x_90"]{width: 90px;} [all~="sub_x_95"] > *,[all~="x_95"]{width: 95px;} [all~="sub_x_100"] > *,[all~="x_100"]{width: 100px;} [all~="sub_x_150"] > *,[all~="x_150"]{width: 150px;} [all~="sub_x_200"] > *,[all~="x_200"]{width: 200px;} [all~="sub_x_250"] > *,[all~="x_250"]{width: 250px;} [all~="sub_x_300"] > *,[all~="x_300"]{width: 300px;} [all~="sub_x_350"] > *,[all~="x_350"]{width: 350px;} [all~="sub_x_400"] > *,[all~="x_400"]{width: 400px;} [all~="sub_x_450"] > *,[all~="x_450"]{width: 450px;} [all~="sub_x_500"] > *,[all~="x_500"]{width: 500px;} [all~="sub_x_550"] > *,[all~="x_550"]{width: 550px;} [all~="sub_x_600"] > *,[all~="x_600"]{width: 600px;} [all~="sub_x_650"] > *,[all~="x_650"]{width: 650px;} [all~="sub_x_700"] > *,[all~="x_700"]{width: 700px;} [all~="sub_x_750"] > *,[all~="x_750"]{width: 750px;} [all~="sub_x_800"] > *,[all~="x_800"]{width: 800px;} [all~="sub_x_850"] > *,[all~="x_850"]{width: 850px;} [all~="sub_x_900"] > *,[all~="x_900"]{width: 900px;} [all~="sub_x_950"] > *,[all~="x_950"]{width: 950px;} [all~="sub_x_1000"] > *,[all~="x_1000"]{width: 1000px;} [all~="lx_100"]{grid-template-columns: repeat(auto-fill, 100px);} [all~="lx_150"]{grid-template-columns: repeat(auto-fill, 150px);} [all~="lx_200"]{grid-template-columns: repeat(auto-fill, 200px);} [all~="lx_250"]{grid-template-columns: repeat(auto-fill, 250px);} [all~="lx_300"]{grid-template-columns: repeat(auto-fill, 300px);} [all~="lx_350"]{grid-template-columns: repeat(auto-fill, 350px);} [all~="lx_400"]{grid-template-columns: repeat(auto-fill, 400px);} [all~="lx_450"]{grid-template-columns: repeat(auto-fill, 450px);} [all~="lx_500"]{grid-template-columns: repeat(auto-fill, 500px);} [all~="lx_550"]{grid-template-columns: repeat(auto-fill, 550px);} [all~="lx_600"]{grid-template-columns: repeat(auto-fill, 600px);} [all~="lx_650"]{grid-template-columns: repeat(auto-fill, 650px);} [all~="lx_700"]{grid-template-columns: repeat(auto-fill, 700px);} [all~="lx_750"]{grid-template-columns: repeat(auto-fill, 750px);} [all~="lx_800"]{grid-template-columns: repeat(auto-fill, 800px);} [all~="lx_850"]{grid-template-columns: repeat(auto-fill, 850px);} [all~="lx_900"]{grid-template-columns: repeat(auto-fill, 900px);} [all~="lx_950"]{grid-template-columns: repeat(auto-fill, 950px);} [all~="ly_100"]{grid-template-rows: repeat(auto-fill, 100px);} [all~="ly_150"]{grid-template-rows: repeat(auto-fill, 150px);} [all~="ly_200"]{grid-template-rows: repeat(auto-fill, 200px);} [all~="ly_250"]{grid-template-rows: repeat(auto-fill, 250px);} [all~="ly_300"]{grid-template-rows: repeat(auto-fill, 300px);} [all~="ly_350"]{grid-template-rows: repeat(auto-fill, 350px);} [all~="ly_400"]{grid-template-rows: repeat(auto-fill, 400px);} [all~="ly_450"]{grid-template-rows: repeat(auto-fill, 450px);} [all~="ly_500"]{grid-template-rows: repeat(auto-fill, 500px);} [all~="ly_550"]{grid-template-rows: repeat(auto-fill, 550px);} [all~="ly_600"]{grid-template-rows: repeat(auto-fill, 600px);} [all~="ly_650"]{grid-template-rows: repeat(auto-fill, 650px);} [all~="ly_700"]{grid-template-rows: repeat(auto-fill, 700px);} [all~="ly_750"]{grid-template-rows: repeat(auto-fill, 750px);} [all~="ly_800"]{grid-template-rows: repeat(auto-fill, 800px);} [all~="ly_850"]{grid-template-rows: repeat(auto-fill, 850px);} [all~="ly_900"]{grid-template-rows: repeat(auto-fill, 900px);} [all~="ly_950"]{grid-template-rows: repeat(auto-fill, 950px);} [all~="lx_10vw"]{grid-template-columns: repeat(auto-fill, 10vw);} [all~="lx_15vw"]{grid-template-columns: repeat(auto-fill, 15vw);} [all~="lx_20vw"]{grid-template-columns: repeat(auto-fill, 20vw);} [all~="lx_25vw"]{grid-template-columns: repeat(auto-fill, 25vw);} [all~="lx_30vw"]{grid-template-columns: repeat(auto-fill, 30vw);} [all~="lx_35vw"]{grid-template-columns: repeat(auto-fill, 35vw);} [all~="lx_40vw"]{grid-template-columns: repeat(auto-fill, 40vw);} [all~="lx_45vw"]{grid-template-columns: repeat(auto-fill, 45vw);} [all~="lx_50vw"]{grid-template-columns: repeat(auto-fill, 50vw);} [all~="lx_55vw"]{grid-template-columns: repeat(auto-fill, 55vw);} [all~="lx_60vw"]{grid-template-columns: repeat(auto-fill, 60vw);} [all~="lx_65vw"]{grid-template-columns: repeat(auto-fill, 65vw);} [all~="lx_70vw"]{grid-template-columns: repeat(auto-fill, 70vw);} [all~="lx_75vw"]{grid-template-columns: repeat(auto-fill, 75vw);} [all~="lx_80vw"]{grid-template-columns: repeat(auto-fill, 80vw);} [all~="lx_85vw"]{grid-template-columns: repeat(auto-fill, 85vw);} [all~="lx_90vw"]{grid-template-columns: repeat(auto-fill, 90vw);} [all~="lx_95vw"]{grid-template-columns: repeat(auto-fill, 95vw);} [all~="ly_10vh"]{grid-template-rows: repeat(auto-fill, 10vh);} [all~="ly_15vh"]{grid-template-rows: repeat(auto-fill, 15vh);} [all~="ly_20vh"]{grid-template-rows: repeat(auto-fill, 20vh);} [all~="ly_25vh"]{grid-template-rows: repeat(auto-fill, 25vh);} [all~="ly_30vh"]{grid-template-rows: repeat(auto-fill, 30vh);} [all~="ly_35vh"]{grid-template-rows: repeat(auto-fill, 35vh);} [all~="ly_40vh"]{grid-template-rows: repeat(auto-fill, 40vh);} [all~="ly_45vh"]{grid-template-rows: repeat(auto-fill, 45vh);} [all~="ly_50vh"]{grid-template-rows: repeat(auto-fill, 50vh);} [all~="ly_55vh"]{grid-template-rows: repeat(auto-fill, 55vh);} [all~="ly_60vh"]{grid-template-rows: repeat(auto-fill, 60vh);} [all~="ly_65vh"]{grid-template-rows: repeat(auto-fill, 65vh);} [all~="ly_70vh"]{grid-template-rows: repeat(auto-fill, 70vh);} [all~="ly_75vh"]{grid-template-rows: repeat(auto-fill, 75vh);} [all~="ly_80vh"]{grid-template-rows: repeat(auto-fill, 80vh);} [all~="ly_85vh"]{grid-template-rows: repeat(auto-fill, 85vh);} [all~="ly_90vh"]{grid-template-rows: repeat(auto-fill, 90vh);} [all~="ly_95vh"]{grid-template-rows: repeat(auto-fill, 95vh);} [all~="lx_10%"]{grid-template-columns: repeat(auto-fill, 10%);} [all~="lx_15%"]{grid-template-columns: repeat(auto-fill, 15%);} [all~="lx_20%"]{grid-template-columns: repeat(auto-fill, 20%);} [all~="lx_25%"]{grid-template-columns: repeat(auto-fill, 25%);} [all~="lx_30%"]{grid-template-columns: repeat(auto-fill, 30%);} [all~="lx_35%"]{grid-template-columns: repeat(auto-fill, 35%);} [all~="lx_40%"]{grid-template-columns: repeat(auto-fill, 40%);} [all~="lx_45%"]{grid-template-columns: repeat(auto-fill, 45%);} [all~="lx_50%"]{grid-template-columns: repeat(auto-fill, 50%);} [all~="lx_55%"]{grid-template-columns: repeat(auto-fill, 55%);} [all~="lx_60%"]{grid-template-columns: repeat(auto-fill, 60%);} [all~="lx_65%"]{grid-template-columns: repeat(auto-fill, 65%);} [all~="lx_70%"]{grid-template-columns: repeat(auto-fill, 70%);} [all~="lx_75%"]{grid-template-columns: repeat(auto-fill, 75%);} [all~="lx_80%"]{grid-template-columns: repeat(auto-fill, 80%);} [all~="lx_85%"]{grid-template-columns: repeat(auto-fill, 85%);} [all~="lx_90%"]{grid-template-columns: repeat(auto-fill, 90%);} [all~="lx_95%"]{grid-template-columns: repeat(auto-fill, 95%);} [all~="ly_10%"]{grid-template-rows: repeat(auto-fill, 10%);} [all~="ly_15%"]{grid-template-rows: repeat(auto-fill, 15%);} [all~="ly_20%"]{grid-template-rows: repeat(auto-fill, 20%);} [all~="ly_25%"]{grid-template-rows: repeat(auto-fill, 25%);} [all~="ly_30%"]{grid-template-rows: repeat(auto-fill, 30%);} [all~="ly_35%"]{grid-template-rows: repeat(auto-fill, 35%);} [all~="ly_40%"]{grid-template-rows: repeat(auto-fill, 40%);} [all~="ly_45%"]{grid-template-rows: repeat(auto-fill, 45%);} [all~="ly_50%"]{grid-template-rows: repeat(auto-fill, 50%);} [all~="ly_55%"]{grid-template-rows: repeat(auto-fill, 55%);} [all~="ly_60%"]{grid-template-rows: repeat(auto-fill, 60%);} [all~="ly_65%"]{grid-template-rows: repeat(auto-fill, 65%);} [all~="ly_70%"]{grid-template-rows: repeat(auto-fill, 70%);} [all~="ly_75%"]{grid-template-rows: repeat(auto-fill, 75%);} [all~="ly_80%"]{grid-template-rows: repeat(auto-fill, 80%);} [all~="ly_85%"]{grid-template-rows: repeat(auto-fill, 85%);} [all~="ly_90%"]{grid-template-rows: repeat(auto-fill, 90%);} [all~="ly_95%"]{grid-template-rows: repeat(auto-fill, 95%);} /*------------ flow ------------*/ [all~="auto_flow_x"]{ grid-auto-flow: row; } [all~="auto_flow_y"]{ grid-auto-flow: column; } [all~="auto_flow_dense"]{ grid-auto-flow: dense; } [all~="auto_flow_x_dense"]{ grid-auto-flow: row dense; } [all~="auto_flow_y_dense"]{ grid-auto-flow: column dense; } /*------------ gap ------------*/ [all~="gap_0"]{ gap:0px; padding:0px; } [all~="gap_3"]{ gap:3px; padding:3px; } [all~="gap_5"]{ gap:5px; padding:5px; } [all~="gap_10"]{ gap:10px; padding:10px; } [all~="gap_15"]{ gap:15px; padding:15px; } [all~="gap_20"]{ gap:20px; padding:20px; } /*------------ padding ------------*/ [all~="sub_padding_0"] > *,[all~="padding_0"]{ padding:0px; } [all~="sub_padding_3"] > *,[all~="padding_3"]{ padding:3px; } [all~="sub_padding_5"] > *,[all~="padding_5"]{ padding:5px; } [all~="sub_padding_10"] > *,[all~="padding_10"]{ padding:10px; } [all~="sub_padding_15"] > *,[all~="padding_15"]{ padding:15px; } [all~="sub_padding_20"] > *,[all~="padding_20"]{ padding:20px; } [all~="sub_padding_x_0"] > *,[all~="padding_x_0"]{ padding-right:0px; padding-left:0px;} [all~="sub_padding_x_3"] > *,[all~="padding_x_3"]{ padding-right:3px; padding-left:3px;} [all~="sub_padding_x_5"] > *,[all~="padding_x_5"]{ padding-right:5px; padding-left:5px;} [all~="sub_padding_x_10"] > *,[all~="padding_x_10"]{ padding-right:10px; padding-left:10px;} [all~="sub_padding_x_15"] > *,[all~="padding_x_15"]{ padding-right:15px; padding-left:15px;} [all~="sub_padding_x_20"] > *,[all~="padding_x_20"]{ padding-right:20px; padding-left:20px;} [all~="sub_padding_y_0"] > *,[all~="padding_y_0"]{ padding-top:0px; padding-bottom:0px;} [all~="sub_padding_y_3"] > *,[all~="padding_y_3"]{ padding-top:3px; padding-bottom:3px;} [all~="sub_padding_y_5"] > *,[all~="padding_y_5"]{ padding-top:5px; padding-bottom:5px;} [all~="sub_padding_y_10"] > *,[all~="padding_y_10"]{ padding-top:10px; padding-bottom:10px; } [all~="sub_padding_y_15"] > *,[all~="padding_y_15"]{ padding-top:15px; padding-bottom:15px;} [all~="sub_padding_y_20"] > *,[all~="padding_y_20"]{ padding-top:20px; padding-bottom:20px;} [all~="sub_padding_top_0"] > *,[all~="padding_top_0"]{ padding-top:0px; } [all~="sub_padding_top_3"] > *,[all~="padding_top_3"]{ padding-top:3px; } [all~="sub_padding_top_5"] > *,[all~="padding_top_5"]{ padding-top:5px; } [all~="sub_padding_top_10"] > *,[all~="padding_top_10"]{ padding-top:10px; } [all~="sub_padding_top_15"] > *,[all~="padding_top_15"]{ padding-top:15px; } [all~="sub_padding_top_20"] > *,[all~="padding_top_20"]{ padding-top:20px; } [all~="sub_padding_right_0"] > *,[all~="padding_right_0"]{ padding-right:0px; } [all~="sub_padding_right_3"] > *,[all~="padding_right_3"]{ padding-right:3px; } [all~="sub_padding_right_5"] > *,[all~="padding_right_5"]{ padding-right:5px; } [all~="sub_padding_right_10"] > *,[all~="padding_right_10"]{ padding-right:10px; } [all~="sub_padding_right_15"] > *,[all~="padding_right_15"]{ padding-right:15px; } [all~="sub_padding_right_20"] > *,[all~="padding_right_20"]{ padding-right:20px; } [all~="sub_padding_bottom_0"] > *,[all~="padding_bottom_0"]{ padding-bottom:0px; } [all~="sub_padding_bottom_3"] > *,[all~="padding_bottom_3"]{ padding-bottom:3px; } [all~="sub_padding_bottom_5"] > *,[all~="padding_bottom_5"]{ padding-bottom:5px; } [all~="sub_padding_bottom_10"] > *,[all~="padding_bottom_10"]{ padding-bottom:10px; } [all~="sub_padding_bottom_15"] > *,[all~="padding_bottom_15"]{ padding-bottom:15px; } [all~="sub_padding_bottom_20"] > *,[all~="padding_bottom_20"]{ padding-bottom:20px; } [all~="sub_padding_left_0"] > *,[all~="padding_left_0"]{ padding-left:0px; } [all~="sub_padding_left_3"] > *,[all~="padding_left_3"]{ padding-left:3px; } [all~="sub_padding_left_5"] > *,[all~="padding_left_5"]{ padding-left:5px; } [all~="sub_padding_left_10"] > *,[all~="padding_left_10"]{ padding-left:10px; } [all~="sub_padding_left_15"] > *,[all~="padding_left_15"]{ padding-left:15px; } [all~="sub_padding_left_20"] > *,[all~="padding_left_20"]{ padding-left:20px; } /*------------ margin ------------*/ [all~="sub_margin_0"] > *,[all~="margin_0"]{ margin:0px; } [all~="sub_margin_3"] > *,[all~="margin_3"]{ margin:3px; } [all~="sub_margin_5"] > *,[all~="margin_5"]{ margin:5px; } [all~="sub_margin_10"] > *,[all~="margin_10"]{ margin:10px; } [all~="sub_margin_15"] > *,[all~="margin_15"]{ margin:15px; } [all~="sub_margin_20"] > *,[all~="margin_20"]{ margin:20px; } [all~="sub_margin_x_0"] > *,[all~="margin_x_0"]{ margin-right:0px; margin-left:0px;} [all~="sub_margin_x_3"] > *,[all~="margin_x_3"]{ margin-right:3px; margin-left:3px;} [all~="sub_margin_x_5"] > *,[all~="margin_x_5"]{ margin-right:5px; margin-left:5px;} [all~="sub_margin_x_10"] > *,[all~="margin_x_10"]{ margin-right:10px; margin-left:10px;} [all~="sub_margin_x_15"] > *,[all~="margin_x_15"]{ margin-right:15px; margin-left:15px;} [all~="sub_margin_x_20"] > *,[all~="margin_x_20"]{ margin-right:20px; margin-left:20px;} [all~="sub_margin_y_0"] > *,[all~="margin_y_0"]{ margin-top:0px; margin-bottom:0px;} [all~="sub_margin_y_3"] > *,[all~="margin_y_3"]{ margin-top:3px; margin-bottom:3px;} [all~="sub_margin_y_5"] > *,[all~="margin_y_5"]{ margin-top:5px; margin-bottom:5px;} [all~="sub_margin_y_10"] > *,[all~="margin_y_10"]{ margin-top:10px; margin-bottom:10px;} [all~="sub_margin_y_15"] > *,[all~="margin_y_15"]{ margin-top:15px; margin-bottom:15px;} [all~="sub_margin_y_20"] > *,[all~="margin_y_20"]{ margin-top:20px; margin-bottom:20px;} [all~="sub_margin_top_0"] > *,[all~="margin_top_0"]{ margin-top:0px; } [all~="sub_margin_top_3"] > *,[all~="margin_top_3"]{ margin-top:3px; } [all~="sub_margin_top_5"] > *,[all~="margin_top_5"]{ margin-top:5px; } [all~="sub_margin_top_10"] > *,[all~="margin_top_10"]{ margin-top:10px; } [all~="sub_margin_top_15"] > *,[all~="margin_top_15"]{ margin-top:15px; } [all~="sub_margin_top_20"] > *,[all~="margin_top_20"]{ margin-top:20px; } [all~="sub_margin_right_0"] > *,[all~="margin_right_0"]{ margin-right:0px; } [all~="sub_margin_right_3"] > *,[all~="margin_right_3"]{ margin-right:3px; } [all~="sub_margin_right_5"] > *,[all~="margin_right_5"]{ margin-right:5px; } [all~="sub_margin_right_10"] > *,[all~="margin_right_10"]{ margin-right:10px; } [all~="sub_margin_right_15"] > *,[all~="margin_right_15"]{ margin-right:15px; } [all~="sub_margin_right_20"] > *,[all~="margin_right_20"]{ margin-right:20px; } [all~="sub_margin_bottom_0"] > *,[all~="margin_bottom_0"]{ margin-bottom:0px; } [all~="sub_margin_bottom_3"] > *,[all~="margin_bottom_3"]{ margin-bottom:3px; } [all~="sub_margin_bottom_5"] > *,[all~="margin_bottom_5"]{ margin-bottom:5px; } [all~="sub_margin_bottom_10"] > *,[all~="margin_bottom_10"]{ margin-bottom:10px; } [all~="sub_margin_bottom_15"] > *,[all~="margin_bottom_15"]{ margin-bottom:15px; } [all~="sub_margin_bottom_20"] > *,[all~="margin_bottom_20"]{ margin-bottom:20px; } [all~="sub_margin_left_0"] > *,[all~="margin_left_0"]{ margin-left:0px; } [all~="sub_margin_left_3"] > *,[all~="margin_left_3"]{ margin-left:3px; } [all~="sub_margin_left_5"] > *,[all~="margin_left_5"]{ margin-left:5px; } [all~="sub_margin_left_10"] > *,[all~="margin_left_10"]{ margin-left:10px; } [all~="sub_margin_left_15"] > *,[all~="margin_left_15"]{ margin-left:15px; } [all~="sub_margin_left_20"] > *,[all~="margin_left_20"]{ margin-left:20px; } /*------------ Font size -------------*/ [all~="sub_font_8"] > *,[all~="font_8"]{font-size: 8px; } [all~="sub_font_9"] > *,[all~="font_9"]{font-size: 9px; } [all~="sub_font_10"] > *,[all~="font_10"]{font-size: 10px; } [all~="sub_font_11"] > *,[all~="font_11"]{font-size: 11px; } [all~="sub_font_12"] > *,[all~="font_12"]{font-size: 12px; } [all~="sub_font_13"] > *,[all~="font_13"]{font-size: 13px; } [all~="sub_font_14"] > *,[all~="font_14"]{font-size: 14px; } [all~="sub_font_15"] > *,[all~="font_15"]{font-size: 15px; } [all~="sub_font_16"] > *,[all~="font_16"]{font-size: 16px; } [all~="sub_font_17"] > *,[all~="font_17"]{font-size: 17px; } [all~="sub_font_18"] > *,[all~="font_18"]{font-size: 18px; } [all~="sub_font_19"] > *,[all~="font_19"]{font-size: 19px; } [all~="sub_font_20"] > *,[all~="font_20"]{font-size: 20px; } [all~="sub_font_21"] > *,[all~="font_21"]{font-size: 21px; } [all~="sub_font_22"] > *,[all~="font_22"]{font-size: 22px; } [all~="sub_font_23"] > *,[all~="font_23"]{font-size: 23px; } [all~="sub_font_24"] > *,[all~="font_24"]{font-size: 24px; } [all~="sub_font_25"] > *,[all~="font_25"]{font-size: 25px; } [all~="sub_font_26"] > *,[all~="font_26"]{font-size: 26px; } [all~="sub_font_27"] > *,[all~="font_27"]{font-size: 27px; } [all~="sub_font_28"] > *,[all~="font_28"]{font-size: 28px; } [all~="sub_font_29"] > *,[all~="font_29"]{font-size: 29px; } [all~="sub_font_30"] > *,[all~="font_30"]{font-size: 30px; } [all~="sub_font_35"] > *,[all~="font_35"]{font-size: 35px; } [all~="sub_font_40"] > *,[all~="font_40"]{font-size: 40px; } [all~="sub_font_45"] > *,[all~="font_45"]{font-size: 45px; } [all~="sub_font_50"] > *,[all~="font_50"]{font-size: 50px; } [all~="sub_font_55"] > *,[all~="font_55"]{font-size: 55px; } [all~="sub_font_60"] > *,[all~="font_60"]{font-size: 60px; } /*------------ position ------------------*/ [all~="fixed"]{position: fixed;} [all~="absolute"]{position: absolute;} [all~="relative"]{position: relative;} [all~="grid"]{ display:grid; } [all~="inline_grid"]{ display:inline-grid; } [all~="block"]{ display:block; } [all~="inline_block"]{ display:inline-block; } [all~="relative"]{ display:none; } [all~="top_0"]{top:0;} [all~="left_0"]{left: 0;} [all~="right_0"]{right: 0;} [all~="button_0"]{bottom: 0;} [all~="top_100"]{top:100%;} [all~="left_100"]{left: 100%;} [all~="right_100"]{right: 100%;} [all~="button_100"]{bottom: 100%;} [all~="screen_center"]{ float: none ; top: 50% ; left: 50% ; -webkit-transform: translate(-50%, -50%) ; -ms-transform: translate(-50%, -50%) ; -moz-transform: translate(-50%, -50%) ; position: fixed ; } [all~="screen_center_x"]{ oat: none ; left: 50% ; -webkit-transform: translate(-50%, 0%) ; -ms-transform: translate(-50%, 0%) ; -moz-transform: translate(-50%, 0%) ; position: fixed ; } [all~="screen_center_y"]{ float: none ; top: 50% ; -webkit-transform: translate(0%, -50%) ; -ms-transform: translate(0%, -50%) ; -moz-transform: translate(0%, -50%) ; position: fixed ; } [all~="page_center"]{ float: none ; top: 50% ; left: 50% ; -webkit-transform: translate(-50%, -50%) ; -ms-transform: translate(-50%, -50%) ; -moz-transform: translate(-50%, -50%) ; position: absolute ; } [all~="page_center_x"]{ float: none ; left: 50% ; -webkit-transform: translate(-50%, 0%) ; -ms-transform: translate(-50%, 0%) ; -moz-transform: translate(-50%, 0%) ; position: absolute ; } [all~="page_center_y"]{ float: none ; top: 50% ; -webkit-transform: translate(0%, -50%) ; -ms-transform: translate(0%, -50%) ; -moz-transform: translate(0%, -50%) ; position: absolute ; } [all~="tag_center"]{ float: none ; top: 50% ; left: 50% ; -webkit-transform: translate(-50%, -50%) ; -ms-transform: translate(-50%, -50%) ; -moz-transform: translate(-50%, -50%) ; position: relative ; } [all~="tag_center_x"]{ float: none ; left: 50% ; -webkit-transform: translate(-50%, 0%) ; -ms-transform: translate(-50%, 0%) ; -ms-transform: translate(-50%, 0%) ; position: relative ; } [all~="tag_center_y"]{ float: none ; top: 50% ; -webkit-transform: translate(0%, -50%) ; -ms-transform: translate(0%, -50%) ; -moz-transform: translate(0%, -50%) ; position: relative ; } [all~="self_left"]{justify-self: left; } [all~="self_center"]{justify-self: center; } [all~="self_right"]{justify-self: right; } /*------------ scroll ------------------*/ [all~="scroll_r"]{direction: rtl;} /*------------ scroll ------------------*/ [all~="zoom_1"], [all~="sub_zoom_1"] > *{transform: scale(0.1);} [all~="zoom_2"], [all~="sub_zoom_2"] > *{transform: scale(0.2);} [all~="zoom_3"], [all~="sub_zoom_3"] > *{transform: scale(0.3);} [all~="zoom_4"], [all~="sub_zoom_4"] > *{transform: scale(0.4);} [all~="zoom_5"], [all~="sub_zoom_5"] > *{transform: scale(0.5);} [all~="zoom_6"], [all~="sub_zoom_6"] > *{transform: scale(0.6);} [all~="zoom_7"], [all~="sub_zoom_7"] > *{transform: scale(0.7);} [all~="zoom_8"], [all~="sub_zoom_8"] > *{transform: scale(0.8);} [all~="zoom_9"], [all~="sub_zoom_9"] > *{transform: scale(0.9);}