MDL-66999 theme_boost: @extend replace .col-xs-*

Remove legacy col-xs-* classes. They are changed in upstream
Bootstrap 4 stable with just col-*.

diff --git a/admin/tool/dataprivacy/templates/component_status.mustache b/admin/tool/dataprivacy/templates/component_status.mustache
index 9a1c6ad..8d2bf1b 100644 (file)
--- a/admin/tool/dataprivacy/templates/component_status.mustache
+++ b/admin/tool/dataprivacy/templates/component_status.mustache
@@ -75,7 +75,7 @@
                 <hr />
                 <div class="p-l-3">
                     <dl class="row">
-                        <dt class="col-xs-3">
+                        <dt class="col-3">
                             {{#link}}
                                 <a href="#{{name}}"><strong style="word-wrap:break-word">{{name}}</strong></a>
                             {{/link}}
@@ -84,13 +84,13 @@
                             {{/link}}
                             <div class="small text-muted" style="word-wrap:break-word">{{type}}</div>
                         </dt>
-                        <dd class="col-xs-9">{{summary}}</dd>
+                        <dd class="col-9">{{summary}}</dd>
                     </dl>
                     <dl>
                         {{#fields}}
                         <div class="row">
-                            <dt class="col-xs-3 font-weight-normal" style="word-wrap:break-word">{{field_name}}</dt>
-                            <dd class="col-xs-9">{{field_summary}}</dd>
+                            <dt class="col-3 font-weight-normal" style="word-wrap:break-word">{{field_name}}</dt>
+                            <dd class="col-9">{{field_summary}}</dd>
                         </div>
                         {{/fields}}
                     </dl>
@@ -100,7 +100,7 @@
                 <hr />
                 <div class="p-l-3">
                     <div class="row">
-                        <div class="col-xs-12">
+                        <div class="col-12">
                             {{nullprovider}}
                         </div>
                     </div>

diff --git a/calendar/templates/event_details.mustache b/calendar/templates/event_details.mustache
index 1a1516f..9f92043 100644 (file)
--- a/calendar/templates/event_details.mustache
+++ b/calendar/templates/event_details.mustache
@@ -56,60 +56,60 @@
     }
 }}
 <div class="row">
-    <div class="col-xs-1">{{#pix}} i/calendareventtime, core, {{#str}} when, core_calendar {{/str}} {{/pix}}</div>
-    <div class="col-xs-11">{{{formattedtime}}}</div>
+    <div class="col-1">{{#pix}} i/calendareventtime, core, {{#str}} when, core_calendar {{/str}} {{/pix}}</div>
+    <div class="col-11">{{{formattedtime}}}</div>
 </div>
 {{#normalisedeventtypetext}}
     <div class="row mt-1">
-        <div class="col-xs-1">{{#pix}} i/calendar, core, {{#str}} eventtype, core_calendar {{/str}} {{/pix}}</div>
-        <div class="col-xs-11">{{normalisedeventtypetext}}</div>
+        <div class="col-1">{{#pix}} i/calendar, core, {{#str}} eventtype, core_calendar {{/str}} {{/pix}}</div>
+        <div class="col-11">{{normalisedeventtypetext}}</div>
     </div>
 {{/normalisedeventtypetext}}
 {{#description}}
     <div class="row mt-1">
-        <div class="col-xs-1">{{#pix}} i/calendareventdescription, core, {{#str}} description {{/str}} {{/pix}}</div>
-        <div class="description-content col-xs-11">{{{.}}}</div>
+        <div class="col-1">{{#pix}} i/calendareventdescription, core, {{#str}} description {{/str}} {{/pix}}</div>
+        <div class="description-content col-11">{{{.}}}</div>
     </div>
 {{/description}}
 {{#location}}
     <div class="row mt-1">
-        <div class="col-xs-1">{{#pix}} i/location, core, {{#str}} location {{/str}} {{/pix}}</div>
-        <div class="location-content col-xs-11">{{{.}}}</div>
+        <div class="col-1">{{#pix}} i/location, core, {{#str}} location {{/str}} {{/pix}}</div>
+        <div class="location-content col-11">{{{.}}}</div>
     </div>
 {{/location}}
 {{#isactionevent}}
     <div class="row mt-1">
-        <div class="col-xs-1">{{#pix}} i/courseevent, core, {{#str}} course {{/str}} {{/pix}}</div>
-        <div class="col-xs-11"><a href="{{course.viewurl}}">{{{course.fullname}}}</a></div>
+        <div class="col-1">{{#pix}} i/courseevent, core, {{#str}} course {{/str}} {{/pix}}</div>
+        <div class="col-11"><a href="{{course.viewurl}}">{{{course.fullname}}}</a></div>
     </div>
 {{/isactionevent}}
 {{#iscategoryevent}}
     <div class="row mt-1">
-        <div class="col-xs-1">{{#pix}} i/categoryevent, core, {{#str}} category {{/str}} {{/pix}}</div>
-        <div class="col-xs-11">{{{category.nestedname}}}</div>
+        <div class="col-1">{{#pix}} i/categoryevent, core, {{#str}} category {{/str}} {{/pix}}</div>
+        <div class="col-11">{{{category.nestedname}}}</div>
     </div>
 {{/iscategoryevent}}
 {{#iscourseevent}}
     <div class="row mt-1">
-        <div class="col-xs-1">{{#pix}} i/courseevent, core, {{#str}} course {{/str}} {{/pix}}</div>
-        <div class="col-xs-11"><a href="{{url}}">{{{course.fullname}}}</a></div>
+        <div class="col-1">{{#pix}} i/courseevent, core, {{#str}} course {{/str}} {{/pix}}</div>
+        <div class="col-11"><a href="{{url}}">{{{course.fullname}}}</a></div>
     </div>
 {{/iscourseevent}}
 {{#groupname}}
     <div class="row mt-1">
-        <div class="col-xs-1">{{#pix}} i/courseevent, core, {{#str}} course {{/str}} {{/pix}}</div>
-        <div class="col-xs-11"><a href="{{url}}">{{{course.fullname}}}</a></div>
+        <div class="col-1">{{#pix}} i/courseevent, core, {{#str}} course {{/str}} {{/pix}}</div>
+        <div class="col-11"><a href="{{url}}">{{{course.fullname}}}</a></div>
     </div>
     <div class="row mt-1">
-        <div class="col-xs-1">{{#pix}} i/groupevent, core, {{#str}} group {{/str}} {{/pix}}</div>
-        <div class="col-xs-11">{{{groupname}}}</div>
+        <div class="col-1">{{#pix}} i/groupevent, core, {{#str}} group {{/str}} {{/pix}}</div>
+        <div class="col-11">{{{groupname}}}</div>
     </div>
 {{/groupname}}
 {{#subscription}}
     {{#displayeventsource}}
         <div class="row mt-1">
-            <div class="col-xs-1">{{#pix}} i/rss, core, {{#str}} eventsource, core_calendar {{/str}} {{/pix}}</div>
-            <div class="col-xs-11">
+            <div class="col-1">{{#pix}} i/rss, core, {{#str}} eventsource, core_calendar {{/str}} {{/pix}}</div>
+            <div class="col-11">
                 {{#subscriptionurl}}
                     <p><a href="{{subscriptionurl}}">{{#str}}subscriptionsource, core_calendar, {{{subscriptionname}}}{{/str}}</a></p>
                 {{/subscriptionurl}}

diff --git a/course/templates/activityinstance.mustache b/course/templates/activityinstance.mustache
index 906e6dc..3b51f67 100644 (file)
--- a/course/templates/activityinstance.mustache
+++ b/course/templates/activityinstance.mustache
@@ -34,7 +34,7 @@
 }}
 {{#activities}}
 <div class="row mb-1 row-fluid">
-    <div class="activityinstance col-xs-6">
+    <div class="activityinstance col-6">
         <div class="mod-indent-outer"></div>
         <div>
             {{#canmanage}}
@@ -47,7 +47,7 @@
             </a>
         </div>
     </div>
-    <div class="activity-completionstatus col-xs-6" id="completionstatus_{{cmid}}">
+    <div class="activity-completionstatus col-6" id="completionstatus_{{cmid}}">
         <div class="col-sm-1  p-l-0">
             {{#completionstatus.icon}}
                 {{{completionstatus.icon}}}

diff --git a/course/templates/bulkactivitycompletion.mustache b/course/templates/bulkactivitycompletion.mustache
index 39c010b..4a28026 100644 (file)
--- a/course/templates/bulkactivitycompletion.mustache
+++ b/course/templates/bulkactivitycompletion.mustache
@@ -49,11 +49,11 @@
         </div>
     </div>
     <div class="row mb-1">
-        <div class="col-xs-6">
+        <div class="col-6">
             <input type="checkbox" class="mastercheck mr-1" aria-label="{{#str}}checkall, completion{{/str}}">
             <label class="font-weight-bold">{{#str}}activitieslabel, core_completion{{/str}}</label>
         </div>
-        <div class="col-xs-6">
+        <div class="col-6">
             <label class="font-weight-bold">{{#str}}completion, core_completion{{/str}}</label>
             <span>{{{helpicon}}}</span>
         </div>

diff --git a/course/templates/defaultactivitycompletion.mustache b/course/templates/defaultactivitycompletion.mustache
index 6831a0b..dd2b39f 100644 (file)
--- a/course/templates/defaultactivitycompletion.mustache
+++ b/course/templates/defaultactivitycompletion.mustache
@@ -46,11 +46,11 @@
         </div>
     </div>
     <div class="row mb-1">
-        <div class="col-xs-6">
+        <div class="col-6">
             <input type="checkbox" class="mastercheck mr-1" aria-label="{{#str}}checkall, completion{{/str}}">
             <label class="font-weight-bold">{{#str}}activitieslabel, core_completion{{/str}}</label>
         </div>
-        <div class="col-xs-6">
+        <div class="col-6">
             <label class="font-weight-bold">{{#str}}completion, core_completion{{/str}}</label>
             <span>{{{helpicon}}}</span>
         </div>
@@ -61,13 +61,13 @@
             {{#canmanage}}
              <div class="mb-1">
                 <div class="row mb-1 row-fluid">
-                    <div class="col-xs-6">
+                    <div class="col-6">
                         <label class="accesshide" for="modtype_{{id}}">{{#str}}select, core_completion{{/str}} {{formattedname}}</label>
                         <input id="modtype_{{id}}" type="checkbox" class="mr-1" name="modids[]" value="{{id}}" aria-label="{{#str}}checkactivity, completion, {{{formattedname}}}{{/str}}">
                         <img class="iconlarge activityicon" src="{{icon}}" alt=" " role="presentation" />
                         <span>{{{formattedname}}}</span>
                     </div>
-                    <div class="activity-completionstatus col-xs-6">
+                    <div class="activity-completionstatus col-6">
                         <div class="col-sm-1 p-l-0">
                             {{#completionstatus.icon}}
                                 {{{completionstatus.icon}}}

diff --git a/lib/editor/atto/plugins/recordrtc/yui/build/moodle-atto_recordrtc-button/moodle-atto_recordrtc-button-debug.js b/lib/editor/atto/plugins/recordrtc/yui/build/moodle-atto_recordrtc-button/moodle-atto_recordrtc-button-debug.js
index 213b2f2..3f62f9d 100644 (file)
Binary files a/lib/editor/atto/plugins/recordrtc/yui/build/moodle-atto_recordrtc-button/moodle-atto_recordrtc-button-debug.js and b/lib/editor/atto/plugins/recordrtc/yui/build/moodle-atto_recordrtc-button/moodle-atto_recordrtc-button-debug.js differ

diff --git a/lib/editor/atto/plugins/recordrtc/yui/build/moodle-atto_recordrtc-button/moodle-atto_recordrtc-button-min.js b/lib/editor/atto/plugins/recordrtc/yui/build/moodle-atto_recordrtc-button/moodle-atto_recordrtc-button-min.js
index c5a0167..ba20c6a 100644 (file)
Binary files a/lib/editor/atto/plugins/recordrtc/yui/build/moodle-atto_recordrtc-button/moodle-atto_recordrtc-button-min.js and b/lib/editor/atto/plugins/recordrtc/yui/build/moodle-atto_recordrtc-button/moodle-atto_recordrtc-button-min.js differ

diff --git a/lib/editor/atto/plugins/recordrtc/yui/build/moodle-atto_recordrtc-button/moodle-atto_recordrtc-button.js b/lib/editor/atto/plugins/recordrtc/yui/build/moodle-atto_recordrtc-button/moodle-atto_recordrtc-button.js
index 213b2f2..3f62f9d 100644 (file)
Binary files a/lib/editor/atto/plugins/recordrtc/yui/build/moodle-atto_recordrtc-button/moodle-atto_recordrtc-button.js and b/lib/editor/atto/plugins/recordrtc/yui/build/moodle-atto_recordrtc-button/moodle-atto_recordrtc-button.js differ

diff --git a/lib/editor/atto/plugins/recordrtc/yui/src/button/js/button.js b/lib/editor/atto/plugins/recordrtc/yui/src/button/js/button.js
index 29ab713..3ffa677 100644 (file)
--- a/lib/editor/atto/plugins/recordrtc/yui/src/button/js/button.js
+++ b/lib/editor/atto/plugins/recordrtc/yui/src/button/js/button.js
@@ -215,7 +215,7 @@ Y.namespace('M.atto_recordrtc').Button = Y.Base.create('button', Y.M.editor_atto
     _createContent: function(type) {
         var isAudio = (type === 'audio'),
             bsRow = 'row',
-            bsCol = 'col-xs-',
+            bsCol = 'col-',
             bsAlDang = 'alert-danger',
             bsSsBtn = 'btn btn-lg btn-outline-danger btn-block';
 

diff --git a/message/templates/notification_preferences_component.mustache b/message/templates/notification_preferences_component.mustache
index 3dfb5d1..2d9381e 100644 (file)
--- a/message/templates/notification_preferences_component.mustache
+++ b/message/templates/notification_preferences_component.mustache
@@ -73,11 +73,11 @@
         <td class="align-bottom">
             <div class="container-fluid">
                 <div class="row-fluid">
-                    <div class="col-xs-6">
+                    <div class="col-6">
                         {{#str}} loggedin, message {{/str}}
                         {{#onlinehelphtml}}{{{.}}}{{/onlinehelphtml}}
                     </div>
-                    <div class="col-xs-6">
+                    <div class="col-6">
                         {{#str}} loggedoff, message {{/str}}
                         {{#offlinehelphtml}}{{{.}}}{{/offlinehelphtml}}
                     </div>

diff --git a/message/templates/notification_preferences_component_notification.mustache b/message/templates/notification_preferences_component_notification.mustache
index 77bcf27..7770700 100644 (file)
--- a/message/templates/notification_preferences_component_notification.mustache
+++ b/message/templates/notification_preferences_component_notification.mustache
@@ -67,7 +67,7 @@
                 <form>
                     <div class="container-fluid">
                         <div class="row-fluid">
-                            <div class="col-xs-6">
+                            <div class="col-6">
                                 {{#loggedin}}
                                     {{< core/hover_tooltip }}
                                         {{$anchor}}
@@ -92,7 +92,7 @@
                                     {{/ core/hover_tooltip }}
                                 {{/loggedin}}
                             </div>
-                            <div class="col-xs-6">
+                            <div class="col-6">
                                 {{#loggedoff}}
                                     {{< core/hover_tooltip }}
                                         {{$anchor}}

diff --git a/report/insights/templates/insight.mustache b/report/insights/templates/insight.mustache
index 6a96553..d0cb969 100644 (file)
--- a/report/insights/templates/insight.mustache
+++ b/report/insights/templates/insight.mustache
@@ -46,16 +46,16 @@
     }
 }}
 <tr data-prediction-id="{{predictionid}}" class="d-flex">
-    <td class="insight-checkbox-cell col-xs-1{{^bulkactions}} hidden{{/bulkactions}}">
+    <td class="insight-checkbox-cell col-1{{^bulkactions}} hidden{{/bulkactions}}">
         {{{toggleslave}}}
     </td>
-    <td class="col-xs-8">
+    <td class="col-8">
         {{#sampleimage}}
             {{{sampleimage}}}
         {{/sampleimage}}
         {{{sampledescription}}}
     </td>
-    <td class="col-xs-3{{^actions}} hidden{{/actions}}">
+    <td class="col-3{{^actions}} hidden{{/actions}}">
     {{#actions}}
         {{> core/action_menu}}
     {{/actions}}

diff --git a/report/insights/templates/insight_details.mustache b/report/insights/templates/insight_details.mustache
index fa75339..ecd91d5 100644 (file)
--- a/report/insights/templates/insight_details.mustache
+++ b/report/insights/templates/insight_details.mustache
@@ -108,9 +108,9 @@
         {{/showpredictionheading}}
         <thead>
             <tr class="d-flex">
-                <th scope="col" class="col-xs-1{{^bulkactions}} hidden{{/bulkactions}}">{{{hiddencheckboxtoggleall}}}</th>
-                <th scope="col" class="col-xs-8">{{#str}}description{{/str}}</th>
-                <th scope="col" class="col-xs-3{{^actions}} hidden{{/actions}}">{{#str}}actions{{/str}}</th>
+                <th scope="col" class="col-1{{^bulkactions}} hidden{{/bulkactions}}">{{{hiddencheckboxtoggleall}}}</th>
+                <th scope="col" class="col-8">{{#str}}description{{/str}}</th>
+                <th scope="col" class="col-3{{^actions}} hidden{{/actions}}">{{#str}}actions{{/str}}</th>
             </tr>
         </thead>
         <tbody>

diff --git a/theme/boost/scss/moodle/bs4alphacompat.scss b/theme/boost/scss/moodle/bs4alphacompat.scss
index 90e8c85..1bd88c4 100644 (file)
--- a/theme/boost/scss/moodle/bs4alphacompat.scss
+++ b/theme/boost/scss/moodle/bs4alphacompat.scss
@@ -215,13 +215,6 @@ $bs4aspacers: map-merge((
   }
 }
 
-// Adding compatibility for col-xs-* classes.
-@for $i from 1 through $grid-columns {
-  .col-xs-#{$i} {
-    @extend .col-#{$i};
-  }
-}
-
 input[disabled] {
     cursor: not-allowed;
 }

diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index 29457c8..826add7 100644 (file)
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -2814,7 +2814,7 @@ pre {
     padding-right: 0;
     padding-left: 0; }
 
-.col-1, .col-xs-1, .col-2, .col-xs-2, .col-3, .col-xs-3, .col-4, .col-xs-4, .col-5, .col-xs-5, .col-6, .col-xs-6, .col-7, .col-xs-7, .col-8, .col-xs-8, .col-9, .col-xs-9, .col-10, .col-xs-10, .col-11, .col-xs-11, .col-12, .col-xs-12, .col,
+.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col,
 .col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm,
 .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md,
 .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg,
@@ -2835,51 +2835,51 @@ pre {
   width: auto;
   max-width: 100%; }
 
-.col-1, .col-xs-1 {
+.col-1 {
   flex: 0 0 8.3333333333%;
   max-width: 8.3333333333%; }
 
-.col-2, .col-xs-2 {
+.col-2 {
   flex: 0 0 16.6666666667%;
   max-width: 16.6666666667%; }
 
-.col-3, .col-xs-3 {
+.col-3 {
   flex: 0 0 25%;
   max-width: 25%; }
 
-.col-4, .col-xs-4 {
+.col-4 {
   flex: 0 0 33.3333333333%;
   max-width: 33.3333333333%; }
 
-.col-5, .col-xs-5 {
+.col-5 {
   flex: 0 0 41.6666666667%;
   max-width: 41.6666666667%; }
 
-.col-6, .col-xs-6 {
+.col-6 {
   flex: 0 0 50%;
   max-width: 50%; }
 
-.col-7, .col-xs-7 {
+.col-7 {
   flex: 0 0 58.3333333333%;
   max-width: 58.3333333333%; }
 
-.col-8, .col-xs-8 {
+.col-8 {
   flex: 0 0 66.6666666667%;
   max-width: 66.6666666667%; }
 
-.col-9, .col-xs-9 {
+.col-9 {
   flex: 0 0 75%;
   max-width: 75%; }
 
-.col-10, .col-xs-10 {
+.col-10 {
   flex: 0 0 83.3333333333%;
   max-width: 83.3333333333%; }
 
-.col-11, .col-xs-11 {
+.col-11 {
   flex: 0 0 91.6666666667%;
   max-width: 91.6666666667%; }
 
-.col-12, .col-xs-12 {
+.col-12 {
   flex: 0 0 100%;
   max-width: 100%; }
 

diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index f7454f6..b4a3abc 100644 (file)
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -2816,7 +2816,7 @@ pre {
     padding-right: 0;
     padding-left: 0; }
 
-.col-1, .col-xs-1, .col-2, .col-xs-2, .col-3, .col-xs-3, .col-4, .col-xs-4, .col-5, .col-xs-5, .col-6, .col-xs-6, .col-7, .col-xs-7, .col-8, .col-xs-8, .col-9, .col-xs-9, .col-10, .col-xs-10, .col-11, .col-xs-11, .col-12, .col-xs-12, .col,
+.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col,
 .col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm,
 .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md,
 .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg,
@@ -2837,51 +2837,51 @@ pre {
   width: auto;
   max-width: 100%; }
 
-.col-1, .col-xs-1 {
+.col-1 {
   flex: 0 0 8.3333333333%;
   max-width: 8.3333333333%; }
 
-.col-2, .col-xs-2 {
+.col-2 {
   flex: 0 0 16.6666666667%;
   max-width: 16.6666666667%; }
 
-.col-3, .col-xs-3 {
+.col-3 {
   flex: 0 0 25%;
   max-width: 25%; }
 
-.col-4, .col-xs-4 {
+.col-4 {
   flex: 0 0 33.3333333333%;
   max-width: 33.3333333333%; }
 
-.col-5, .col-xs-5 {
+.col-5 {
   flex: 0 0 41.6666666667%;
   max-width: 41.6666666667%; }
 
-.col-6, .col-xs-6 {
+.col-6 {
   flex: 0 0 50%;
   max-width: 50%; }
 
-.col-7, .col-xs-7 {
+.col-7 {
   flex: 0 0 58.3333333333%;
   max-width: 58.3333333333%; }
 
-.col-8, .col-xs-8 {
+.col-8 {
   flex: 0 0 66.6666666667%;
   max-width: 66.6666666667%; }
 
-.col-9, .col-xs-9 {
+.col-9 {
   flex: 0 0 75%;
   max-width: 75%; }
 
-.col-10, .col-xs-10 {
+.col-10 {
   flex: 0 0 83.3333333333%;
   max-width: 83.3333333333%; }
 
-.col-11, .col-xs-11 {
+.col-11 {
   flex: 0 0 91.6666666667%;
   max-width: 91.6666666667%; }
 
-.col-12, .col-xs-12 {
+.col-12 {
   flex: 0 0 100%;
   max-width: 100%; }