diff --git a/static/css/sass/_banner.scss b/static/css/sass/_banner.scss index 8b5f8d42e36d1b4f7d7239bcb6f55aabef50fadd..92ac7262fe7fd69b1c8abb420e3a49bb096cfeac 100644 --- a/static/css/sass/_banner.scss +++ b/static/css/sass/_banner.scss @@ -32,10 +32,10 @@ $banner-index-marker-height: 2px; #banner-wrapper { position: relative; z-index: 5; - display: flex; - flex-direction: column; - justify-content: space-between; // Main axis alignment. - align-items: center; // Cross axis alignment. + @include display-flex; + @include flex-direction(column); + @include justify-content(space-between); // Main axis alignment. + @include align-items(center); // Cross axis alignment. } .banner-image { @@ -62,24 +62,24 @@ $banner-index-marker-height: 2px; #banner-text { position: absolute; z-index: 6; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; + @include display-flex; + @include flex-direction(column); + @include justify-content(center); + @include align-items(center); } #banner-index-list { position: absolute; bottom: 0; left: 0; - display: flex; + @include display-flex; width: 100%; } #banner-index-list li { display: inline-block; height: $banner-index-marker-height; - flex-grow: 1; + @include flex-grow(1); background-color: $color-nav-fg; } @@ -165,8 +165,8 @@ $banner-index-marker-height: 2px; position: absolute; top: 105px; left: 0; - display: flex; - justify-content: space-between; + @include display-flex; + @include justify-content(space-between); } .arrow-container { diff --git a/static/css/sass/_body.scss b/static/css/sass/_body.scss index 18faa061bd8c236f9d1ecee79a0646890668ed5b..f7275418f8e0f254aa8cf23afd65d0be079d1ab2 100644 --- a/static/css/sass/_body.scss +++ b/static/css/sass/_body.scss @@ -40,8 +40,8 @@ body { z-index: 1; // Set site to span minimum of full screen height. - display: flex; - flex-direction: column; + @include display-flex; + @include flex-direction(column); min-height: 100vh; } @@ -50,8 +50,8 @@ body { z-index: 10; // Force bodywrapper to take up vertical space, if there is any. - display: flex; - flex-grow: 1; + @include display-flex; + @include flex-grow(1); } main { diff --git a/static/css/sass/_content_draws.scss b/static/css/sass/_content_draws.scss index 60f3f5a75ee9e9f7f09575880eac5ffdccef02b6..0e35e5a2e1ae542294fc158e7a6fa4253cc01405 100644 --- a/static/css/sass/_content_draws.scss +++ b/static/css/sass/_content_draws.scss @@ -40,25 +40,25 @@ $border-color: #aaa; #draws-page { .round-container { - display: flex; - flex-direction: row; + @include display-flex; + @include flex-direction(row); } .round { - display: flex; - flex-direction: column; + @include display-flex; + @include flex-direction(column); .spacer { - flex-grow: 1; + @include flex-grow(1); } .spacer:first-child, .spacer:last-child { - flex-grow: .5; + @include flex-grow(.5); } .game-spacer { - flex-grow: 1; + @include flex-grow(1); } } @@ -202,7 +202,7 @@ $border-color: #aaa; } .round { - justify-content: center; + @include justify-content(center); } } diff --git a/static/css/sass/_content_frontPage.scss b/static/css/sass/_content_frontPage.scss index 0349f405db31b3eaae765ac1b369d2ab621c5254..134d274dfb770d3a3076c1cbb58cbc6052c03991 100644 --- a/static/css/sass/_content_frontPage.scss +++ b/static/css/sass/_content_frontPage.scss @@ -23,9 +23,9 @@ } .days-until-container { - display: flex; - flex-direction: column; - justify-content: center; + @include display-flex; + @include flex-direction(column); + @include justify-content(center); border: 1px solid #CCC; border-radius: 10px; max-width: 172px; @@ -68,14 +68,14 @@ //************************************************** #front-page-left-center-doc { - flex-grow: 1; + @include flex-grow(1); } #front-page-left-center { - display: flex; + @include display-flex; @media (max-width: $tablet-max) { - flex-wrap: wrap; + @include flex-wrap(wrap); } @media (max-width: $phone-max) { @@ -84,23 +84,23 @@ } #front-page-columns { - display: flex; // Display as flex. - justify-content: center; // Main axis alignment. + @include display-flex; // Display as flex. + @include justify-content(center); // Main axis alignment. @media (max-width: $tablet-max) { - flex-wrap: wrap; + @include flex-wrap(wrap); display: block; } } #front-page-left { text-align: center; - /*display: flex; // Display as flex. - align-items: center; // Cross axis alignment. - flex-direction: column; */ + /*@include display-flex; // Display as flex. + @include align-items(center); // Cross axis alignment. + @include flex-direction(column); */ @media (max-width: $tablet-max) { - order: 1; + @include order(1); } @media (max-width: $phone-max) { @@ -111,21 +111,21 @@ } #front-page-center { - display: flex; // Display as flex. - /*justify-content: center;*/// Main axis alignment. - flex-grow: 1; + @include display-flex; // Display as flex. + /*@include justify-content(center);*/// Main axis alignment. + @include flex-grow(1); @media (max-width: $tablet-max) { - order: 3; + @include order(3); } } #front-page-right { - /*display: flex; // Display as flex. - justify-content: center; // Main axis alignment.*/ + /*@include display-flex; // Display as flex. + @include justify-content(center); // Main axis alignment.*/ @media (max-width: $tablet-max) { - order: 2; + @include order(2); margin-left: auto; margin-right: auto; } diff --git a/static/css/sass/_content_generics.scss b/static/css/sass/_content_generics.scss index cf05b2ed71db836b9d9a50534bf2c63948ac66ca..d97949d11a49f0a14f843daf55534ceceafad266 100644 --- a/static/css/sass/_content_generics.scss +++ b/static/css/sass/_content_generics.scss @@ -45,16 +45,16 @@ //************************************************** .form-field-div { - display: flex; // Display as flex. - justify-content: center; // Main axis alignment. - align-items: center; // Cross axis alignment. - flex-direction: column; + @include display-flex; // Display as flex. + @include justify-content(center); // Main axis alignment. + @include align-items(center); // Cross axis alignment. + @include flex-direction(column); } .form-field-label, .form-field-singleline, .form-field-label-singleline { - align-self: flex-start; + @include align-self(flex-start); } //************************************************** diff --git a/static/css/sass/_content_news.scss b/static/css/sass/_content_news.scss index e535f341f73392f2cd66b7fa7b14f9b3ae255a6c..331009f759cfc4e32b4ceffb1de4da9c75b9ea32 100644 --- a/static/css/sass/_content_news.scss +++ b/static/css/sass/_content_news.scss @@ -34,39 +34,39 @@ //************************* #article-main { - display: flex; + @include display-flex; @media (max-width: $phone-max) { - flex-wrap: wrap; + @include flex-wrap(wrap); } } #article-container { - flex-grow: 1; + @include flex-grow(1); } // Container for summary group. #news-summaries { - display: flex; - justify-content: center; - flex-wrap: wrap; - align-content: flex-start; + @include display-flex; + @include justify-content(center); + @include flex-wrap(wrap); + @include align-content(flex-start); } // Individual summaries, + spacer. .news-summary, .news-summary-spacer { position: relative; - display: flex; - flex-direction: column; + @include display-flex; + @include flex-direction(column); } .news-summary { .news-content { - flex-grow: 1; + @include flex-grow(1); } - + .placeholder { position: absolute; top: 0; @@ -123,28 +123,28 @@ //************************* #date-nav { - display: flex; + @include display-flex; } #date-nav { .stretch { - flex-grow: 1; + @include flex-grow(1); } a { display: block; - flex-basis: 0; + @include flex-basis(0); } .empty, a { - flex-grow: 1; + @include flex-grow(1); } .date-current { display: block; - align-self: center; + @include align-self(center); @media (max-width: $phone-mid) { display: none; @@ -154,7 +154,7 @@ .date-nav-current { display: none; - align-self: center; + @include align-self(center); @media (max-width: $phone-mid) { display: block; @@ -173,12 +173,12 @@ .potd-list { @media (max-width: $phone-max) { - display: flex; - flex-wrap: wrap; + @include display-flex; + @include flex-wrap(wrap); overflow: auto; - justify-content: center; + @include justify-content(center); } - + a { display: block; } @@ -189,49 +189,49 @@ #drilldown { - display: flex; - flex-grow: 1; + @include display-flex; + @include flex-grow(1); overflow: auto; overflow-y: auto !important; } - + #drilldown { - + .news-list { - justify-content: center; // Main axis alignment. - align-items: center; // Cross axis alignment. + @include justify-content(center); // Main axis alignment. + @include align-items(center); // Cross axis alignment. } - + .news-list { - + li { - display: flex; - flex-grow: 1; - + @include display-flex; + @include flex-grow(1); + ol { - flex-grow: 1; - + @include flex-grow(1); + li { - justify-content: center; // Main axis alignment. - align-items: center; // Cross axis alignment. - flex-direction: row; - flex-grow: 0; + @include justify-content(center); // Main axis alignment. + @include align-items(center); // Cross axis alignment. + @include flex-direction(row); + @include flex-grow(0); } - + a { - display: flex; - justify-content: center; // Main axis alignment. - align-items: center; // Cross axis alignment. + @include display-flex; + @include justify-content(center); // Main axis alignment. + @include align-items(center); // Cross axis alignment. } } } - - + + } - + li ol { - display: flex; - flex-wrap: wrap; + @include display-flex; + @include flex-wrap(wrap); } } } @@ -280,7 +280,7 @@ p { margin: 0; } - + .placeholder { width: 100%; height: 100%; @@ -408,47 +408,47 @@ } // Phone news nav section. -#drilldown { - +#drilldown { + .news-list { - + span { - + @media (max-width: $phone-max) { min-width: 50px; padding-top: 10px; padding-left: 5%; } } - + li { @media (max-width: $phone-max) { width: 95%; max-width: none; } } - + ol { - + li { @media (max-width: $phone-max) { width: auto; min-width: 15%; margin: 5px; } - + @media (max-width: $phone-mid) { min-width: 25%; } } - + a { @media (max-width: $phone-max) { width: 100%; height: 100%; } } - } + } } } @@ -533,7 +533,7 @@ } .news-summary { - + .placeholder { background-color: rgba(255, 255, 255, 0.1); } @@ -624,22 +624,22 @@ //************************* #drilldown { - + // Phone news nav section. @media (max-width: $phone-max) { - + .news-list { - + li { text-align: initial; } - + ol { - + a { font-size: 0.90em; } - } + } } } } diff --git a/static/css/sass/_content_players.scss b/static/css/sass/_content_players.scss index 5b1ec77711fde73dded5494d4c37bea7fd372af6..59081dec68a05381949c847cba7601ded7ecf392 100644 --- a/static/css/sass/_content_players.scss +++ b/static/css/sass/_content_players.scss @@ -28,15 +28,15 @@ #player-list { form { - flex-direction: row; - flex-wrap: wrap; + @include flex-direction(row); + @include flex-wrap(wrap); } .sort-div { - display: flex; // Display as flex. - justify-content: center; // Main axis alignment. - align-items: center; // Cross axis alignment. - flex-direction: column; + @include display-flex; // Display as flex. + @include justify-content(center); // Main axis alignment. + @include align-items(center); // Cross axis alignment. + @include flex-direction(column); } .sort-div { @@ -53,33 +53,33 @@ .player-div { ul { - display: flex; // Display as flex. - justify-content: center; // Main axis alignment. - align-items: center; // Cross axis alignment. - flex-wrap: wrap; + @include display-flex; // Display as flex. + @include justify-content(center); // Main axis alignment. + @include align-items(center); // Cross axis alignment. + @include flex-wrap(wrap); li:not(.seed) { - display: flex; // Display as flex. - justify-content: center; // Main axis alignment. - align-items: center; // Cross axis alignment. - flex-grow: 1; + @include display-flex; // Display as flex. + @include justify-content(center); // Main axis alignment. + @include align-items(center); // Cross axis alignment. + @include flex-grow(1); @media (max-width: $phone-max) { - flex-basis: 200px; + @include flex-basis(200px); } @media (min-width: $tablet-min) and (max-width: $tablet-max) { - flex-basis: 250px; + @include flex-basis(250px); } @media (min-width: $laptop-min) { - flex-basis: 300px; + @include flex-basis(300px); } a { - display: flex; // Display as flex. - justify-content: center; // Main axis alignment. - align-items: center; // Cross axis alignment. + @include display-flex; // Display as flex. + @include justify-content(center); // Main axis alignment. + @include align-items(center); // Cross axis alignment. } } } diff --git a/static/css/sass/_content_sponsors.scss b/static/css/sass/_content_sponsors.scss index 61e77ed87c0d41c9db4fc8d6753636d02c6ac501..915bea50012fb9b8fca5773b65571edd41456b90 100644 --- a/static/css/sass/_content_sponsors.scss +++ b/static/css/sass/_content_sponsors.scss @@ -26,45 +26,45 @@ //************************************************** .company-list { - display: flex; - flex-direction: column; - flex-wrap: wrap; + @include display-flex; + @include flex-direction(column); + @include flex-wrap(wrap); @media (min-width: $phone-mid) { - flex-direction: row; + @include flex-direction(row); } } .company-list { li { - display: flex; // Display as flex. - justify-content: center; // Main axis alignment. - align-items: center; // Cross axis alignment. - flex-grow: 1; - flex-basis: 100px; + @include display-flex; // Display as flex. + @include justify-content(center); // Main axis alignment. + @include align-items(center); // Cross axis alignment. + @include flex-grow(1); + @include flex-basis(100px); @media (min-width: $laptop-min) { - flex-basis: 150px; + @include flex-basis(150px); } } a { - display: flex; // Display as flex. - justify-content: center; // Main axis alignment. - align-items: center; // Cross axis alignment. + @include display-flex; // Display as flex. + @include justify-content(center); // Main axis alignment. + @include align-items(center); // Cross axis alignment. } img { - display: flex; // Display as flex. - justify-content: center; // Main axis alignment. - align-items: center; // Cross axis alignment. + @include display-flex; // Display as flex. + @include justify-content(center); // Main axis alignment. + @include align-items(center); // Cross axis alignment. } p { - display: flex; // Display as flex. - justify-content: center; // Main axis alignment. - align-items: center; // Cross axis alignment. + @include display-flex; // Display as flex. + @include justify-content(center); // Main axis alignment. + @include align-items(center); // Cross axis alignment. } } diff --git a/static/css/sass/_footer.scss b/static/css/sass/_footer.scss index 798bcad82479bb5ee066a5989cdc1fd9a6e21e1d..8b3169f32e413a2b428544f13391c5259ce257c2 100644 --- a/static/css/sass/_footer.scss +++ b/static/css/sass/_footer.scss @@ -31,36 +31,36 @@ footer { position: relative; z-index: 30; - display: flex; // Display as flex. - justify-content: center; // Main axis alignment. - align-items: center; // Cross axis alignment. - flex-direction: column; + @include display-flex; // Display as flex. + @include justify-content(center); // Main axis alignment. + @include align-items(center); // Cross axis alignment. + @include flex-direction(column); } footer { - + .link-div { position: relative; - display: flex; + @include display-flex; z-index: 31; - justify-content: space-between; // Main axis alignment. - align-items: center; // Cross axis alignment. + @include justify-content(space-between); // Main axis alignment. + @include align-items(center); // Cross axis alignment. } - + .sitemap-toggle { z-index: 32; - display: flex; // Display as flex. - justify-content: center; // Main axis alignment. - align-items: center; // Cross axis alignment. + @include display-flex; // Display as flex. + @include justify-content(center); // Main axis alignment. + @include align-items(center); // Cross axis alignment. } - + .sitemap-toggle { - + a { z-index: 33; - display: flex; // Display as flex. - justify-content: center; // Main axis alignment. - align-items: center; // Cross axis alignment. + @include display-flex; // Display as flex. + @include justify-content(center); // Main axis alignment. + @include align-items(center); // Cross axis alignment. } } } @@ -74,39 +74,39 @@ footer { //************************************************** footer { - + .social-media { z-index: 32; - display: flex; // Display as flex. - justify-content: center; // Main axis alignment. - align-items: center; // Cross axis alignment. + @include display-flex; // Display as flex. + @include justify-content(center); // Main axis alignment. + @include align-items(center); // Cross axis alignment. } - + .social-media { - + li { z-index: 33; - display: flex; // Display as flex. - justify-content: center; // Main axis alignment. - align-items: center; // Cross axis alignment. + @include display-flex; // Display as flex. + @include justify-content(center); // Main axis alignment. + @include align-items(center); // Cross axis alignment. } - + a { z-index: 33; - display: flex; // Display as flex. - justify-content: center; // Main axis alignment. - align-items: center; // Cross axis alignment. + @include display-flex; // Display as flex. + @include justify-content(center); // Main axis alignment. + @include align-items(center); // Cross axis alignment. } - + img { z-index: 33; - display: flex; // Display as flex. - justify-content: center; // Main axis alignment. - align-items: center; // Cross axis alignment. + @include display-flex; // Display as flex. + @include justify-content(center); // Main axis alignment. + @include align-items(center); // Cross axis alignment. } - + @media (max-width: $phone-mid) { - + p { display: none; } @@ -139,30 +139,30 @@ footer { } footer { - + .link-div { width: 90%; height: 100%; max-height: 50px; padding-top: 5px; } - + p { padding: 0; //padding-top: 5px; margin: 0; } - + .sitemap-toggle { height: 50px; min-width: 20%; } - + img { max-width: 30px; max-height: 30px; padding-right: 5px; - + @media (max-width: $phone-max) { max-width: 25px; } @@ -178,13 +178,13 @@ footer { //************************************************** footer { - + .social-media { min-width: 30%; } - + .social-media { - + li { height: 100%; min-height: 40px; @@ -192,7 +192,7 @@ footer { padding-right: 5%; padding-left: 5%; } - + @media (max-width: $phone-mid) { a { margin-right: 5%; @@ -228,12 +228,12 @@ footer { } footer { - + a, p { text-align: center; } - + a:link, a:visited { color: $color-white; @@ -289,7 +289,7 @@ footer { //************************************************** footer { - + .social-media { list-style-type: none; } diff --git a/static/css/sass/_genericClasses.scss b/static/css/sass/_genericClasses.scss index a3145500a0738bddfc3089c5af13cee5bd59c17e..b16e1e0fab3e122de47db9daa542fe768884b91a 100644 --- a/static/css/sass/_genericClasses.scss +++ b/static/css/sass/_genericClasses.scss @@ -11,6 +11,57 @@ // To be loaded with _variables.scss before any standard file. +@mixin display-flex { + display: -webkit-flex; + display: flex; +} + +@mixin flex-direction($value) { + -webkit-flex-direction: $value; + flex-direction: $value; +} + +@mixin flex-grow($value) { + -webkit-flex-grow: $value; + flex-grow: $value; +} + +@mixin order($value) { + -webkit-order: $value; + order: $value; +} + +@mixin justify-content($value) { + -webkit-justify-content: $value; + justify-content: $value; +} + +@mixin align-content($value) { + -webkit-align-content: $value; + align-content: $value; +} + +@mixin flex-wrap($value) { + -webkit-flex-wrap: $value; + flex-wrap: $value; +} + +@mixin align-items($value) { + -webkit-align-items: $value; + align-items: $value; +} + +@mixin flex-basis($value) { + -webkit-flex-basis: $value; + flex-basis: $value; +} + +@mixin align-self($value) { + -webkit-align-self: $value; + align-self: $value; +} + + //**************************************************************************************************** //**************************************************************************************************** //***************************************Reusable Generic Classes************************************* @@ -31,9 +82,9 @@ // Center flex content. %flex-center { - display: flex; // Display as flex. - justify-content: center; // Main axis alignment. - align-items: center; // Cross axis alignment. + @include display-flex; // Display as flex. + @include justify-content(center); // Main axis alignment. + @include align-items(center); // Cross axis alignment. } %nav-img-size { diff --git a/static/css/sass/_nav.scss b/static/css/sass/_nav.scss index e9071cdcaac72612407ce6ea44f1b7a11768c998..a9ed135c6de9a7cbf486d9d4365ce1b94047184d 100644 --- a/static/css/sass/_nav.scss +++ b/static/css/sass/_nav.scss @@ -85,73 +85,73 @@ nav { // Set to centered vert flexbox. #header-nav { position: relative; - display: flex; - flex-direction: column; + @include display-flex; + @include flex-direction(column); } #header-nav { .nav-wrapper { - order: 1; + @include order(1); } .nav-other { - display: flex; // Display as flex. - justify-content: center; // Main axis alignment. - align-items: center; // Cross axis alignment. - order: 0; + @include display-flex; // Display as flex. + @include justify-content(center); // Main axis alignment. + @include align-items(center); // Cross axis alignment. + @include order(0); } .nav-other { - + @media (max-width: $phone-mid) { - flex-wrap: wrap; - justify-content: space-around; + @include flex-wrap(wrap); + @include justify-content(space-around); } - + header { - display: flex; // Display as flex. - justify-content: center; // Main axis alignment. - align-items: center; // Cross axis alignment. - flex-grow: 9; - flex-basis: 10%; - order: 2; - + @include display-flex; // Display as flex. + @include justify-content(center); // Main axis alignment. + @include align-items(center); // Cross axis alignment. + @include flex-grow(9); + @include flex-basis(10%); + @include order(2); + @media (max-width: $phone-mid) { - order: 3; - flex-basis: 100%; + @include order(3); + @include flex-basis(100%); } } .nav-logo-wrapper { - order: 1; - + @include order(1); + @media (max-width: $phone-mid) { - order: 1; + @include order(1); } } .nav-form-wrapper { display: none; // temporarily hide. - flex-grow: 1; - flex-basis: 10%; - order: 3; + @include flex-grow(1); + @include flex-basis(10%); + @include order(3); } .mobile-nav-icon-wrapper { - order: 3; + @include order(3); @media (max-width: $laptop-min) { padding: 10px; } - + @media (max-width: $phone-mid) { - order: 2; + @include order(2); } } .nav-tourn-dates { - order: 4; - flex-grow: 1; + @include order(4); + @include flex-grow(1); } } } @@ -171,22 +171,22 @@ nav { // Set to centered horiz flexbox with equal spacing between items. .nav-main-menu { position: relative; - display: flex; // Display as flex. - justify-content: center; // Main axis alignment. - align-items: center; // Cross axis alignment. - flex-grow: 1; - align-content: space-around; // Handling of extra space. + @include display-flex; // Display as flex. + @include justify-content(center); // Main axis alignment. + @include align-items(center); // Cross axis alignment. + @include flex-grow(1); + @include align-content(space-around); // Handling of extra space. } // Set to have equal spacing for li link elements. .nav-link { position: relative; - display: flex; // Display as flex. - justify-content: center; // Main axis alignment. - align-items: center; // Cross axis alignment. - flex-grow: 1.5; - flex-basis: 75px; - align-content: space-around; // Handling of extra space. + @include display-flex; // Display as flex. + @include justify-content(center); // Main axis alignment. + @include align-items(center); // Cross axis alignment. + @include flex-grow(1.5); + @include flex-basis(75px); + @include align-content(space-around); // Handling of extra space. } // Set to hide submenus initially and align properly when shown. @@ -195,33 +195,33 @@ nav { display: none; top: 50px; left: 0; - flex-direction: column; - justify-content: center; // Main axis alignment. - align-items: center; // Cross axis alignment. - align-content: space-around; // Handling of extra space. + @include flex-direction(column); + @include justify-content(center); // Main axis alignment. + @include align-items(center); // Cross axis alignment. + @include align-content(space-around); // Handling of extra space. } // Show submenus on hover. .nav-main-menu li:hover > ul { - display: flex; // Display as flex. - justify-content: center; // Main axis alignment. - align-items: center; // Cross axis alignment. + @include display-flex; // Display as flex. + @include justify-content(center); // Main axis alignment. + @include align-items(center); // Cross axis alignment. } .nav-sublink { - display: flex; // Display as flex. - justify-content: center; // Main axis alignment. - align-items: center; // Cross axis alignment. - flex-grow: 1; - flex-basis: 50px; - align-content: space-around; // Handling of extra space. + @include display-flex; // Display as flex. + @include justify-content(center); // Main axis alignment. + @include align-items(center); // Cross axis alignment. + @include flex-grow(1); + @include flex-basis(50px); + @include align-content(space-around); // Handling of extra space. } a { - display: flex; // Display as flex. - justify-content: center; // Main axis alignment. - align-items: center; // Cross axis alignment. - flex-wrap: wrap; + @include display-flex; // Display as flex. + @include justify-content(center); // Main axis alignment. + @include align-items(center); // Cross axis alignment. + @include flex-wrap(wrap); } // Hide icons on horizontal. @@ -253,42 +253,42 @@ nav { .nav-main-menu { display: block; - flex-direction: column; - flex-grow: 1; + @include flex-direction(column); + @include flex-grow(1); } .nav-link { - display: flex; - flex-direction: column; - flex-grow: 1; + @include display-flex; + @include flex-direction(column); + @include flex-grow(1); } .nav-link a { - justify-content: flex-start; + @include justify-content(flex-start); } // Set to hide submenus initially. .nav-sub-menu { display: none; - justify-content: center; // Main axis alignment. - align-items: center; // Cross axis alignment. - flex-wrap: wrap; - flex-grow: 1; + @include justify-content(center); // Main axis alignment. + @include align-items(center); // Cross axis alignment. + @include flex-wrap(wrap); + @include flex-grow(1); } .nav-sublink { - flex-grow: 1; + @include flex-grow(1); } .nav-sublink a { - justify-content: center; + @include justify-content(center); } a { - display: flex; // Display as flex. - justify-content: center; // Main axis alignment. - align-items: center; // Cross axis alignment. - flex-wrap: wrap; + @include display-flex; // Display as flex. + @include justify-content(center); // Main axis alignment. + @include align-items(center); // Cross axis alignment. + @include flex-wrap(wrap); } } @@ -366,25 +366,25 @@ footer { .mytabs { #menu { - display: flex; - flex-wrap: wrap; - justify-content: center; + @include display-flex; + @include flex-wrap(wrap); + @include justify-content(center); } #menu li { - display: flex; - flex-grow: 1; - flex-wrap: wrap; - flex-basis: 200px; - justify-content: center; + @include display-flex; + @include flex-grow(1); + @include flex-wrap(wrap); + @include flex-basis(200px); + @include justify-content(center); } #menu li a { - display: flex; - flex-wrap: wrap; - flex-grow: 1; - flex-basis: 200px; - justify-content: center; + @include display-flex; + @include flex-wrap(wrap); + @include flex-grow(1); + @include flex-basis(200px); + @include justify-content(center); } } @@ -433,22 +433,22 @@ nav { #header-nav { .nav-other { - + header { padding: 0; margin: 0; margin-bottom: 10px; } - + .nav-logo-wrapper { - + @media (max-width: $phone-mid) { max-width: 60%; } } - + .mobile-nav-icon-wrapper { - + @media (max-width: $phone-mid) { max-width: 35%; } diff --git a/static/css/sass/usta.scss b/static/css/sass/usta.scss index 4b1d0cf848536b47a92f1c5c8ec0e814d13577a9..b0d733115c56c8ce141250a857c65bc9fcb8c3a3 100644 --- a/static/css/sass/usta.scss +++ b/static/css/sass/usta.scss @@ -115,6 +115,7 @@ // Class for displaying as flex. Mostly for Javascript purposes. .display-flex { + display: -webkit-flex !important; display: flex !important; } diff --git a/static/css/sass/usta_admin.scss b/static/css/sass/usta_admin.scss index bfd4e332273937b58b81431ea62784bddc0901c3..ba814820fdade8482da0e3723c642b5eb5712715 100644 --- a/static/css/sass/usta_admin.scss +++ b/static/css/sass/usta_admin.scss @@ -7,21 +7,22 @@ // Import statements @import '_variables'; +@import '_genericClasses'; // Change admin header so that user info (normally on right side) doesn't dissapear on smaller screens. #header { - display: flex; - flex-wrap: wrap; - justify-content: space-between; + @include display-flex; + @include flex-wrap(wrap); + @include justify-content(space-between); height: auto; min-height: 40px; @media (max-width: 1006px) { - justify-content: flex-start; + @include justify-content(flex-start); } } diff --git a/static/css/usta.css b/static/css/usta.css index 445b89ba1cd5383347dee7e8646afaf6bbb04cef..cd535cb0b31182c6a2bc8bff6a8103718e590488 100644 --- a/static/css/usta.css +++ b/static/css/usta.css @@ -57,6 +57,7 @@ nav img { display: inline-block !important; } .display-flex { + display: -webkit-flex !important; display: flex !important; } .display-none { @@ -189,14 +190,18 @@ body { #site-wrapper { position: relative; z-index: 1; + display: -webkit-flex; display: flex; + -webkit-flex-direction: column; flex-direction: column; min-height: 100vh; } #body-wrapper { position: relative; z-index: 10; + display: -webkit-flex; display: flex; + -webkit-flex-grow: 1; flex-grow: 1; } main { @@ -442,92 +447,146 @@ nav ul ul li a { #header-nav { position: relative; + display: -webkit-flex; display: flex; + -webkit-flex-direction: column; flex-direction: column; } #header-nav .nav-wrapper { + -webkit-order: 1; order: 1; } #header-nav .nav-other { + display: -webkit-flex; display: flex; + -webkit-justify-content: center; justify-content: center; + -webkit-align-items: center; align-items: center; + -webkit-order: 0; order: 0; } @media (max-width: 550px) { #header-nav .nav-other { + -webkit-flex-wrap: wrap; flex-wrap: wrap; + -webkit-justify-content: space-around; justify-content: space-around; } } #header-nav .nav-other header { + display: -webkit-flex; display: flex; + -webkit-justify-content: center; justify-content: center; + -webkit-align-items: center; align-items: center; + -webkit-flex-grow: 9; flex-grow: 9; + -webkit-flex-basis: 10%; flex-basis: 10%; + -webkit-order: 2; order: 2; } @media (max-width: 550px) { #header-nav .nav-other header { + -webkit-order: 3; order: 3; + -webkit-flex-basis: 100%; flex-basis: 100%; } } #header-nav .nav-other .nav-logo-wrapper { + -webkit-order: 1; order: 1; } @media (max-width: 550px) { #header-nav .nav-other .nav-logo-wrapper { + -webkit-order: 1; order: 1; } } #header-nav .nav-other .nav-form-wrapper { display: none; + -webkit-flex-grow: 1; flex-grow: 1; + -webkit-flex-basis: 10%; flex-basis: 10%; + -webkit-order: 3; order: 3; } #header-nav .nav-other .mobile-nav-icon-wrapper { + -webkit-order: 3; order: 3; } @media (max-width: 1024px) { #header-nav .nav-other .mobile-nav-icon-wrapper { padding: 10px; } } @media (max-width: 550px) { #header-nav .nav-other .mobile-nav-icon-wrapper { + -webkit-order: 2; order: 2; } } #header-nav .nav-other .nav-tourn-dates { + -webkit-order: 4; order: 4; + -webkit-flex-grow: 1; flex-grow: 1; } .horiz-nav .nav-main-menu { position: relative; + display: -webkit-flex; display: flex; + -webkit-justify-content: center; justify-content: center; + -webkit-align-items: center; align-items: center; + -webkit-flex-grow: 1; flex-grow: 1; + -webkit-align-content: space-around; align-content: space-around; } .horiz-nav .nav-link { position: relative; + display: -webkit-flex; display: flex; + -webkit-justify-content: center; justify-content: center; + -webkit-align-items: center; align-items: center; + -webkit-flex-grow: 1.5; flex-grow: 1.5; + -webkit-flex-basis: 75px; flex-basis: 75px; + -webkit-align-content: space-around; align-content: space-around; } .horiz-nav .nav-sub-menu { position: absolute; display: none; top: 50px; left: 0; + -webkit-flex-direction: column; flex-direction: column; + -webkit-justify-content: center; justify-content: center; + -webkit-align-items: center; align-items: center; + -webkit-align-content: space-around; align-content: space-around; } .horiz-nav .nav-main-menu li:hover > ul { + display: -webkit-flex; display: flex; + -webkit-justify-content: center; justify-content: center; + -webkit-align-items: center; align-items: center; } .horiz-nav .nav-sublink { + display: -webkit-flex; display: flex; + -webkit-justify-content: center; justify-content: center; + -webkit-align-items: center; align-items: center; + -webkit-flex-grow: 1; flex-grow: 1; + -webkit-flex-basis: 50px; flex-basis: 50px; + -webkit-align-content: space-around; align-content: space-around; } .horiz-nav a { + display: -webkit-flex; display: flex; + -webkit-justify-content: center; justify-content: center; + -webkit-align-items: center; align-items: center; + -webkit-flex-wrap: wrap; flex-wrap: wrap; } .horiz-nav img { display: none; } @@ -539,28 +598,44 @@ nav ul ul li a { .vert-nav .nav-main-menu { display: block; + -webkit-flex-direction: column; flex-direction: column; + -webkit-flex-grow: 1; flex-grow: 1; } .vert-nav .nav-link { + display: -webkit-flex; display: flex; + -webkit-flex-direction: column; flex-direction: column; + -webkit-flex-grow: 1; flex-grow: 1; } .vert-nav .nav-link a { + -webkit-justify-content: flex-start; justify-content: flex-start; } .vert-nav .nav-sub-menu { display: none; + -webkit-justify-content: center; justify-content: center; + -webkit-align-items: center; align-items: center; + -webkit-flex-wrap: wrap; flex-wrap: wrap; + -webkit-flex-grow: 1; flex-grow: 1; } .vert-nav .nav-sublink { + -webkit-flex-grow: 1; flex-grow: 1; } .vert-nav .nav-sublink a { + -webkit-justify-content: center; justify-content: center; } .vert-nav a { + display: -webkit-flex; display: flex; + -webkit-justify-content: center; justify-content: center; + -webkit-align-items: center; align-items: center; + -webkit-flex-wrap: wrap; flex-wrap: wrap; } .mobile-nav-icon-wrapper { @@ -587,20 +662,33 @@ footer .nav-wrapper .nav-sub-menu { display: none; } .mytabs #menu { + display: -webkit-flex; display: flex; + -webkit-flex-wrap: wrap; flex-wrap: wrap; + -webkit-justify-content: center; justify-content: center; } .mytabs #menu li { + display: -webkit-flex; display: flex; + -webkit-flex-grow: 1; flex-grow: 1; + -webkit-flex-wrap: wrap; flex-wrap: wrap; + -webkit-flex-basis: 200px; flex-basis: 200px; + -webkit-justify-content: center; justify-content: center; } .mytabs #menu li a { + display: -webkit-flex; display: flex; + -webkit-flex-wrap: wrap; flex-wrap: wrap; + -webkit-flex-grow: 1; flex-grow: 1; + -webkit-flex-basis: 200px; flex-basis: 200px; + -webkit-justify-content: center; justify-content: center; } .nav-main-menu { @@ -830,9 +918,13 @@ nav img { #banner-wrapper { position: relative; z-index: 5; + display: -webkit-flex; display: flex; + -webkit-flex-direction: column; flex-direction: column; + -webkit-justify-content: space-between; justify-content: space-between; + -webkit-align-items: center; align-items: center; } .banner-image { @@ -856,21 +948,27 @@ nav img { #banner-text { position: absolute; z-index: 6; + display: -webkit-flex; display: flex; + -webkit-flex-direction: column; flex-direction: column; + -webkit-justify-content: center; justify-content: center; + -webkit-align-items: center; align-items: center; } #banner-index-list { position: absolute; bottom: 0; left: 0; + display: -webkit-flex; display: flex; width: 100%; } #banner-index-list li { display: inline-block; height: 2px; + -webkit-flex-grow: 1; flex-grow: 1; background-color: #000; } @@ -918,7 +1016,9 @@ nav img { position: absolute; top: 105px; left: 0; + display: -webkit-flex; display: flex; + -webkit-justify-content: space-between; justify-content: space-between; } #banner-wrapper .arrow-container { position: relative; @@ -1056,47 +1156,72 @@ nav img { footer { position: relative; z-index: 30; + display: -webkit-flex; display: flex; + -webkit-justify-content: center; justify-content: center; + -webkit-align-items: center; align-items: center; + -webkit-flex-direction: column; flex-direction: column; } footer .link-div { position: relative; + display: -webkit-flex; display: flex; z-index: 31; + -webkit-justify-content: space-between; justify-content: space-between; + -webkit-align-items: center; align-items: center; } footer .sitemap-toggle { z-index: 32; + display: -webkit-flex; display: flex; + -webkit-justify-content: center; justify-content: center; + -webkit-align-items: center; align-items: center; } footer .sitemap-toggle a { z-index: 33; + display: -webkit-flex; display: flex; + -webkit-justify-content: center; justify-content: center; + -webkit-align-items: center; align-items: center; } footer .social-media { z-index: 32; + display: -webkit-flex; display: flex; + -webkit-justify-content: center; justify-content: center; + -webkit-align-items: center; align-items: center; } footer .social-media li { z-index: 33; + display: -webkit-flex; display: flex; + -webkit-justify-content: center; justify-content: center; + -webkit-align-items: center; align-items: center; } footer .social-media a { z-index: 33; + display: -webkit-flex; display: flex; + -webkit-justify-content: center; justify-content: center; + -webkit-align-items: center; align-items: center; } footer .social-media img { z-index: 33; + display: -webkit-flex; display: flex; + -webkit-justify-content: center; justify-content: center; + -webkit-align-items: center; align-items: center; } @media (max-width: 550px) { footer .social-media p { @@ -1214,14 +1339,19 @@ nav img { padding-bottom: 30px; } } .form-field-div { + display: -webkit-flex; display: flex; + -webkit-justify-content: center; justify-content: center; + -webkit-align-items: center; align-items: center; + -webkit-flex-direction: column; flex-direction: column; } .form-field-label, .form-field-singleline, .form-field-label-singleline { + -webkit-align-self: flex-start; align-self: flex-start; } table { @@ -1311,17 +1441,24 @@ nav img { padding-bottom: 30px; } } #draws-page .round-container { + display: -webkit-flex; display: flex; + -webkit-flex-direction: row; flex-direction: row; } #draws-page .round { + display: -webkit-flex; display: flex; + -webkit-flex-direction: column; flex-direction: column; } #draws-page .round .spacer { + -webkit-flex-grow: 1; flex-grow: 1; } #draws-page .round .spacer:first-child, #draws-page .round .spacer:last-child { - flex-grow: .5; } + -webkit-flex-grow: 0.5; + flex-grow: 0.5; } #draws-page .round .game-spacer { + -webkit-flex-grow: 1; flex-grow: 1; } #draws-page .round-names li { display: inline-block; } @@ -1364,6 +1501,7 @@ nav img { #draws-page .round-container { font-size: .9em; } #draws-page .round { + -webkit-justify-content: center; justify-content: center; } #draws-page li.game { @@ -1439,8 +1577,11 @@ nav img { width: 100%; } .days-until-container { + display: -webkit-flex; display: flex; + -webkit-flex-direction: column; flex-direction: column; + -webkit-justify-content: center; justify-content: center; border: 1px solid #CCC; border-radius: 10px; @@ -1467,50 +1608,61 @@ nav img { margin-bottom: 10px; } #front-page-left-center-doc { + -webkit-flex-grow: 1; flex-grow: 1; } #front-page-left-center { + display: -webkit-flex; display: flex; } @media (max-width: 1023px) { #front-page-left-center { + -webkit-flex-wrap: wrap; flex-wrap: wrap; } } @media (max-width: 767px) { #front-page-left-center { display: initial; } } #front-page-columns { + display: -webkit-flex; display: flex; + -webkit-justify-content: center; justify-content: center; } @media (max-width: 1023px) { #front-page-columns { + -webkit-flex-wrap: wrap; flex-wrap: wrap; display: block; } } #front-page-left { text-align: center; - /*display: flex; // Display as flex. - align-items: center; // Cross axis alignment. - flex-direction: column; */ } + /*@include display-flex; // Display as flex. + @include align-items(center); // Cross axis alignment. + @include flex-direction(column); */ } @media (max-width: 1023px) { #front-page-left { + -webkit-order: 1; order: 1; } } @media (max-width: 767px) { #front-page-left h2 { display: none; } } #front-page-center { + display: -webkit-flex; display: flex; - /*justify-content: center;*/ + /*@include justify-content(center);*/ + -webkit-flex-grow: 1; flex-grow: 1; } @media (max-width: 1023px) { #front-page-center { + -webkit-order: 3; order: 3; } } #front-page-right { - /*display: flex; // Display as flex. - justify-content: center; // Main axis alignment.*/ } + /*@include display-flex; // Display as flex. + @include justify-content(center); // Main axis alignment.*/ } @media (max-width: 1023px) { #front-page-right { + -webkit-order: 2; order: 2; margin-left: auto; margin-right: auto; } } @@ -1691,27 +1843,37 @@ nav img { padding-bottom: 30px; } } #article-main { + display: -webkit-flex; display: flex; } @media (max-width: 767px) { #article-main { + -webkit-flex-wrap: wrap; flex-wrap: wrap; } } #article-container { + -webkit-flex-grow: 1; flex-grow: 1; } #news-summaries { + display: -webkit-flex; display: flex; + -webkit-justify-content: center; justify-content: center; + -webkit-flex-wrap: wrap; flex-wrap: wrap; + -webkit-align-content: flex-start; align-content: flex-start; } .news-summary, .news-summary-spacer { position: relative; + display: -webkit-flex; display: flex; + -webkit-flex-direction: column; flex-direction: column; } .news-summary .news-content { + -webkit-flex-grow: 1; flex-grow: 1; } .news-summary .placeholder { position: absolute; @@ -1734,18 +1896,23 @@ nav img { float: left; } #date-nav { + display: -webkit-flex; display: flex; } #date-nav .stretch { + -webkit-flex-grow: 1; flex-grow: 1; } #date-nav a { display: block; + -webkit-flex-basis: 0; flex-basis: 0; } #date-nav .empty, #date-nav a { + -webkit-flex-grow: 1; flex-grow: 1; } #date-nav .date-current { display: block; + -webkit-align-self: center; align-self: center; } @media (max-width: 550px) { #date-nav .date-current { @@ -1753,6 +1920,7 @@ nav img { .date-nav-current { display: none; + -webkit-align-self: center; align-self: center; } @media (max-width: 550px) { .date-nav-current { @@ -1761,9 +1929,12 @@ nav img { @media (max-width: 767px) { .news-list, .potd-list { + display: -webkit-flex; display: flex; + -webkit-flex-wrap: wrap; flex-wrap: wrap; overflow: auto; + -webkit-justify-content: center; justify-content: center; } } .news-list a, .potd-list a { @@ -1771,30 +1942,46 @@ nav img { @media (max-width: 767px) { #drilldown { + display: -webkit-flex; display: flex; + -webkit-flex-grow: 1; flex-grow: 1; overflow: auto; overflow-y: auto !important; } #drilldown .news-list { + -webkit-justify-content: center; justify-content: center; + -webkit-align-items: center; align-items: center; } #drilldown .news-list li { + display: -webkit-flex; display: flex; + -webkit-flex-grow: 1; flex-grow: 1; } #drilldown .news-list li ol { + -webkit-flex-grow: 1; flex-grow: 1; } #drilldown .news-list li ol li { + -webkit-justify-content: center; justify-content: center; + -webkit-align-items: center; align-items: center; + -webkit-flex-direction: row; flex-direction: row; + -webkit-flex-grow: 0; flex-grow: 0; } #drilldown .news-list li ol a { + display: -webkit-flex; display: flex; + -webkit-justify-content: center; justify-content: center; + -webkit-align-items: center; align-items: center; } #drilldown li ol { + display: -webkit-flex; display: flex; + -webkit-flex-wrap: wrap; flex-wrap: wrap; } } .news-summary, .news-summary-spacer { @@ -2075,39 +2262,59 @@ nav img { padding-bottom: 30px; } } #player-list form { + -webkit-flex-direction: row; flex-direction: row; + -webkit-flex-wrap: wrap; flex-wrap: wrap; } #player-list .sort-div { + display: -webkit-flex; display: flex; + -webkit-justify-content: center; justify-content: center; + -webkit-align-items: center; align-items: center; + -webkit-flex-direction: column; flex-direction: column; } #player-list .sort-div .field-group { display: inline-block; } #player-list .sort-div .field-group div { display: inline-block; } #player-list .player-div ul { + display: -webkit-flex; display: flex; + -webkit-justify-content: center; justify-content: center; + -webkit-align-items: center; align-items: center; + -webkit-flex-wrap: wrap; flex-wrap: wrap; } #player-list .player-div ul li:not(.seed) { + display: -webkit-flex; display: flex; + -webkit-justify-content: center; justify-content: center; + -webkit-align-items: center; align-items: center; + -webkit-flex-grow: 1; flex-grow: 1; } @media (max-width: 767px) { #player-list .player-div ul li:not(.seed) { + -webkit-flex-basis: 200px; flex-basis: 200px; } } @media (min-width: 768px) and (max-width: 1023px) { #player-list .player-div ul li:not(.seed) { + -webkit-flex-basis: 250px; flex-basis: 250px; } } @media (min-width: 1024px) { #player-list .player-div ul li:not(.seed) { + -webkit-flex-basis: 300px; flex-basis: 300px; } } #player-list .player-div ul li:not(.seed) a { + display: -webkit-flex; display: flex; + -webkit-justify-content: center; justify-content: center; + -webkit-align-items: center; align-items: center; } #player-list .sort-div { @@ -2259,33 +2466,52 @@ nav img { padding-bottom: 30px; } } .company-list { + display: -webkit-flex; display: flex; + -webkit-flex-direction: column; flex-direction: column; + -webkit-flex-wrap: wrap; flex-wrap: wrap; } @media (min-width: 550px) { .company-list { + -webkit-flex-direction: row; flex-direction: row; } } .company-list li { + display: -webkit-flex; display: flex; + -webkit-justify-content: center; justify-content: center; + -webkit-align-items: center; align-items: center; + -webkit-flex-grow: 1; flex-grow: 1; + -webkit-flex-basis: 100px; flex-basis: 100px; } @media (min-width: 1024px) { .company-list li { + -webkit-flex-basis: 150px; flex-basis: 150px; } } .company-list a { + display: -webkit-flex; display: flex; + -webkit-justify-content: center; justify-content: center; + -webkit-align-items: center; align-items: center; } .company-list img { + display: -webkit-flex; display: flex; + -webkit-justify-content: center; justify-content: center; + -webkit-align-items: center; align-items: center; } .company-list p { + display: -webkit-flex; display: flex; + -webkit-justify-content: center; justify-content: center; + -webkit-align-items: center; align-items: center; } .company-list { diff --git a/static/css/usta_admin.css b/static/css/usta_admin.css index 4a78ef1ee8bc55ef6c454b4dfdec801205e7c254..5e2270990ad720fbe17c1935971f75d3790fa79b 100644 --- a/static/css/usta_admin.css +++ b/static/css/usta_admin.css @@ -1,11 +1,15 @@ #header { + display: -webkit-flex; display: flex; + -webkit-flex-wrap: wrap; flex-wrap: wrap; + -webkit-justify-content: space-between; justify-content: space-between; height: auto; min-height: 40px; } @media (max-width: 1006px) { #header { + -webkit-justify-content: flex-start; justify-content: flex-start; } } #header #site-name a {