miteruzo
/
mr-legend_wiki
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 Commit
1 Branch
13 MiB
 
 
 
 
 
Tree: c616a96f53
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from 'c616a96f53'
${ noResults }
mr-legend_wiki/lib/tpl/sprintdoc/css/base_mixins.less

364 lines
9.0 KiB
Raw Blame History 

  1. /**

  2.  * This file provides less mixins for all other style modules

  3.  */

  4. 

  5. /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */

  6. /* Fonts */

  7. /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */

  8. .setLocalFontFace(@fontFamily,@fontWeight,@localFontName,@localFontNameVar,@filename) {

  9.     @font-face {

  10.         font-family: @fontFamily;

  11.         font-style: normal;

  12.         font-weight: @fontWeight;

  13.         src: ~"local('@{localFontName}'), local('@{localFontNameVar}'), url(fonts/@{filename}.eot)";

  14.         src: ~"url(fonts/@{filename}.eot?#iefix) format('embedded-opentype'), url(fonts/@{filename}.woff) format('woff')";

  15.     }

  16. }

  17. 

  18. .setIconFontFace(@fontFamily,@filename) {

  19.     @font-face {

  20.         font-family: @fontFamily;

  21.         src: ~"url('fonts/icons/@{filename}.eot?6762325')";

  22.         src: ~"url('fonts/icons/@{filename}.eot?6762325#iefix') format('embedded-opentype'), url('fonts/icons/@{filename}.woff2?6762325') format('woff2'), url('fonts/icons/@{filename}.woff?6762325') format('woff'), url('fonts/icons/@{filename}.ttf?6762325') format('truetype'), url('fonts/icons/@{filename}.svg?6762325#fontello') format('svg')";

  23.         font-weight: normal;

  24.         font-style: normal;

  25.     }

  26. }

  27. 

  28. .fontello() {

  29.     &::before {

  30.         font-family: "fontello";

  31.         font-style: normal;

  32.         font-weight: normal;

  33.         speak: none;

  34. 

  35.         display: inline-block;

  36.         text-decoration: inherit;

  37.         width: 1em;

  38.         margin-right: .2em;

  39.         text-align: center;

  40. 

  41.         /* For safety - reset parent styles, that can break glyph codes*/

  42.         font-variant: normal;

  43.         text-transform: none;

  44. 

  45.         /* fix buttons height, for twitter bootstrap */

  46.         line-height: 1em;

  47. 

  48.         /* Animation center compensation - margins should be symmetric */

  49.         /* remove if not needed */

  50.         margin-left: .2em;

  51. 

  52.         /* you can be more comfortable with increased icons size */

  53.         /* font-size: 120%; */

  54. 

  55.         /* Font smoothing. That was taken from TWBS */

  56.         -webkit-font-smoothing: antialiased;

  57.         -moz-osx-font-smoothing: grayscale;

  58. 

  59.         /* Uncomment for 3D effect */

  60.         /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */

  61.     }

  62. }

  63. 

  64. .fontello-double() {

  65.     &::before,

  66.     &::after {

  67.         font-family: "fontello";

  68.         font-style: normal;

  69.         font-weight: normal;

  70.         speak: none;

  71. 

  72.         display: inline-block;

  73.         text-decoration: inherit;

  74.         width: 1em;

  75.         margin-right: .2em;

  76.         text-align: center;

  77. 

  78.         /* For safety - reset parent styles, that can break glyph codes*/

  79.         font-variant: normal;

  80.         text-transform: none;

  81. 

  82.         /* fix buttons height, for twitter bootstrap */

  83.         line-height: 1em;

  84. 

  85.         /* Animation center compensation - margins should be symmetric */

  86.         /* remove if not needed */

  87.         margin-left: .2em;

  88. 

  89.         /* you can be more comfortable with increased icons size */

  90.         /* font-size: 120%; */

  91. 

  92.         /* Font smoothing. That was taken from TWBS */

  93.         -webkit-font-smoothing: antialiased;

  94.         -moz-osx-font-smoothing: grayscale;

  95. 

  96.         /* Uncomment for 3D effect */

  97.         /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */

  98.     }

  99. }

  100. 

  101. /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */

  102. /* Screenreader / Hide */

  103. /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */

  104. .sr-out() {

  105.     display: block;

  106.     width: 1px;

  107.     height: 1px;

  108.     overflow: hidden;

  109.     position: absolute;

  110.     top: -200000em;

  111.     left: -200000em;

  112. }

  113. 

  114. .sr-only() {

  115.     position: absolute;

  116.     width: 1px;

  117.     height: 1px;

  118.     margin: -1px;

  119.     padding: 0;

  120.     overflow: hidden;

  121.     clip: rect(0,0,0,0);

  122.     border: 0;

  123. }

  124. 

  125. .sr-only-focusable() {

  126.     &:active,

  127.     &:focus {

  128.         position: static;

  129.         width: auto;

  130.         height: auto;

  131.         margin: 0;

  132.         overflow: visible;

  133.         clip: auto;

  134.     }

  135. }

  136. 

  137. /* + + + + +  small icon-buttons (breadcrumb, page-header)  + + + + + */

  138. .btn-hover {

  139.     background-color: @ini_nav_menu_hover_bg;

  140.     color: @ini_nav_menu_hover_color;

  141.     transition: @transition color, @transition background-color, @transition border-color;

  142. 

  143.     &:hover,

  144.     &:active,

  145.     &:focus {

  146.         background-color: @ini_nav_menu_hover_color;

  147.         border-color: @ini_nav_menu_hover_color;

  148.         color: @ini_nav_menu_hover_bg;

  149. 

  150.         .prefix {

  151.             color: inherit;

  152.         }

  153.     }

  154. }

  155. 

  156. .btn-usertools-wrapper(@elem:@toggle-size) {

  157.     display: inline-block;

  158.     min-height: @elem;

  159.     min-width: @elem;

  160.     box-sizing: border-box;

  161.     color: @ini_text_webframe;

  162.     font-size: @font-size-small;

  163.     padding: 0;

  164.     margin: 0 .25rem;

  165. 

  166.     * {

  167.         font-size: @font-size-small;

  168.     }

  169. }

  170. 

  171. .btn-usertools-num() {

  172.     .num {

  173.         position: absolute;

  174.         right: -.4rem;

  175.         top: -.5em;

  176.         background-color: @ini_nav_menu_hover_color;

  177.         border-radius: 2px;

  178.         color: @ini_nav_menu_hover_bg;

  179.         font-size: @font-size-very-small;

  180.         font-weight: 400;

  181.         text-align: center;

  182.         line-height: 1;

  183.         padding: .1em @very-small-spacing;

  184.         transition: @transition color, @transition background-color;

  185.     }

  186. }

  187. 

  188. .btn-prefix(@margin-top:.3rem) {

  189.     .fontello();

  190.     .hide-text-show-before();

  191. 

  192.     color: inherit;

  193.     font-size: @font-size-default;

  194. 

  195.     @media @screen_min-xxlg {

  196.         margin-top: .22rem;

  197.     }

  198. 

  199.     @media @screen_max-xxlg {

  200.         margin-top: @margin-top;

  201.     }

  202. 

  203.     @media @screen_max-md {

  204.         margin-top: .2rem;

  205.     }

  206. }

  207. 

  208. .hide-text-show-before() {

  209.     display: inline-block;

  210.     overflow: hidden;

  211.     white-space: nowrap;

  212.     text-indent: -9999px;

  213. 

  214.     &::before {

  215.         float: left;

  216.         width: 100%;

  217.         text-indent: 0;

  218.         margin: 0;

  219.     }

  220. 

  221.     &::after {

  222.         float: left;

  223.         text-indent: 0;

  224.     }

  225. }

  226. 

  227. .hide-text-show-after() {

  228.     display: inline-block;

  229.     overflow: hidden;

  230.     white-space: nowrap;

  231.     text-indent: -9999px;

  232. 

  233.     &::before {

  234.         float: right;

  235.         text-indent: 0;

  236.     }

  237. 

  238.     &::after {

  239.         float: right;

  240.         text-indent: 0;

  241.     }

  242. }

  243. 

  244. 

  245. /* + + + + + + + + + + + + + + + + + + + + + + + + + + */

  246. /* flex-box */

  247. 

  248. .display-flex() {

  249.     display: flex;

  250.     display: -ms-flexbox;

  251.     display: -webkit-flex;

  252. }

  253. 

  254. .flex-direction(@elem:column) {

  255.     flex-direction: @elem;

  256.     -ms-flex-direction: @elem;

  257.     -webkit-flex-direction: @elem;

  258. }

  259. 

  260. .justify-content(@elem:center) {

  261.     justify-content: @elem;

  262.     -ms-justify-content: @elem;

  263.     -webkit-justify-content: @elem;

  264. }

  265. 

  266. .align-items(@elem:center) {

  267.     align-items: @elem;

  268.     -ms-align-items: @elem;

  269.     -webkit-align-items: @elem;

  270. }

  271. 

  272. .flex(@elem:1 0 auto) {

  273.     flex: @elem;

  274.     -ms-flex: @elem;

  275.     -webkit-flex: @elem;

  276. }

  277. 

  278. .flex-wrap() {

  279.     flex-wrap: wrap;

  280.     -webkit-flex-wrap: wrap;

  281.     -ms-flex-wrap: wrap;

  282. }

  283. 

  284. /* + + + + + + + + + + + + + + + + + + + + + + + + + + */

  285. /* positioning */

  286. .center-middle() {

  287.     position: absolute;

  288.     top: 50%;

  289.     left: 50%;

  290.     transform: translateX(-50%) translateY(-50%);

  291.     -ms-transform: translateX(-50%) translateY(-50%);

  292.     -webkit-transform: translateX(-50%) translateY(-50%);

  293. }

  294. 

  295. /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */

  296. /* Screenreader / Hide */

  297. /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */

  298. .reset() {

  299.     background: transparent;

  300.     border: none 0; outline: 0; vertical-align: baseline;

  301.     font-style: normal;

  302.     margin: 0; padding: 0;

  303. }

  304. 

  305. .elementsReset() {

  306.     div, span, object, iframe,

  307.     h1, h2, h3, h4, h5, h6, p, blockquote,

  308.     a, abbr, em,acronym, img, strong,

  309.     dl, dt, dd, ol, ul, li,

  310.     fieldset, form, label, legend,

  311.     table, caption, tbody, tfoot, thead, tr, th, td,

  312.     input, select, option, textarea, button {

  313.         .reset();

  314.     }

  315. }

  316. 

  317. 

  318. /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */

  319. /* Col Grid */

  320. /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */

  321. .make-grid(@class) {

  322.     .float-grid-columns(@class);

  323.     .grid-columns(1, @class, width);

  324.     .grid-columns(2, @class, width);

  325.     .grid-columns(3, @class, width);

  326.     .grid-columns(4, @class, width);

  327.     .grid-columns(5, @class, width);

  328.     .grid-columns(6, @class, width);

  329.     .grid-columns(7, @class, width);

  330.     .grid-columns(8, @class, width);

  331.     .grid-columns(9, @class, width);

  332.     .grid-columns(10, @class, width);

  333.     .grid-columns(11, @class, width);

  334.     .grid-columns(12, @class, width);

  335. }

  336. 

  337. .float-grid-columns(@class) {

  338.     .col-@{class}-1,

  339.     .col-@{class}-2,

  340.     .col-@{class}-3,

  341.     .col-@{class}-4,

  342.     .col-@{class}-5,

  343.     .col-@{class}-6,

  344.     .col-@{class}-7,

  345.     .col-@{class}-8,

  346.     .col-@{class}-9,

  347.     .col-@{class}-10,

  348.     .col-@{class}-11,

  349.     .col-@{class}-12 {

  350.         float: left;

  351.     }

  352. }

  353. 

  354. // todo: no recusion - fix it !!!

  355. .grid-columns(@index, @class, @type) {

  356.     .calc-grid-column(@index, @class, @type);

  357. }

  358. 

  359. .calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) {

  360.     .col-@{class}-@{index} {

  361.         width: percentage((@index / @grid-columns));

  362.     }

  363. }