Changeset 01674ff in OpenWorkouts-current for ow/static/css/main.css
- Timestamp:
- Feb 6, 2019, 7:11:48 PM (5 years ago)
- Branches:
- current, feature/docs, master
- Children:
- 0bf3bd6, b05824e
- Parents:
- 978575d
- File:
-
- 1 edited
Legend:
- Unmodified
- Added
- Removed
-
ow/static/css/main.css
r978575d r01674ff 429 429 box-sizing: inherit; 430 430 } 431 /* ========================================================================== 432 Wrappers 433 ========================================================================== */ 434 /** 435 * Common wrappers to use in Scms-site. 436 * To reducing css size you can use extends instead of mixins 437 * to move the selector up to the properties you wish to use. 438 * 439 * Example LESS: 440 * .myclass { 441 * &:extend(.wrapper); 442 * } 443 */ 444 .wrapper, 445 .wrapper-s, 446 .wrapper-l, 447 .wrapper-xl, 448 .ow-forms { 449 display: block; 450 width: 100%; 451 padding-left: 1rem; 452 padding-right: 1rem; 453 margin: 0 auto; 454 } 455 @media (min-width: 480px) { 456 .wrapper, 457 .wrapper-s, 458 .wrapper-l, 459 .wrapper-xl, 460 .ow-forms { 461 padding-left: 2rem; 462 padding-right: 2rem; 463 } 464 } 465 @media (min-width: 800px) { 466 .wrapper, 467 .wrapper-s, 468 .wrapper-l, 469 .wrapper-xl, 470 .ow-forms { 471 padding-left: 4rem; 472 padding-right: 4rem; 473 } 474 } 475 @media (min-width: 1024px) { 476 .wrapper, 477 .wrapper-s, 478 .wrapper-l, 479 .wrapper-xl, 480 .ow-forms { 481 padding-left: 5rem; 482 padding-right: 5rem; 483 } 484 } 485 @media (min-width: 1440px) { 486 .wrapper, 487 .wrapper-s, 488 .wrapper-l, 489 .wrapper-xl, 490 .ow-forms { 491 padding-left: 6rem; 492 padding-right: 6rem; 493 } 494 } 495 @media (min-width: 320px) { 496 .wrapper-s, 497 .ow-forms { 498 max-width: 740px; 499 } 500 } 501 @media (min-width: 320px) { 502 .wrapper-l { 503 max-width: 1280px; 504 } 505 } 506 @media (min-width: 320px) { 507 .wrapper-xl { 508 max-width: 1440px; 509 } 510 } 511 /* Layout */ 512 .ly-flex { 513 display: flex; 514 justify-content: space-between; 515 } 516 .ly-flex.ly-center { 517 align-items: center; 518 } 519 .ly-flex.ly-start { 520 justify-content: flex-start; 521 } 522 .ly-flex.ly-2 { 523 flex-flow: row wrap; 524 } 525 .ly-flex.ly-2 > div, 526 .ly-flex.ly-2 > li, 527 .ly-flex.ly-2 > p, 528 .ly-flex.ly-2 > a { 529 width: 50%; 530 } 531 .ly-flex.ly-2.has-gap > div, 532 .ly-flex.ly-2.has-gap > li, 533 .ly-flex.ly-2.has-gap > p, 534 .ly-flex.ly-2.has-gap > a { 535 width: 48%; 536 } 537 .ly-flex.ly-3 { 538 flex-flow: row wrap; 539 } 540 .ly-flex.ly-3 > div, 541 .ly-flex.ly-3 > li, 542 .ly-flex.ly-3 > p { 543 width: 33%; 544 } 545 .ly-flex.ly-3.has-gap > div, 546 .ly-flex.ly-3.has-gap > li, 547 .ly-flex.ly-3.has-gap > p { 548 width: 31%; 549 } 550 .ly-flex.ly-4 { 551 flex-flow: row wrap; 552 } 553 .ly-flex.ly-4 > div, 554 .ly-flex.ly-4 > li, 555 .ly-flex.ly-4 > p { 556 width: 25%; 557 } 558 .ly-flex.ly-4.has-gap > div, 559 .ly-flex.ly-4.has-gap > li, 560 .ly-flex.ly-4.has-gap > p { 561 width: 23%; 562 } 563 .ly-flex-end { 564 align-items: flex-end; 565 } 431 566 /* Generic default forms */ 432 567 form { … … 440 575 padding: 0; 441 576 } 442 fieldset > div { 577 fieldset > div, 578 fieldset > p { 443 579 margin-bottom: 1.5em; 444 580 } … … 453 589 border: 1px solid transparent; 454 590 border-radius: 2px; 591 } 592 .ow-forms label { 593 display: block; 594 margin-bottom: 0.35em; 595 color: #959595; 596 } 597 .ow-forms textarea { 598 resize: vertical; 599 height: 200px; 600 } 601 .ow-forms textarea, 602 .ow-forms input { 603 width: 100%; 604 padding: 0.65em; 605 border-radius: 4px; 606 border: 1px solid #e1e1e1; 455 607 } 456 608 /* Generic button */ … … 475 627 line-height: 1.25; 476 628 max-width: 100%; 629 width: auto; 630 } 631 .button-normal { 632 width: auto; 633 } 634 .button-normal:hover { 635 background-color: #959595; 636 color: white; 637 } 638 .button-important { 639 background-color: #EE4056; 477 640 } 478 641 .header-content { … … 792 955 /* Workout detail */ 793 956 #map { 957 width: 100%; 794 958 height: 400px; 795 959 } 796 960 @media (min-width: 480px) { 797 961 #map { 798 height: calc(100vh - 380px);962 height: calc(100vh - 465px); 799 963 } 800 964 } … … 1006 1170 background-color: #e1e1e1; 1007 1171 } 1172 .ow-forms { 1173 padding-top: 2em; 1174 } 1175 .ow-forms h2 { 1176 border-top: 1px solid #e1e1e1; 1177 padding-top: 0.5em; 1178 } 1179 .back { 1180 color: #EE4056; 1181 text-decoration: none; 1182 font-weight: 700; 1183 } 1184 .back:before { 1185 content: "⬅"; 1186 margin-right: 0.5em; 1187 } 1188 .back:hover { 1189 color: #151515; 1190 } 1008 1191 .login-content { 1009 1192 background-image: url("../media/img/back-01.jpg"); … … 1115 1298 font-weight: bold; 1116 1299 } 1300 .total-workouts span { 1301 color: #959595; 1302 margin-right: 0.5em; 1303 } 1304 .total-workouts span:first-child { 1305 color: #151515; 1306 } 1307 .total-workouts span:first-child:after { 1308 content: "|"; 1309 color: #e1e1e1; 1310 margin-left: 0.5em; 1311 } 1117 1312 .profile-data { 1118 1313 list-style-type: none;
Note: See TracChangeset
for help on using the changeset viewer.