hugo-story/assets/sass/components/_actions.scss

/*
	Hugo Story by CaressOfSteel
	A (modular, highly tweakable) responsive one-page theme for Hugo.
	Ported from Story by HTML5UP.
	This Hugo theme is licensed under the Creative Commons Attribution 3.0 License.
*/

/* Actions */

	ul.actions {
		@include vendor('display', 'flex');
		cursor: default;
		list-style: none;
		margin-left: (_size(element-margin) * -0.5);
		padding-left: 0;

		li {
			padding: 0 0 0 (_size(element-margin) * 0.5);
			vertical-align: middle;
		}

		&.special {
			@include vendor('justify-content', 'center');
			width: 100%;
			margin-left: 0;

			li {
				&:first-child {
					padding-left: 0;
				}
			}
		}

		&.stacked {
			@include vendor('flex-direction', 'column');
			margin-left: 0;

			li {
				padding: (_size(element-margin) * 0.65) 0 0 0;

				&:first-child {
					padding-top: 0;
				}
			}
		}

		&.fit {
			width: calc(100% + #{_size(element-margin) * 0.5});

			li {
				@include vendor('flex-grow', '1');
				@include vendor('flex-shrink', '1');
				width: 100%;

				> * {
					width: 100%;
				}
			}

			&.stacked {
				width: 100%;
			}
		}

		@include breakpoint('<=xsmall') {
			&:not(.fixed) {
				@include vendor('flex-direction', 'column');
				margin-left: 0;
				width: 100% !important;

				li {
					@include vendor('flex-grow', '1');
					@include vendor('flex-shrink', '1');
					padding: (_size(element-margin) * 0.5) 0 0 0;
					text-align: center;
					width: 100%;

					> * {
						width: 100%;
					}

					&:first-child {
						padding-top: 0;
					}

					input[type="submit"],
					input[type="reset"],
					input[type="button"],
					button,
					.button {
						width: 100%;

						&.icon {
							&:before {
								margin-left: -0.5rem;
							}
						}
					}
				}
			}
		}
	}