From a79af33b4288d6787020a536a08ed176fd99cc8c Mon Sep 17 00:00:00 2001 From: cyril lopez Date: Fri, 21 Jul 2017 12:03:41 +0200 Subject: [PATCH] added reactstrap --- .../app/styles/libs/bootstrap/_animation.scss | 2 +- .../app/styles/libs/bootstrap/_modal.scss | 138 +++++++++--------- .../files/public/app/translations/fr.json | 5 +- 3 files changed, 74 insertions(+), 71 deletions(-) diff --git a/packages/strapi-admin/files/public/app/styles/libs/bootstrap/_animation.scss b/packages/strapi-admin/files/public/app/styles/libs/bootstrap/_animation.scss index edd7147e51..79d7576711 100755 --- a/packages/strapi-admin/files/public/app/styles/libs/bootstrap/_animation.scss +++ b/packages/strapi-admin/files/public/app/styles/libs/bootstrap/_animation.scss @@ -2,7 +2,7 @@ opacity: 0; transition: opacity .15s linear; - &.in { + &.in, &.show { opacity: 1; } } diff --git a/packages/strapi-admin/files/public/app/styles/libs/bootstrap/_modal.scss b/packages/strapi-admin/files/public/app/styles/libs/bootstrap/_modal.scss index 83a1335319..5e1a884bde 100755 --- a/packages/strapi-admin/files/public/app/styles/libs/bootstrap/_modal.scss +++ b/packages/strapi-admin/files/public/app/styles/libs/bootstrap/_modal.scss @@ -1,109 +1,116 @@ -// .modal-open - body class for killing the scroll -// .modal - container to scroll within -// .modal-dialog - positioning shell for the actual modal -// .modal-content - actual modal w/ bg and corners and shit - - -// Kill the scroll on the body .modal-open { overflow: hidden; } -// Container that the modal scrolls within .modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; - z-index: $zindex-modal; + z-index: 1050; display: none; overflow: hidden; - // Prevent Chrome on Windows from adding a focus outline. For details, see - // https://github.com/twbs/bootstrap/pull/10951. outline: 0; - -webkit-overflow-scrolling: touch; - - // When fading in the modal, animate it to slide down - &.fade .modal-dialog { - transition: transform .3s ease-out; - transform: translate(0, -25%); - } - &.in .modal-dialog { transform: translate(0, 0); } } + +.modal.fade .modal-dialog { + transition: -webkit-transform 0.3s ease-out; + transition: transform 0.3s ease-out; + transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out; + -webkit-transform: translate(0, -25%); + transform: translate(0, -25%); +} + +.modal.show .modal-dialog { + -webkit-transform: translate(0, 0); + transform: translate(0, 0); +} + .modal-open .modal { overflow-x: hidden; overflow-y: auto; } -// Shell div to position the modal with bottom padding .modal-dialog { position: relative; width: auto; - margin: $modal-dialog-margin; + margin: 10px; } -// Actual modal .modal-content { position: relative; - background-color: $modal-content-bg; + display: -ms-flexbox; + display: flex; + -ms-flex-direction: column; + flex-direction: column; + background-color: #fff; background-clip: padding-box; - border: $modal-content-border-width solid $modal-content-border-color; - @include border-radius($border-radius-lg); - @include box-shadow($modal-content-xs-box-shadow); - // Remove focus outline from opened modal + border: 1px solid rgba(0, 0, 0, 0.2); + border-radius: 0.3rem; outline: 0; } -// Modal background .modal-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; - z-index: $zindex-modal-bg; - background-color: $modal-backdrop-bg; - - // Fade for backdrop - &.fade { opacity: 0; } - &.in { opacity: $modal-backdrop-opacity; } + z-index: 1040; + background-color: #000; +} + +.modal-backdrop.fade { + opacity: 0; +} + +.modal-backdrop.show { + opacity: 0.5; } -// Modal header -// Top section of the modal w/ title and dismiss .modal-header { - padding: $modal-title-padding; - border-bottom: $modal-header-border-width solid $modal-header-border-color; - @include clearfix; -} -// Close icon -.modal-header .close { - margin-top: -2px; + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; + -ms-flex-pack: justify; + justify-content: space-between; + padding: 15px; + border-bottom: 1px solid #e9ecef; } -// Title text within header .modal-title { - margin: 0; - line-height: $modal-title-line-height; + margin-bottom: 0; + line-height: 1.5; } -// Modal body -// Where all modal content resides (sibling of .modal-header and .modal-footer) .modal-body { position: relative; - padding: $modal-inner-padding; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + padding: 15px; } -// Footer (for actions) .modal-footer { - padding: $modal-inner-padding; - text-align: right; // right align buttons - border-top: $modal-footer-border-width solid $modal-footer-border-color; - @include clearfix(); // clear it in case folks use .pull-* classes on buttons + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; + -ms-flex-pack: end; + justify-content: flex-end; + padding: 15px; + border-top: 1px solid #e9ecef; +} + +.modal-footer > :not(:first-child) { + margin-left: .25rem; +} + +.modal-footer > :not(:last-child) { + margin-right: .25rem; } -// Measure scrollbar width for padding body during modal show/hide .modal-scrollbar-measure { position: absolute; top: -9999px; @@ -112,21 +119,18 @@ overflow: scroll; } -// Scale up the modal -@include media-breakpoint-up(sm) { - // Automatically set modal's width for larger viewports +@media (min-width: 576px) { .modal-dialog { - max-width: $modal-md; - margin: $modal-dialog-sm-up-margin-y auto; + max-width: 500px; + margin: 30px auto; } - - .modal-content { - @include box-shadow($modal-content-sm-up-box-shadow); + .modal-sm { + max-width: 300px; } - - .modal-sm { max-width: $modal-sm; } } -@include media-breakpoint-up(lg) { - .modal-lg { max-width: $modal-lg; } +@media (min-width: 992px) { + .modal-lg { + max-width: 800px; + } } diff --git a/packages/strapi-admin/files/public/app/translations/fr.json b/packages/strapi-admin/files/public/app/translations/fr.json index 48b5e801c1..6799e05ab3 100644 --- a/packages/strapi-admin/files/public/app/translations/fr.json +++ b/packages/strapi-admin/files/public/app/translations/fr.json @@ -1,5 +1,4 @@ { "app.components.LeftMenuFooter.poweredBy": "Propulsé par", - "app.components.NotFoundPage.description": "Page introuvable", - "app.containers.ComingSoonPage.header": "Bientôt disponible." -} + "app.components.NotFoundPage.description": "Page introuvable" +} \ No newline at end of file