@comicrelief/component-library 8.44.2 → 8.44.3

package/dist/components/Atoms/Checkbox/Checkbox.test.js

@@ -35,6 +35,11 @@ it('renders correctly', () => {
       font-weight: bold;
     }
 
+    .c2 span {
+      font-size: inherit;
+      line-height: inherit;
+    }
+
     .c0 {
       display: -webkit-box;
       display: -webkit-flex;
@@ -136,6 +141,11 @@ it('renders correctly', () => {
       font-weight: bold;
     }
 
+    .c2 span {
+      font-size: inherit;
+      line-height: inherit;
+    }
+
     .c0 {
       display: -webkit-box;
       display: -webkit-flex;

package/dist/components/Atoms/ErrorText/__snapshots__/ErrorText.test.js.snap

@@ -19,6 +19,11 @@ exports[`renders correctly 1`] = `
   color: #E52630;
 }
 
+.c0 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c1 {
   display: inline-block;
   width: 100%;

package/dist/components/Atoms/Input/input.test.js

@@ -27,6 +27,11 @@ it('renders correctly', () => {
       line-height: 1.25rem;
     }
 
+    .c1 span {
+      font-size: inherit;
+      line-height: inherit;
+    }
+
     .c0 {
       width: 100%;
       position: relative;
@@ -194,6 +199,11 @@ it('renders with responsive max widths correctly', () => {
       line-height: 1.25rem;
     }
 
+    .c1 span {
+      font-size: inherit;
+      line-height: inherit;
+    }
+
     .c0 {
       width: 100%;
       position: relative;

package/dist/components/Atoms/RadioButton/RadioButton.test.js

@@ -37,6 +37,11 @@ it('renders correctly', () => {
       font-weight: bold;
     }
 
+    .c2 span {
+      font-size: inherit;
+      line-height: inherit;
+    }
+
     .c1 {
       background-color: #FFFFFF;
       z-index: 1;
@@ -147,6 +152,11 @@ it('renders correctly', () => {
       font-weight: bold;
     }
 
+    .c2 span {
+      font-size: inherit;
+      line-height: inherit;
+    }
+
     .c1 {
       background-color: #FFFFFF;
       z-index: 1;

package/dist/components/Atoms/Select/__snapshots__/Select.test.js.snap

@@ -13,6 +13,11 @@ exports[`renders correctly 1`] = `
   line-height: 1.25rem;
 }
 
+.c1 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c0 {
   width: 100%;
   position: relative;

package/dist/components/Atoms/Text/Text.js

@@ -19,7 +19,7 @@ const BaseText = exports.BaseText = _styledComponents.default.span.withConfig({
     as,
     theme
   } = _ref;
-  return as !== undefined && (0, _styledComponents.css)(["", " &{", ";", ";", ";", ";", ";", ";color:", ";", ";", ";", ";}"], (0, _fontHelper.default)(theme, as), _ref2 => {
+  return as !== undefined && (0, _styledComponents.css)(["", " &{", ";", ";", ";", ";", ";", ";color:", ";", ";", ";", ";span{font-size:inherit;line-height:inherit;}}"], (0, _fontHelper.default)(theme, as), _ref2 => {
     let {
       size
     } = _ref2;

package/dist/components/Atoms/Text/Text.md

@@ -8,32 +8,32 @@ import fontConfig from  '../../../theme/crTheme/fontConfig';
     // To be phased out: tags to use the prescribed family always
     family="Anton"
   >
-    <b style={{ width: "55px", display: "inline-block" }}>H1 </b>
-    <Text style={{ textTransform: "none" }} tag="span" size="s">
-      <b>family:</b> {fontConfig['h1'].family} -  
-      <b>mobileColor:</b> blue
-      <br/>
-      <b>font size (S / M / L breakpoints):</b> {fontConfig['h1'].small.fontSize} / {fontConfig['h1'].medium.fontSize} / {fontConfig['h1'].large.fontSize} 
-      <br/>
-      <b>line height (S / M / L breakpoints):</b> {fontConfig['h1'].small.lineHeight} / {fontConfig['h1'].medium.lineHeight} / {fontConfig['h1'].large.lineHeight}
-      
-    </Text>
+    <span style={{ width: "55px", display: "inline-block" }}>H1 </span>
   </Text>
-  
+  <Text style={{ textTransform: "none" }} tag="span" size="s">
+    <b>family:</b> {fontConfig['h1'].family} -  
+    <b>mobileColor:</b> blue
+    <br/>
+    <b>font size (S / M / L breakpoints):</b> {fontConfig['h1'].small.fontSize} / {fontConfig['h1'].medium.fontSize} / {fontConfig['h1'].large.fontSize} 
+    <br/>
+    <b>line height (S / M / L breakpoints):</b> {fontConfig['h1'].small.lineHeight} / {fontConfig['h1'].medium.lineHeight} / {fontConfig['h1'].large.lineHeight}
+  </Text>
+
+
   <Text
     tag="h2"
     mobileColor="green"
     family="Anton"
   >
-    <b style={{ width: "55px", display: "inline-block" }}>H2 </b>
-    <Text style={{ textTransform: "none" }} tag="span" size="s">
-      <b>family:</b> {fontConfig['h2'].family} - 
-      <b>mobileColor:</b> green
-      <br/>
-      <b>font size (S / M / L breakpoints):</b> {fontConfig['h2'].small.fontSize} / {fontConfig['h2'].medium.fontSize} / {fontConfig['h2'].large.fontSize} 
-      <br/>
-      <b>line height (S / M / L breakpoints):</b> {fontConfig['h2'].small.lineHeight} / {fontConfig['h2'].medium.lineHeight} / {fontConfig['h2'].large.lineHeight} 
-    </Text>
+    <span style={{ width: "55px", display: "inline-block" }}>H2 </span>
+  </Text>
+  <Text style={{ textTransform: "none" }} tag="span" size="s">
+    <b>family:</b> {fontConfig['h2'].family} - 
+    <b>mobileColor:</b> green
+    <br/>
+    <b>font size (S / M / L breakpoints):</b> {fontConfig['h2'].small.fontSize} / {fontConfig['h2'].medium.fontSize} / {fontConfig['h2'].large.fontSize} 
+    <br/>
+    <b>line height (S / M / L breakpoints):</b> {fontConfig['h2'].small.lineHeight} / {fontConfig['h2'].medium.lineHeight} / {fontConfig['h2'].large.lineHeight} 
   </Text>
 
   <Text
@@ -41,15 +41,15 @@ import fontConfig from  '../../../theme/crTheme/fontConfig';
     mobileColor="red"
     family="Montserrat"
   >
-    <b style={{ width: "55px", display: "inline-block" }}>H3 </b>
-    <Text style={{ textTransform: "none" }} tag="span">
-      <b>family:</b> {fontConfig['h3'].family} -  
-      <b>mobileColor:</b> red
-      <br/>
-      <b>font size (S / M / L breakpoints):</b> {fontConfig['h3'].small.fontSize} / {fontConfig['h3'].medium.fontSize} / {fontConfig['h3'].large.fontSize} 
-      <br/>
-      <b>line height (S / M / L breakpoints):</b> {fontConfig['h3'].small.lineHeight} / {fontConfig['h3'].medium.lineHeight} / {fontConfig['h3'].large.lineHeight} 
-    </Text>
+    <span style={{ width: "55px", display: "inline-block" }}>H3 </span>
+  </Text>
+  <Text style={{ textTransform: "none" }} tag="span" size="s">
+    <b>family:</b> {fontConfig['h3'].family} -  
+    <b>mobileColor:</b> red
+    <br/>
+    <b>font size (S / M / L breakpoints):</b> {fontConfig['h3'].small.fontSize} / {fontConfig['h3'].medium.fontSize} / {fontConfig['h3'].large.fontSize} 
+    <br/>
+    <b>line height (S / M / L breakpoints):</b> {fontConfig['h3'].small.lineHeight} / {fontConfig['h3'].medium.lineHeight} / {fontConfig['h3'].large.lineHeight} 
   </Text>
 
   <Text
@@ -58,61 +58,62 @@ import fontConfig from  '../../../theme/crTheme/fontConfig';
     weight="normal"
     // To be phased out: text to always be rendered as typed
     uppercase>
-    <b style={{ width: "55px", display: "inline-block" }}>H4 </b>
-    <Text style={{ textTransform: "none" }} tag="span">
-      <b>family:</b> {fontConfig['span'].family} -  
-      <br/>
-      <b>font size (S / M / L breakpoints):</b> {fontConfig['h4'].small.fontSize} / {fontConfig['h4'].medium.fontSize} / {fontConfig['h4'].large.fontSize} 
-      <br/>
-      <b>line height (S / M / L breakpoints):</b> {fontConfig['h4'].small.lineHeight} / {fontConfig['h4'].medium.lineHeight} / {fontConfig['h4'].large.lineHeight} 
-    </Text>
+    <span style={{ width: "55px", display: "inline-block" }}>H4 </span>
+  </Text>
+  <Text style={{ textTransform: "none" }} tag="span" size="s">
+    <b>family:</b> {fontConfig['span'].family} -  
+    <br/>
+    <b>font size (S / M / L breakpoints):</b> {fontConfig['h4'].small.fontSize} / {fontConfig['h4'].medium.fontSize} / {fontConfig['h4'].large.fontSize} 
+    <br/>
+    <b>line height (S / M / L breakpoints):</b> {fontConfig['h4'].small.lineHeight} / {fontConfig['h4'].medium.lineHeight} / {fontConfig['h4'].large.lineHeight} 
   </Text>
 
-  <Text tag="p" size="m">
+
+
+  <Text tag="p" size="m" style={{ marginTop: "2rem"}}>
     <span style={{ width: "55px", display: "inline-block" }}>Body</span>
-      <Text style={{ textTransform: "none" }} tag="span">
-      <b>family:</b> {fontConfig['p'].family} -  
-      <br/>
-      <b>font size (S / M / L breakpoints):</b> {fontConfig['p'].small.fontSize} / {fontConfig['p'].medium.fontSize} / {fontConfig['p'].large.fontSize} 
-      <br/>
-      <b>line height (S / M / L breakpoints):</b> {fontConfig['p'].small.lineHeight} / {fontConfig['p'].medium.lineHeight} / {fontConfig['p'].large.lineHeight} 
-      </Text>
-    </Text>
+  </Text>
+  <Text style={{ textTransform: "none" }} tag="span" size="s">
+    <b>family:</b> {fontConfig['p'].family} -  
+    <br/>
+    <b>font size (S / M / L breakpoints):</b> {fontConfig['p'].small.fontSize} / {fontConfig['p'].medium.fontSize} / {fontConfig['p'].large.fontSize} 
+    <br/>
+    <b>line height (S / M / L breakpoints):</b> {fontConfig['p'].small.lineHeight} / {fontConfig['p'].medium.lineHeight} / {fontConfig['p'].large.lineHeight} 
+  </Text>
 
-    <Text tag="p" style={{ marginTop: "55px", fontStyle: "italic"}}>
-      Tags to be phased out:
-    </Text>
+  <Text tag="p" style={{ marginTop: "55px", fontStyle: "italic"}}>
+    Tags to be phased out:
+  </Text>
 
-    <Text 
+  <Text 
     tag="h5"
     family="Anton"
     uppercase
     // To be phased-out
     weight="normal">
-    <b style={{ width: "55px", display: "inline-block" }}>H5 </b>
-    <Text style={{ textTransform: "none" }} tag="span">
-      <b>family:</b> {fontConfig['h5'].family} -  
-      <br/>
-      <b>font size (S / M / L breakpoints):</b> {fontConfig['h5'].small.fontSize} / {fontConfig['h5'].medium.fontSize} / {fontConfig['h5'].large.fontSize} 
-      <br/>
-      <b>line height (S / M / L breakpoints):</b> {fontConfig['h5'].small.lineHeight} / {fontConfig['h5'].medium.lineHeight} / {fontConfig['h5'].large.lineHeight} 
-    </Text>
+    <span style={{ width: "55px", display: "inline-block" }}>H5 </span>
+  </Text>
+  <Text style={{ textTransform: "none" }} tag="span" size="s">
+    <b>family:</b> {fontConfig['h5'].family} -  
+    <br/>
+    <b>font size (S / M / L breakpoints):</b> {fontConfig['h5'].small.fontSize} / {fontConfig['h5'].medium.fontSize} / {fontConfig['h5'].large.fontSize} 
+    <br/>
+    <b>line height (S / M / L breakpoints):</b> {fontConfig['h5'].small.lineHeight} / {fontConfig['h5'].medium.lineHeight} / {fontConfig['h5'].large.lineHeight} 
   </Text>
-  
 
   <Text tag="h6" 
     family="Anton" 
     uppercase
     weight="normal">
-    <b style={{ width: "55px", display: "inline-block" }}>H6</b>
-    <Text style={{ textTransform: "none" }} tag="span">
-      <b>family:</b> {fontConfig['h6'].family}
-      <br/>
-      <b>font size (S / M / L breakpoints):</b> {fontConfig['h6'].small.fontSize} / {fontConfig['h6'].medium.fontSize} / {fontConfig['h6'].large.fontSize} 
-      <br/>
-      <b>line height (S / M / L breakpoints):</b> {fontConfig['h6'].small.lineHeight} / {fontConfig['h6'].medium.lineHeight} / {fontConfig['h6'].large.lineHeight} 
-    </Text>
+    <span style={{ width: "55px", display: "inline-block" }}>H6</span>
+  </Text>
+  <Text style={{ textTransform: "none" }} tag="span" size="s">
+    <b>family:</b> {fontConfig['h6'].family}
+    <br/>
+    <b>font size (S / M / L breakpoints):</b> {fontConfig['h6'].small.fontSize} / {fontConfig['h6'].medium.fontSize} / {fontConfig['h6'].large.fontSize} 
+    <br/>
+    <b>line height (S / M / L breakpoints):</b> {fontConfig['h6'].small.lineHeight} / {fontConfig['h6'].medium.lineHeight} / {fontConfig['h6'].large.lineHeight} 
   </Text>
-  
+
 </div>
 ```

package/dist/components/Atoms/Text/__snapshots__/Text.test.js.snap

@@ -17,6 +17,11 @@ exports[`renders heavy heading correctly 1`] = `
   font-weight: 1000;
 }
 
+.c0 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 @media (min-width:740px) {
   .c0 {
     font-size: 1.25rem;
@@ -56,6 +61,11 @@ exports[`renders high heading correctly 1`] = `
   line-height: 5;
 }
 
+.c0 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 @media (min-width:740px) {
   .c0 {
     font-size: 1.25rem;
@@ -97,6 +107,11 @@ exports[`renders large heading correctly 1`] = `
   line-height: normal;
 }
 
+.c0 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 @media (min-width:740px) {
   .c0 {
     font-size: 1.25rem;
@@ -139,6 +154,11 @@ exports[`renders xl paragraph with Anton font correctly 1`] = `
   font-family: 'Anton',Impact,sans-serif;
 }
 
+.c0 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 @media (min-width:740px) {
   .c0 {
     font-size: 1rem;
@@ -181,6 +201,11 @@ exports[`renders xl yellow paragraph correctly 1`] = `
   color: #FFE400;
 }
 
+.c0 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 @media (min-width:740px) {
   .c0 {
     font-size: 1rem;

package/dist/components/Atoms/TextArea/TextArea.test.js

@@ -27,6 +27,11 @@ it('renders correctly', () => {
       line-height: 1.25rem;
     }
 
+    .c1 span {
+      font-size: inherit;
+      line-height: inherit;
+    }
+
     .c0 {
       width: 100%;
       position: relative;

package/dist/components/Atoms/TextInputWithDropdown/__snapshots__/TextInputWithDropdown.test.js.snap

@@ -13,6 +13,11 @@ exports[`renders correctly with no value and no options 1`] = `
   line-height: 1.25rem;
 }
 
+.c2 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c1 {
   width: 100%;
   position: relative;
@@ -182,6 +187,11 @@ exports[`renders correctly with value and no options 1`] = `
   line-height: 1.25rem;
 }
 
+.c2 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c1 {
   width: 100%;
   position: relative;
@@ -351,6 +361,11 @@ exports[`renders correctly with value and options 1`] = `
   line-height: 1.25rem;
 }
 
+.c2 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c1 {
   width: 100%;
   position: relative;

package/dist/components/Molecules/Accordion/__snapshots__/Accordion.test.js.snap

@@ -18,6 +18,11 @@ exports[`renders correctly 1`] = `
   line-height: normal;
 }
 
+.c2 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c6 {
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
   font-weight: 400;
@@ -35,6 +40,11 @@ exports[`renders correctly 1`] = `
   line-height: normal;
 }
 
+.c6 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c4 {
   -webkit-transform: rotate(180deg);
   -ms-transform: rotate(180deg);

package/dist/components/Molecules/ArticleTeaser/ArticleTeaser.test.js

@@ -37,6 +37,11 @@ it('renders article teaser correctly', () => {
       font-weight: bold;
     }
 
+    .c8 span {
+      font-size: inherit;
+      line-height: inherit;
+    }
+
     .c10 {
       font-family: 'Montserrat',Helvetica,Arial,sans-serif;
       font-weight: 700;
@@ -58,6 +63,11 @@ it('renders article teaser correctly', () => {
       text-transform: uppercase;
     }
 
+    .c10 span {
+      font-size: inherit;
+      line-height: inherit;
+    }
+
     .c4 {
       display: block;
       width: 100%;
@@ -330,6 +340,11 @@ it('renders press realese correctly', () => {
       font-weight: bold;
     }
 
+    .c8 span {
+      font-size: inherit;
+      line-height: inherit;
+    }
+
     .c10 {
       font-family: 'Montserrat',Helvetica,Arial,sans-serif;
       font-weight: 700;
@@ -351,6 +366,11 @@ it('renders press realese correctly', () => {
       text-transform: uppercase;
     }
 
+    .c10 span {
+      font-size: inherit;
+      line-height: inherit;
+    }
+
     .c4 {
       display: block;
       width: 80px;

package/dist/components/Molecules/Banner/__snapshots__/Banner.test.js.snap

@@ -19,6 +19,11 @@ exports[`renders correctly 1`] = `
   color: #FFFFFF;
 }
 
+.c2 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c0 {
   background: #48276E;
 }

package/dist/components/Molecules/Descriptor/Descriptor.test.js

@@ -35,6 +35,11 @@ it('renders article teaser correctly', () => {
       color: #222222;
     }
 
+    .c3 span {
+      font-size: inherit;
+      line-height: inherit;
+    }
+
     .c7 {
       font-family: 'Montserrat',Helvetica,Arial,sans-serif;
       font-weight: 700;
@@ -56,6 +61,11 @@ it('renders article teaser correctly', () => {
       text-transform: uppercase;
     }
 
+    .c7 span {
+      font-size: inherit;
+      line-height: inherit;
+    }
+
     .c10 {
       font-family: 'Montserrat',Helvetica,Arial,sans-serif;
       font-weight: 400;
@@ -76,6 +86,11 @@ it('renders article teaser correctly', () => {
       color: #222222;
     }
 
+    .c10 span {
+      font-size: inherit;
+      line-height: inherit;
+    }
+
     .c0 {
       position: relative;
       width: 100%;

package/dist/components/Molecules/InfoBanner/__snapshots__/InfoBanner.test.js.snap

@@ -19,6 +19,11 @@ exports[`renders correctly 1`] = `
   text-transform: uppercase;
 }
 
+.c2 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c3 {
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
   font-weight: 400;
@@ -36,6 +41,11 @@ exports[`renders correctly 1`] = `
   line-height: normal;
 }
 
+.c3 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c4 {
   position: relative;
   display: inline;

package/dist/components/Molecules/PartnerLink/PartnerLink.test.js

@@ -34,6 +34,11 @@ it('renders correctly', () => {
       color: #FFFFFF;
     }
 
+    .c4 span {
+      font-size: inherit;
+      line-height: inherit;
+    }
+
     .c2 {
       display: block;
       width: 100%;

package/dist/components/Molecules/Promo/Promo.test.js

@@ -24,7 +24,8 @@ it('renders Promo correctly', () => {
     weight: "normal"
   }, "Curabitur pretium tincidunt lacus"), /*#__PURE__*/_react.default.createElement(_Text.default, {
     tag: "p",
-    color: "white"
+    color: "white",
+    size: "s"
   }, "Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo, est eros bibendum elit, nec luctus magna sollicitudin."), /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_Link.default, {
     href: "/",
     type: "button",
@@ -49,7 +50,8 @@ it('renders Promo correctly end position', () => {
     weight: "normal"
   }, "Curabitur pretium tincidunt lacus"), /*#__PURE__*/_react.default.createElement(_Text.default, {
     tag: "p",
-    color: "white"
+    color: "white",
+    size: "s"
   }, "Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo, est eros bibendum elit, nec luctus magna sollicitudin."), /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_Link.default, {
     href: "/",
     type: "button",

package/dist/components/Molecules/Promo/__snapshots__/Promo.test.js.snap

@@ -24,6 +24,11 @@ exports[`renders Promo correctly 1`] = `
   line-height: 3rem;
 }
 
+.c7 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c8 {
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
   font-weight: 400;
@@ -37,9 +42,16 @@ exports[`renders Promo correctly 1`] = `
 }
 
 .c8 {
+  font-size: 1rem;
+  line-height: normal;
   color: #FFFFFF;
 }
 
+.c8 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c2 {
   display: block;
   width: 100%;
@@ -297,6 +309,7 @@ exports[`renders Promo correctly 1`] = `
         <p
           className="c8"
           color="white"
+          size="s"
         >
           Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo, est eros bibendum elit, nec luctus magna sollicitudin.
         </p>
@@ -341,6 +354,11 @@ exports[`renders Promo correctly end position 1`] = `
   line-height: 3rem;
 }
 
+.c7 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c8 {
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
   font-weight: 400;
@@ -354,9 +372,16 @@ exports[`renders Promo correctly end position 1`] = `
 }
 
 .c8 {
+  font-size: 1rem;
+  line-height: normal;
   color: #FFFFFF;
 }
 
+.c8 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c2 {
   display: block;
   width: 100%;
@@ -625,6 +650,7 @@ exports[`renders Promo correctly end position 1`] = `
         <p
           className="c8"
           color="white"
+          size="s"
         >
           Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo, est eros bibendum elit, nec luctus magna sollicitudin.
         </p>

package/dist/components/Molecules/SchoolLookup/__snapshots__/SchoolLookup.test.js.snap

@@ -13,6 +13,11 @@ exports[`renders correctly 1`] = `
   line-height: 1.25rem;
 }
 
+.c2 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .c1 {
   width: 100%;
   position: relative;