diff options
Diffstat (limited to 'src/.old/objects/_dialog.scss')
| -rw-r--r-- | src/.old/objects/_dialog.scss | 152 |
1 files changed, 0 insertions, 152 deletions
diff --git a/src/.old/objects/_dialog.scss b/src/.old/objects/_dialog.scss deleted file mode 100644 index 9333ce6..0000000 --- a/src/.old/objects/_dialog.scss +++ /dev/null | |||
| @@ -1,152 +0,0 @@ | |||
| 1 | @use 'iro-sass/src/index' as iro; | ||
| 2 | @use '../functions' as fn; | ||
| 3 | |||
| 4 | @include iro.props-namespace('dialog') { | ||
| 5 | @include iro.props-store(( | ||
| 6 | --dims: ( | ||
| 7 | --width-sm: iro.fn-px-to-rem(500px), | ||
| 8 | --width-md: iro.fn-px-to-rem(800px), | ||
| 9 | --width-lg: iro.fn-px-to-rem(1100px), | ||
| 10 | --rounding: 4px, | ||
| 11 | --border: 1px, | ||
| 12 | |||
| 13 | --header: ( | ||
| 14 | --pad-x: fn.global-dim(--size --75), | ||
| 15 | --pad-y: fn.global-dim(--size --75), | ||
| 16 | ), | ||
| 17 | |||
| 18 | --sidebar: ( | ||
| 19 | --pad-x: fn.global-dim(--size --75), | ||
| 20 | --pad-y: fn.global-dim(--size --75), | ||
| 21 | ), | ||
| 22 | |||
| 23 | --body: ( | ||
| 24 | --pad-x: fn.global-dim(--size --200), | ||
| 25 | --pad-y: fn.global-dim(--size --200), | ||
| 26 | ) | ||
| 27 | ), | ||
| 28 | ), 'dims'); | ||
| 29 | |||
| 30 | @include iro.props-store(( | ||
| 31 | --dims: ( | ||
| 32 | --pad-x: fn.global-dim(--size --300), | ||
| 33 | --pad-y: fn.global-dim(--size --300), | ||
| 34 | ), | ||
| 35 | ), 'md'); | ||
| 36 | |||
| 37 | @include iro.props-store(( | ||
| 38 | --colors: ( | ||
| 39 | --border: fn.global-color(--border --stable), | ||
| 40 | ), | ||
| 41 | ), 'colors'); | ||
| 42 | |||
| 43 | @include iro.bem-object(iro.props-namespace()) { | ||
| 44 | display: grid; | ||
| 45 | grid-template-rows: auto auto 1fr auto auto; | ||
| 46 | grid-template-columns: auto 1fr; | ||
| 47 | grid-template-areas: | ||
| 48 | 'sidebar-header header' | ||
| 49 | 'sidebar top' | ||
| 50 | 'sidebar body' | ||
| 51 | 'sidebar bottom' | ||
| 52 | 'sidebar footer'; | ||
| 53 | position: relative; | ||
| 54 | box-sizing: border-box; | ||
| 55 | flex: 0 0 auto; | ||
| 56 | width: 100%; | ||
| 57 | max-width: fn.dim(--width-md); | ||
| 58 | margin: 0 auto; | ||
| 59 | overflow: hidden; | ||
| 60 | border-radius: fn.dim(--rounding); | ||
| 61 | background-clip: padding-box; | ||
| 62 | background-color: fn.global-color(--bg); | ||
| 63 | color: fn.global-color(--fg); | ||
| 64 | |||
| 65 | @include iro.bem-modifier('sm') { | ||
| 66 | max-width: fn.dim(--width-sm); | ||
| 67 | } | ||
| 68 | |||
| 69 | @include iro.bem-modifier('lg') { | ||
| 70 | max-width: fn.dim(--width-lg); | ||
| 71 | } | ||
| 72 | |||
| 73 | @include iro.bem-elem('header') { | ||
| 74 | grid-area: sidebar-header / sidebar-header / header / header; | ||
| 75 | padding: fn.dim(--header --pad-y) fn.dim(--header --pad-x); | ||
| 76 | |||
| 77 | @include iro.bem-modifier('sidebar') { | ||
| 78 | grid-area: sidebar-header; | ||
| 79 | border-right: 1px solid fn.color(--border); | ||
| 80 | |||
| 81 | @include iro.bem-sibling-elem('header') { | ||
| 82 | grid-area: header; | ||
| 83 | } | ||
| 84 | } | ||
| 85 | } | ||
| 86 | |||
| 87 | @include iro.bem-elem('title') { | ||
| 88 | margin-top: 0; | ||
| 89 | padding-right: calc(fn.dim(--body --pad-x) - fn.dim(--header --pad-x)); | ||
| 90 | padding-left: calc(fn.dim(--body --pad-x) - fn.dim(--header --pad-x)); | ||
| 91 | } | ||
| 92 | |||
| 93 | @include iro.bem-elem('close-btn') { | ||
| 94 | margin-left: auto; | ||
| 95 | } | ||
| 96 | |||
| 97 | @include iro.bem-elem('sidebar') { | ||
| 98 | grid-area: sidebar; | ||
| 99 | padding: fn.dim(--sidebar --pad-y) fn.dim(--sidebar --pad-x); | ||
| 100 | overflow: auto; | ||
| 101 | border-right: 1px solid fn.color(--border); | ||
| 102 | } | ||
| 103 | |||
| 104 | @include iro.bem-elem('top') { | ||
| 105 | grid-area: top; | ||
| 106 | min-width: 0; | ||
| 107 | padding: fn.dim(--body --pad-y) fn.dim(--body --pad-x); | ||
| 108 | |||
| 109 | @include iro.bem-sibling-elem('body') { | ||
| 110 | padding-top: 0; | ||
| 111 | } | ||
| 112 | } | ||
| 113 | |||
| 114 | @include iro.bem-elem('bottom') { | ||
| 115 | grid-area: bottom; | ||
| 116 | min-width: 0; | ||
| 117 | padding: fn.dim(--body --pad-y) fn.dim(--body --pad-x); | ||
| 118 | |||
| 119 | @include iro.bem-sibling-elem('body') { | ||
| 120 | padding-bottom: 0; | ||
| 121 | } | ||
| 122 | } | ||
| 123 | |||
| 124 | @include iro.bem-elem('body') { | ||
| 125 | grid-area: body; | ||
| 126 | min-width: 0; | ||
| 127 | min-height: 0; | ||
| 128 | padding: fn.dim(--body --pad-y) fn.dim(--body --pad-x); | ||
| 129 | } | ||
| 130 | |||
| 131 | @include iro.bem-elem('footer') { | ||
| 132 | grid-area: footer; | ||
| 133 | justify-content: flex-end; | ||
| 134 | padding: fn.dim(--body --pad-y) fn.dim(--body --pad-x); | ||
| 135 | } | ||
| 136 | |||
| 137 | @include iro.bem-modifier('scrollable') { | ||
| 138 | flex-shrink: 1; | ||
| 139 | |||
| 140 | @include iro.bem-elem('body') { | ||
| 141 | overflow: auto; | ||
| 142 | scrollbar-color: fn.global-color(--obj-lo) transparent; | ||
| 143 | } | ||
| 144 | } | ||
| 145 | |||
| 146 | @include iro.bem-modifier('flat') { | ||
| 147 | @include iro.bem-elem('body') { | ||
| 148 | padding-top: 0; | ||
| 149 | } | ||
| 150 | } | ||
| 151 | } | ||
| 152 | } | ||
