Last active
November 15, 2019 16:08
-
-
Save megaacheyounes/928272c706a89e92eaab29bf1854a545 to your computer and use it in GitHub Desktop.
general css utility classes
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .w-2 { | |
| width: 2px !important; | |
| } | |
| .h-2 { | |
| height: 2px !important; | |
| } | |
| .mar-2 { | |
| margin: 2px !important; | |
| } | |
| .pad-2 { | |
| padding: 2px !important; | |
| } | |
| .mar-t-2 { | |
| margin-top: 2px !important; | |
| } | |
| .mar-l-2 { | |
| margin-left: 2px !important; | |
| } | |
| .mar-r-2 { | |
| margin-right: 2px !important; | |
| } | |
| .mar-b-2 { | |
| margin-bottom: 2px !important; | |
| } | |
| .pad-t-2 { | |
| padding-top: 2px !important; | |
| } | |
| .pad-r-2 { | |
| padding-right: 2px !important; | |
| } | |
| .pad-l-2 { | |
| padding-left: 2px !important; | |
| } | |
| .pad-b-2 { | |
| padding-bottom: 2px !important; | |
| } | |
| .w-4 { | |
| width: 4px !important; | |
| } | |
| .h-4 { | |
| height: 4px !important; | |
| } | |
| .mar-4 { | |
| margin: 4px !important; | |
| } | |
| .pad-4 { | |
| padding: 4px !important; | |
| } | |
| .mar-t-4 { | |
| margin-top: 4px !important; | |
| } | |
| .mar-l-4 { | |
| margin-left: 4px !important; | |
| } | |
| .mar-r-4 { | |
| margin-right: 4px !important; | |
| } | |
| .mar-b-4 { | |
| margin-bottom: 4px !important; | |
| } | |
| .pad-t-4 { | |
| padding-top: 4px !important; | |
| } | |
| .pad-r-4 { | |
| padding-right: 4px !important; | |
| } | |
| .pad-l-4 { | |
| padding-left: 4px !important; | |
| } | |
| .pad-b-4 { | |
| padding-bottom: 4px !important; | |
| } | |
| .w-8 { | |
| width: 8px !important; | |
| } | |
| .h-8 { | |
| height: 8px !important; | |
| } | |
| .mar-8 { | |
| margin: 8px !important; | |
| } | |
| .pad-8 { | |
| padding: 8px !important; | |
| } | |
| .mar-t-8 { | |
| margin-top: 8px !important; | |
| } | |
| .mar-l-8 { | |
| margin-left: 8px !important; | |
| } | |
| .mar-r-8 { | |
| margin-right: 8px !important; | |
| } | |
| .mar-b-8 { | |
| margin-bottom: 8px !important; | |
| } | |
| .pad-t-8 { | |
| padding-top: 8px !important; | |
| } | |
| .pad-r-8 { | |
| padding-right: 8px !important; | |
| } | |
| .pad-l-8 { | |
| padding-left: 8px !important; | |
| } | |
| .pad-b-8 { | |
| padding-bottom: 8px !important; | |
| } | |
| .w-16 { | |
| width: 16px !important; | |
| } | |
| .h-16 { | |
| height: 16px !important; | |
| } | |
| .mar-16 { | |
| margin: 16px !important; | |
| } | |
| .pad-16 { | |
| padding: 16px !important; | |
| } | |
| .mar-t-16 { | |
| margin-top: 16px !important; | |
| } | |
| .mar-l-16 { | |
| margin-left: 16px !important; | |
| } | |
| .mar-r-16 { | |
| margin-right: 16px !important; | |
| } | |
| .mar-b-16 { | |
| margin-bottom: 16px !important; | |
| } | |
| .pad-t-16 { | |
| padding-top: 16px !important; | |
| } | |
| .pad-r-16 { | |
| padding-right: 16px !important; | |
| } | |
| .pad-l-16 { | |
| padding-left: 16px !important; | |
| } | |
| .pad-b-16 { | |
| padding-bottom: 16px !important; | |
| } | |
| .w-32 { | |
| width: 32px !important; | |
| } | |
| .h-32 { | |
| height: 32px !important; | |
| } | |
| .mar-32 { | |
| margin: 32px !important; | |
| } | |
| .pad-32 { | |
| padding: 32px !important; | |
| } | |
| .mar-t-32 { | |
| margin-top: 32px !important; | |
| } | |
| .mar-l-32 { | |
| margin-left: 32px !important; | |
| } | |
| .mar-r-32 { | |
| margin-right: 32px !important; | |
| } | |
| .mar-b-32 { | |
| margin-bottom: 32px !important; | |
| } | |
| .pad-t-32 { | |
| padding-top: 32px !important; | |
| } | |
| .pad-r-32 { | |
| padding-right: 32px !important; | |
| } | |
| .pad-l-32 { | |
| padding-left: 32px !important; | |
| } | |
| .pad-b-32 { | |
| padding-bottom: 32px !important; | |
| } | |
| .w-64 { | |
| width: 64px !important; | |
| } | |
| .h-64 { | |
| height: 64px !important; | |
| } | |
| .mar-64 { | |
| margin: 64px !important; | |
| } | |
| .pad-64 { | |
| padding: 64px !important; | |
| } | |
| .mar-t-64 { | |
| margin-top: 64px !important; | |
| } | |
| .mar-l-64 { | |
| margin-left: 64px !important; | |
| } | |
| .mar-r-64 { | |
| margin-right: 64px !important; | |
| } | |
| .mar-b-64 { | |
| margin-bottom: 64px !important; | |
| } | |
| .pad-t-64 { | |
| padding-top: 64px !important; | |
| } | |
| .pad-r-64 { | |
| padding-right: 64px !important; | |
| } | |
| .pad-l-64 { | |
| padding-left: 64px !important; | |
| } | |
| .pad-b-64 { | |
| padding-bottom: 64px !important; | |
| } | |
| .w-128 { | |
| width: 128px !important; | |
| } | |
| .h-128 { | |
| height: 128px !important; | |
| } | |
| .mar-128 { | |
| margin: 128px !important; | |
| } | |
| .pad-128 { | |
| padding: 128px !important; | |
| } | |
| .mar-t-128 { | |
| margin-top: 128px !important; | |
| } | |
| .mar-l-128 { | |
| margin-left: 128px !important; | |
| } | |
| .mar-r-128 { | |
| margin-right: 128px !important; | |
| } | |
| .mar-b-128 { | |
| margin-bottom: 128px !important; | |
| } | |
| .pad-t-128 { | |
| padding-top: 128px !important; | |
| } | |
| .pad-r-128 { | |
| padding-right: 128px !important; | |
| } | |
| .pad-l-128 { | |
| padding-left: 128px !important; | |
| } | |
| .pad-b-128 { | |
| padding-bottom: 128px !important; | |
| } | |
| .w-256 { | |
| width: 256px !important; | |
| } | |
| .h-256 { | |
| height: 256px !important; | |
| } | |
| .mar-256 { | |
| margin: 256px !important; | |
| } | |
| .pad-256 { | |
| padding: 256px !important; | |
| } | |
| .mar-t-256 { | |
| margin-top: 256px !important; | |
| } | |
| .mar-l-256 { | |
| margin-left: 256px !important; | |
| } | |
| .mar-r-256 { | |
| margin-right: 256px !important; | |
| } | |
| .mar-b-256 { | |
| margin-bottom: 256px !important; | |
| } | |
| .pad-t-256 { | |
| padding-top: 256px !important; | |
| } | |
| .pad-r-256 { | |
| padding-right: 256px !important; | |
| } | |
| .pad-l-256 { | |
| padding-left: 256px !important; | |
| } | |
| .pad-b-256 { | |
| padding-bottom: 256px !important; | |
| } | |
| .w-512 { | |
| width: 512px !important; | |
| } | |
| .h-512 { | |
| height: 512px !important; | |
| } | |
| .mar-512 { | |
| margin: 512px !important; | |
| } | |
| .pad-512 { | |
| padding: 512px !important; | |
| } | |
| .mar-t-512 { | |
| margin-top: 512px !important; | |
| } | |
| .mar-l-512 { | |
| margin-left: 512px !important; | |
| } | |
| .mar-r-512 { | |
| margin-right: 512px !important; | |
| } | |
| .mar-b-512 { | |
| margin-bottom: 512px !important; | |
| } | |
| .pad-t-512 { | |
| padding-top: 512px !important; | |
| } | |
| .pad-r-512 { | |
| padding-right: 512px !important; | |
| } | |
| .pad-l-512 { | |
| padding-left: 512px !important; | |
| } | |
| .pad-b-512 { | |
| padding-bottom: 512px !important; | |
| } | |
| .w-1024 { | |
| width: 1024px !important; | |
| } | |
| .h-1024 { | |
| height: 1024px !important; | |
| } | |
| .mar-1024 { | |
| margin: 1024px !important; | |
| } | |
| .pad-1024 { | |
| padding: 1024px !important; | |
| } | |
| .mar-t-1024 { | |
| margin-top: 1024px !important; | |
| } | |
| .mar-l-1024 { | |
| margin-left: 1024px !important; | |
| } | |
| .mar-r-1024 { | |
| margin-right: 1024px !important; | |
| } | |
| .mar-b-1024 { | |
| margin-bottom: 1024px !important; | |
| } | |
| .pad-t-1024 { | |
| padding-top: 1024px !important; | |
| } | |
| .pad-r-1024 { | |
| padding-right: 1024px !important; | |
| } | |
| .pad-l-1024 { | |
| padding-left: 1024px !important; | |
| } | |
| .pad-b-1024 { | |
| padding-bottom: 1024px !important; | |
| } | |
| .no-pad { | |
| padding: 0px !important; | |
| } | |
| .no-pad-b { | |
| padding-bottom: 0px !important; | |
| } | |
| .no-pad-r { | |
| padding-top: 0px !important; | |
| } | |
| .no-pad-l { | |
| padding-left: 0px !important; | |
| } | |
| .no-pad-r { | |
| padding-right: 0px !important; | |
| } | |
| .no-mar { | |
| margin: 0px !important; | |
| } | |
| .no-mar-t { | |
| margin-top: 0px !important; | |
| } | |
| .no-mar-b { | |
| margin-bottom: 0px !important; | |
| } | |
| .no-mar-l { | |
| margin-left: 0px !important; | |
| } | |
| .no-mar-r { | |
| margin-right: 0px !important; | |
| } | |
| .full-height { | |
| height: 100vh !important; | |
| min-height: 100% !important; | |
| } | |
| .full-width { | |
| display: flex; | |
| flex: 1 1 auto; | |
| } | |
| .scroll-y { | |
| overflow-y: auto | |
| } | |
| .scroll-x { | |
| overflow-x: auto | |
| } | |
| .no-scroll { | |
| overflow: hidden; | |
| } | |
| .center-crop { | |
| object-fit: cover; | |
| object-position: center; | |
| } | |
| .bg-center-crop { | |
| background-size: cover; | |
| background-position: center; | |
| } | |
| .clickable { | |
| cursor: pointer; | |
| } | |
| .bg { | |
| background: #f5f5f5; | |
| } | |
| .box { | |
| border: 1px red solid; | |
| } | |
| .top { | |
| z-index: 9999; | |
| } | |
| .logo { | |
| @extend .center-crop; | |
| height: 48px | |
| } | |
| .absolute { | |
| position: absolute; | |
| } | |
| .static { | |
| position: static; | |
| } | |
| .img-hoverable { | |
| transition: all 250ms ease-out; | |
| } | |
| .img-hoverable:hover { | |
| transform: scale(1.02); | |
| filter: saturate(125%) brightness(125%); | |
| -ms-filter: saturate(125%) brightness(125%); | |
| -webkit-filter: saturate(125%) brightness(125%); | |
| box-shadow: 0px 0px 4px #414141; | |
| } | |
| .a { | |
| overflow: hidden !important; | |
| } | |
| .dark { | |
| opacity: 1; | |
| color: black; | |
| } | |
| .pull-up { | |
| position: relative; | |
| top: -64px; | |
| } | |
| .pull-down { | |
| position: relative; | |
| bottom: -64px; | |
| } | |
| .circle { | |
| border-radius: 50%; | |
| } | |
| .hidden { | |
| opacity: 0; | |
| display: none; | |
| position: absolute; | |
| left: -999999999px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment