_features.scss 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. // Modular Ressources styling
  2. .modular {
  3. .titre_nsb h1 {
  4. text-transform: uppercase;
  5. text-align: right;
  6. padding-right: 50%;
  7. }
  8. .features {
  9. padding: 2rem 8rem;
  10. text-align: center;
  11. align-content: center;
  12. @include clearfix;
  13. h2 {
  14. margin: 0;
  15. line-height: 100%;
  16. }
  17. p {
  18. margin: 1rem 0;
  19. font-size: $core-font-size + 0.2rem;
  20. @include breakpoint(mobile-only) {
  21. font-size: $core-font-size;
  22. }
  23. }
  24. .feature-items {
  25. margin-top: 2rem;
  26. @supports not (flex-wrap: wrap) {
  27. overflow: hidden;
  28. }
  29. }
  30. .feature {
  31. display:block;
  32. float: left;
  33. width: 20%;
  34. vertical-align: top;
  35. margin-top: 2rem;
  36. margin-right: 3rem;
  37. margin-bottom: 1rem;
  38. @include breakpoint(large-mobile-range) {
  39. margin-top: 1rem;
  40. width: 50%;
  41. }
  42. @include breakpoint(small-mobile-range) {
  43. margin-top: 1rem;
  44. width: 100%;
  45. }
  46. i.fa {
  47. font-size: 2rem;
  48. color: $core-accent;
  49. }
  50. h4 {
  51. margin: 0;
  52. font-size: 1.1rem;
  53. text-align: left;
  54. }
  55. p {
  56. display: inline-block;
  57. font-size: $core-font-size - 0.20;
  58. margin: 0.2rem 0 1rem;
  59. }
  60. img {
  61. width: 45%;
  62. display: block;
  63. }
  64. }
  65. &.big {
  66. text-align: center;
  67. .feature {
  68. width: 50%;
  69. @include breakpoint(small-mobile-range) {
  70. margin-top: 1rem;
  71. width: 100%;
  72. }
  73. }
  74. i.fa {
  75. font-size: 3rem;
  76. float: left;
  77. }
  78. .feature-content {
  79. padding-right: 2rem;
  80. &.icon-offset {
  81. margin-left: 5rem;
  82. }
  83. h4 {
  84. font-size: 1.3rem;
  85. text-align: left;
  86. }
  87. p {
  88. padding: 0;
  89. text-align: left;
  90. }
  91. }
  92. }
  93. }
  94. }