Blog-style website for karathan using the self-made Stellar Theme powered by HTML5Up http://blog.karathan.at

_actions.scss 1.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  1. ///
  2. /// Stellar by HTML5 UP
  3. /// html5up.net | @ajlkn
  4. /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
  5. ///
  6. /* Actions */
  7. ul.actions {
  8. @include vendor('display', 'flex');
  9. cursor: default;
  10. list-style: none;
  11. margin-left: (_size(element-margin) * -0.5);
  12. padding-left: 0;
  13. li {
  14. padding: 0 0 0 (_size(element-margin) * 0.5);
  15. vertical-align: middle;
  16. }
  17. &.special {
  18. @include vendor('justify-content', 'center');
  19. width: 100%;
  20. margin-left: 0;
  21. li {
  22. &:first-child {
  23. padding-left: 0;
  24. }
  25. }
  26. }
  27. &.stacked {
  28. @include vendor('flex-direction', 'column');
  29. margin-left: 0;
  30. li {
  31. padding: (_size(element-margin) * 0.65) 0 0 0;
  32. &:first-child {
  33. padding-top: 0;
  34. }
  35. }
  36. }
  37. &.fit {
  38. width: calc(100% + #{_size(element-margin) * 0.5});
  39. li {
  40. @include vendor('flex-grow', '1');
  41. @include vendor('flex-shrink', '1');
  42. width: 100%;
  43. > * {
  44. width: 100%;
  45. }
  46. }
  47. &.stacked {
  48. width: 100%;
  49. }
  50. }
  51. @include breakpoint('<=xsmall') {
  52. &:not(.fixed) {
  53. @include vendor('flex-direction', 'column');
  54. margin-left: 0;
  55. width: 100% !important;
  56. li {
  57. @include vendor('flex-grow', '1');
  58. @include vendor('flex-shrink', '1');
  59. padding: (_size(element-margin) * 0.5) 0 0 0;
  60. text-align: center;
  61. width: 100%;
  62. > * {
  63. width: 100%;
  64. }
  65. &:first-child {
  66. padding-top: 0;
  67. }
  68. input[type="submit"],
  69. input[type="reset"],
  70. input[type="button"],
  71. button,
  72. .button {
  73. width: 100%;
  74. &.icon {
  75. &:before {
  76. margin-left: -0.5rem;
  77. }
  78. }
  79. }
  80. }
  81. }
  82. }
  83. }