1$base: ( 2 font-family: (-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif), 3 font-family-code: (Menlo, Monaco, Consolas, Andale Mono, lucida console, Courier New, monospace), 4 5 font-size-root: 16px, 6 font-size-root-sm: 14px, 7 8 font-size-xl: 1.5rem, 9 font-size-lg: 1.25rem, 10 font-size: 1rem, 11 font-size-sm: .85rem, 12 font-size-xs: .7rem, 13 14 font-size-h1-xl: 3.5rem, 15 font-size-h2-xl: 2.5rem, 16 font-size-h3-xl: 2rem, 17 font-size-h4-xl: 1.75rem, 18 font-size-h5-xl: 1.5rem, 19 font-size-h6-xl: 1.5rem, 20 21 font-size-h1-lg: 3rem, 22 font-size-h2-lg: 2rem, 23 font-size-h3-lg: 1.75rem, 24 font-size-h4-lg: 1.5rem, 25 font-size-h5-lg: 1.25rem, 26 font-size-h6-lg: 1.25rem, 27 28 font-size-h1: 2.5rem, 29 font-size-h2: 1.9rem, 30 font-size-h3: 1.5rem, 31 font-size-h4: 1.2rem, 32 font-size-h5: 1rem, 33 font-size-h6: 1rem, 34 35 font-size-h1-sm: 2rem, 36 font-size-h2-sm: 1.5rem, 37 font-size-h3-sm: 1.35rem, 38 font-size-h4-sm: 1.15rem, 39 font-size-h5-sm: 1rem, 40 font-size-h6-sm: 1rem, 41 42 font-size-h1-xs: 1.05rem, 43 font-size-h2-xs: 1rem, 44 font-size-h3-xs: .95rem, 45 font-size-h4-xs: .9rem, 46 font-size-h5-xs: .85rem, 47 font-size-h6-xs: .85rem, 48 49 font-weight: 400, 50 font-weight-bold: 700, 51 52 line-height-xl: 2, 53 line-height-lg: 1.8, 54 line-height: 1.6, 55 line-height-sm: 1.4, 56 line-height-xs: 1.2, 57 58 spacer: 1rem, 59 60 border-radius-lg: .8rem, 61 border-radius: .4rem, 62 border-radius-sm: .2rem 63); 64 65$spacers: ( 66 0: 0, 67 1: map-get($base, spacer) * .25, 68 2: map-get($base, spacer) * .5, 69 3: map-get($base, spacer), 70 4: map-get($base, spacer) * 1.5, 71 5: map-get($base, spacer) * 3 72); 73 74$z-indexes: ( 75 actions: 996, 76 mask: 997, 77 sidebar: 998, 78 modal: 999 79); 80 81$layout: ( 82 header-height: 5rem, 83 header-height-sm: 3rem, 84 content-max-width: 950px, 85 sidebar-width: 250px, 86 sidebar-header-height: 3rem, 87 aside-width: 220px 88); 89 90// sm md lg 91// | ------ | ------ | ------ | 92// 0 500 1024 - 93 94$responsive: ( 95 sm: 0, 96 md: 500px, 97 lg: 1024px 98); 99 100$animation: ( 101 duration: .4s, 102 duration-sm: .2s, 103 timing-function: ease-in-out 104); 105 106$clickable: ( 107 transition: all .2s ease-in-out 108); 109 110$button-height-xl: 2.8rem; 111$button-height-lg: 2.3rem; 112$button-height: 1.9rem; 113$button-height-sm: 1.5rem; 114$button-height-xs: 1.2rem; 115 116$button: ( 117 padding-y-xl: ($button-height-xl - map-get($base, font-size-xl)) / 2, 118 padding-x-xl: $button-height-xl / 3, 119 padding-y-lg: ($button-height-lg - map-get($base, font-size-lg)) / 2, 120 padding-x-lg: $button-height-lg / 3, 121 padding-y: ($button-height - map-get($base, font-size)) / 2, 122 padding-x: $button-height / 3, 123 padding-y-sm: ($button-height-sm - map-get($base, font-size-sm)) / 2, 124 padding-x-sm: $button-height-sm / 3, 125 padding-y-xs: ($button-height-xs - map-get($base, font-size-xs)) / 2, 126 padding-x-xs: $button-height-xs / 3, 127 128 pill-radius: 6rem, 129 130 circle-diameter-xl: $button-height-xl, 131 circle-diameter-lg: $button-height-lg, 132 circle-diameter: $button-height, 133 circle-diameter-sm: $button-height-sm, 134 circle-diameter-xs: $button-height-xs, 135 136 font-weight: map-get($base, font-weight-bold) 137); 138 139$image: ( 140 width-xl: 20em, 141 width-lg: 16rem, 142 width: 12rem, 143 width-sm: 8rem, 144 width-xs: 4rem 145); 146 147$menu: ( 148 horizontal-spacer: 1, 149 horizontal-item-vertical-spacer: 1 150);