/** initial setup **/ .nano { position : relative; width : 100%; height : 100%; overflow : hidden; } .nano > .nano-content { position : absolute; overflow : scroll; overflow-x : hidden; top : 0; right : 0; bottom : 0; left : 0; } .nano > .nano-content:focus { outline: thin dotted; } .nano > .nano-content::-webkit-scrollbar { display: none; } .has-scrollbar > .nano-content::-webkit-scrollbar { display: block; } .nano > .nano-pane { background : rgba(0,0,0,.25); position : absolute; width : 10px; right : 0; top : 0; bottom : 0; visibility : hidden\9; /* Target only IE7 and IE8 with this hack */ opacity : .01; -webkit-transition : .2s; -moz-transition : .2s; -o-transition : .2s; transition : .2s; -moz-border-radius : 5px; -webkit-border-radius : 5px; border-radius : 5px; } .nano > .nano-pane > .nano-slider { background: #444; background: rgba(0,0,0,.5); position : relative; margin : 0 1px; -moz-border-radius : 3px; -webkit-border-radius : 3px; border-radius : 3px; } .nano:hover > .nano-pane, .nano-pane.active, .nano-pane.flashed { visibility : visible\9; /* Target only IE7 and IE8 with this hack */ opacity : 0.99; } /* -ctag-metadata:{"definitions":[{"name":"@column_header_height","value":"60px"},{"name":"@column_footer_height","value":"0px"},{"name":"@csstagged-tagged-rule-color","value":"rgba(121,225,218,1)"},{"name":"@csstagged-simple-rule-color","value":"rgba(255,226,155,1)"},{"name":"@csstagged-error-color","value":"rgba(255,137,144,1)"},{"name":"@csstagged-purple","value":"rgba(112,97,171,1)"},{"name":"@csstagged-blue","value":"rgba(59,129,130,1)"},{"name":"@gray-darkest","value":"rgba(0,0,0,1)"},{"name":"@gray-darker","value":"rgba(51,51,51,1)"},{"name":"@gray-dark","value":"rgba(85,85,85,1)"},{"name":"@gray","value":"rgba(119,119,119,1)"},{"name":"@gray-light","value":"rgba(153,153,153,1)"},{"name":"@gray-lighter","value":"rgba(204,204,204,1)"},{"name":"@gray-lightest","value":"rgba(238,238,238,1)"},{"name":"@text-color-darkest","value":"rgba(0,0,0,1)"},{"name":"@text-color-darker","value":"rgba(17,17,17,1)"},{"name":"@text-color-dark","value":"rgba(51,51,51,1)"},{"name":"@text-color","value":"rgba(85,85,85,1)"},{"name":"@text-color-light","value":"rgba(119,119,119,1)"},{"name":"@text-color-lighter","value":"rgba(153,153,153,1)"},{"name":"@text-color-lightest","value":"rgba(153,153,153,1)"},{"name":"@phi-num","value":"1.618033"},{"name":"@phi-num-inv","value":"0.618033"},{"name":"@phi","value":"61.803398%"},{"name":"@phi-rec","value":"161.8033%"},{"name":"@phi-inv","value":"100 - ( @phi )"},{"name":"@screen-xs","value":"480px"},{"name":"@screen-sm-min","value":"768px"},{"name":"@screen-md-min","value":"992px"},{"name":"@screen-lg-min","value":"1200px"},{"name":"@screen-xs-max","value":"( @screen-sm-min - 1 )"},{"name":"@screen-sm-max","value":"( @screen-md-min - 1 )"},{"name":"@screen-md-max","value":"( @screen-lg-min - 1 )"},{"name":"@col","value":"8.333333vw"},{"name":"@col_1","value":"@col"},{"name":"@col_2","value":"@col * 2"},{"name":"@col_3","value":"@col * 3"},{"name":"@col_4","value":"@col * 4"},{"name":"@col_5","value":"@col * 5"},{"name":"@col_6","value":"@col * 6"},{"name":"@col_7","value":"@col * 7"},{"name":"@col_8","value":"@col * 8"},{"name":"@col_9","value":"@col * 9"},{"name":"@col_10","value":"@col * 10"},{"name":"@col_11","value":"@col * 11"},{"name":"@col_12","value":"@col * 12"},{"name":"@width-col","value":"8.333333vw"},{"name":"@width-col-1","value":"@width-col"},{"name":"@width-col-2","value":"@width-col * 2"},{"name":"@width-col-3","value":"@width-col * 3"},{"name":"@width-col-4","value":"@width-col * 4"},{"name":"@width-col-5","value":"@width-col * 5"},{"name":"@width-col-6","value":"@width-col * 6"},{"name":"@width-col-7","value":"@width-col * 7"},{"name":"@width-col-8","value":"@width-col * 8"},{"name":"@width-col-9","value":"@width-col * 9"},{"name":"@width-col-10","value":"@width-col * 10"},{"name":"@width-col-11","value":"@width-col * 11"},{"name":"@width-col-12","value":"@width-col * 12"},{"name":"@row-xxlg","value":"@row-xlg * @phi-num"},{"name":"@row-xlg","value":"@row-lg * @phi-num"},{"name":"@row-lg","value":"@row * @phi-num"},{"name":"@row-md-lg","value":"@row * 1.2"},{"name":"@row","value":"42px"},{"name":"@row-medium","value":"@row"},{"name":"@row-md-sm","value":"@row * 0.8"},{"name":"@row-sm","value":"@row * @phi-num-inv"},{"name":"@row-xsm","value":"@row-sm * @phi-num-inv"},{"name":"@row-xxsm","value":"@row-xsm * @phi-num-inv"},{"name":"@row-shmoe","value":"22222220029px"},{"name":"@row-2","value":"@row * 2"},{"name":"@row-3","value":"@row * 3"},{"name":"@row-4","value":"@row * 4"},{"name":"@row-5","value":"@row * 5"},{"name":"@row-6","value":"@row * 6"},{"name":"@padding-xlg","value":"40px"},{"name":"@padding-lg","value":"30px"},{"name":"@padding","value":"20px"},{"name":"@padding-sm","value":"10px"},{"name":"@padding-xsm","value":"4px"},{"name":"@vpadding-xlg","value":"20px"},{"name":"@vpadding-lg","value":"15px"},{"name":"@vpadding","value":"10px"},{"name":"@vpadding-sm","value":"8px"},{"name":"@vpadding-xsm","value":"6px"},{"name":"@border-bottom","value":"1px"},{"name":"@border-bottom-dk","value":"1px"},{"name":"@font-size-xxlg","value":"22px"},{"name":"@font-size-xlg","value":"18px"},{"name":"@font-size-lg","value":"16px"},{"name":"@font-size","value":"14px"},{"name":"@font-size-sm","value":"12px"},{"name":"@font-size-xsm","value":"10px"},{"name":"@font-size-xxsm","value":"10px"},{"name":"@font-size-height-xxlg","value":"38px"},{"name":"@font-size-height-xlg","value":"34px"},{"name":"@font-size-height-lg","value":"28px"},{"name":"@font-size-height","value":"24px"},{"name":"@font-size-height-sm","value":"20px"},{"name":"@font-size-height-xsm","value":"18px"},{"name":"@font-size-height-xxsm","value":"18px"},{"name":"@overall_score_height","value":"60px"},{"name":"@tile_circle_diameter","value":"84px"},{"name":"@columnOffset","value":"330px"},{"name":"@transitionBase","value":"0.3s"},{"name":"@transitionOffset","value":"0.05s"}],"variables":{"@phi-inv":["@phi"],"@screen-xs-max":["@screen-sm-min"],"@screen-sm-max":["@screen-md-min"],"@screen-md-max":["@screen-lg-min"],"@col_1":["@col"],"@col_2":["@col"],"@col_3":["@col"],"@col_4":["@col"],"@col_5":["@col"],"@col_6":["@col"],"@col_7":["@col"],"@col_8":["@col"],"@col_9":["@col"],"@col_10":["@col"],"@col_11":["@col"],"@col_12":["@col"],"@width-col-1":["@width-col"],"@width-col-2":["@width-col"],"@width-col-3":["@width-col"],"@width-col-4":["@width-col"],"@width-col-5":["@width-col"],"@width-col-6":["@width-col"],"@width-col-7":["@width-col"],"@width-col-8":["@width-col"],"@width-col-9":["@width-col"],"@width-col-10":["@width-col"],"@width-col-11":["@width-col"],"@width-col-12":["@width-col"],"@row-xxlg":["@row-xlg","@phi-num"],"@row-xlg":["@row-lg","@phi-num"],"@row-lg":["@row","@phi-num"],"@row-md-lg":["@row"],"@row-medium":["@row"],"@row-md-sm":["@row"],"@row-sm":["@row","@phi-num-inv"],"@row-xsm":["@row-sm","@phi-num-inv"],"@row-xxsm":["@row-xsm","@phi-num-inv"],"@row-2":["@row"],"@row-3":["@row"],"@row-4":["@row"],"@row-5":["@row"],"@row-6":["@row"]},"original_value":{},"extends":[],"local":{},"pointers":[],"title":[{"definitions_index":2,"content":"Circle Colors"},{"definitions_index":5,"content":"Brand Colors"},{"definitions_index":7,"content":"Grey Colors"},{"definitions_index":14,"content":"Text Colors"},{"definitions_index":21,"content":"Phi Layout"},{"definitions_index":26,"content":"Media Breakpoints (Based on Bootstrap)"},{"definitions_index":33,"content":"Horizontal Layout"},{"definitions_index":46,"content":"Horizontal Layout"},{"definitions_index":59,"content":"Vertical Layout"},{"definitions_index":75,"content":"Horizontal Padding"},{"definitions_index":80,"content":"Vertical Padding"},{"definitions_index":85,"content":"Borders"},{"definitions_index":87,"content":"Font Sizing"},{"definitions_index":101,"content":"ColumnStats"}],"description":[{"definitions_index":2,"content":"Some colors..."},{"definitions_index":5,"content":"Some colors..."},{"definitions_index":7,"content":"Variations of greys"},{"definitions_index":14,"content":"Variations of text colors"},{"definitions_index":21,"content":""},{"definitions_index":26,"content":""},{"definitions_index":33,"content":"Colors used"},{"definitions_index":46,"content":"Atoms focused on horizontal layout"},{"definitions_index":59,"content":"Vertical layout (rows)"},{"definitions_index":75,"content":"Defines how the padding should be used."},{"definitions_index":80,"content":"Defines how the padding should be used in vertical space."},{"definitions_index":85,"content":""},{"definitions_index":87,"content":""},{"definitions_index":94,"content":"Imported font has a more unpredictable height, so define them explicitly.\tThis will help center valign stuff."},{"definitions_index":101,"content":"Variables local to ColumnStats"}],"system":["csstagged-[\t\t\ttagged-rule-color,\t\t\tsimple-rule-color,\t\t\terror-color\t\t]","csstagged-[\t\t\tpurple,\t\t\tblue\t\t]","gray-[\t\t\tdark[er,est],\t\t\tlight[er,est]\t\t]","screen-[\t\t\txs[-max],\t\t\tsm-[min,max],\t\t\tmd-[min,max],\t\t\tlg-[min,max]\t\t]","col-[1,2,3...12]","width-col-[1,2,3...12]"],"order":0}*/ @font-face { -ctag-tag: "fonts"; -ctag-example: "
"; -ctag-global: "true"; font-family: Muli; src: url('Muli.ttf'); font-weight: normal; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"font-family":"Muli","src":"Muli.ttf","font-weight":"normal"},"pointers":[],"tags":"fonts","example":"
","global":"true","order":1}*/ } @font-face { font-family: Muli; src: url('Muli-Bold.ttf'); font-weight: bold; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"font-family":"Muli","src":"Muli-Bold.ttf","font-weight":"bold"},"pointers":[],"order":2}*/ } @font-face { font-family: Muli; src: url('Muli-Light.ttf'); font-weight: light; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"font-family":"Muli","src":"Muli-Light.ttf","font-weight":"light"},"pointers":[],"order":3}*/ } @font-face { font-family: Muli; src: url('Muli-ExtraLight.ttf'); font-weight: extralight; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"font-family":"Muli","src":"Muli-ExtraLight.ttf","font-weight":"extralight"},"pointers":[],"order":4}*/ } @font-face { font-family: Muli; src: url('Muli-Italic.ttf'); font-style: italic; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"font-family":"Muli","src":"Muli-Italic.ttf","font-style":"italic"},"pointers":[],"order":5}*/ } html { -ctag-tag: "html"; -ctag-global: "true"; -ctag-example: "
{ .dog }{ .cat }
"; -ctag-ignore: ".nano"; width: 100%; height: 100%; margin: 0px; padding: 0px; color: #777; font-family: 'Muli', sans-serif; font-weight: light; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"width":"100%","height":"100%","margin":"0px","padding":"0px","color":"#777","font-family":"Muli","font-weight":"light"},"pointers":[],"tags":"html","global":"true","example":"
{ .dog }{ .cat }
","ignore":".nano","order":6}*/ } html * { box-sizing: border-box; background-position: center; background-repeat: no-repeat; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"box-sizing":"border-box","background-position":"center","background-repeat":"no-repeat"},"pointers":[],"order":7}*/ } html body { width: 100%; height: 100%; margin: 0px; padding: 0px; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"width":"100%","height":"100%","margin":"0px","padding":"0px"},"pointers":[],"order":8}*/ } html .list_bottom_padding { height: 20px; clear: both; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"height":"20px","clear":"both"},"pointers":[],"order":9}*/ } .expandoBack, .expandoClose { width: 30px; height: 100%; float: left; background-image: url('back_arrow.png'); transition: width 0.3s, background-size 0.3s; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[".hand"],"local":{"width":"30px","height":"100%","float":"left","background-image":"back_arrow.png","transition":"width"},"pointers":[],"order":10}*/ } .expandoBack:hover, .expandoClose:hover { width: 70px; background-color: #eee; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"width":"70px","background-color":"#eee"},"pointers":[],"order":11}*/ } .expandoClose { /*
*/ background-image: url('close_arrow.png'); /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[".expandoBack"],"local":{"background-image":"close_arrow.png"},"pointers":[],"order":12}*/ } .expandoClose:hover { background-image: url('close_arrow_dark.png'); /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"background-image":"close_arrow_dark.png"},"pointers":[],"order":13}*/ } .column, .columnComps, .columnStats, .columnType { /*
{ .column_Header } { .column_List } { .column_footer }
*/ width: 33.33333%; height: 100%; border-right: 1px solid #eee; position: relative; float: left; background-color: #fff; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"width":"33.33333%","height":"100%","border-right":"1px solid #eee","position":"relative","float":"left","background-color":"#fff"},"pointers":[],"order":14}*/ } .column .column_Header, .columnComps .column_Header, .columnType .column_Header { /*
Header Title
*/ width: 100%; height: 60px; padding: 20px 30px; font-size: 18px; float: left; clear: left; /* -ctag-metadata:{"definitions":[],"variables":{"height":["@column_header_height"]},"original_value":{"height":"@column_header_height"},"extends":[],"local":{"width":"100%","height":"@column_header_height","padding":"20px 30px","font-size":"18px","float":"left","clear":"left"},"pointers":[],"order":15}*/ } .column .column_Content, .column .column_List, .columnComps .column_Content, .columnStats .columnStats_content, .columnType .column_Content, .columnComps .column_List, .columnType .column_List { /*
*/ float: left; clear: left; position: relative; width: 100%; height: calc(100% + -60px); /* -ctag-metadata:{"definitions":[],"variables":{"mixin_5":["@column_header_height","@column_footer_height"]},"original_value":{"mixin_5":".calc( height, 100%, @column_header_height + @column_footer_height )"},"extends":[],"local":{"float":"left","clear":"left","position":"relative","width":"100%"},"pointers":[],"order":16}*/ } .column .column_List, .columnComps .column_List, .columnType .column_List { /*
{ .column_List_Row } { .column_List_Row } { .column_List_Row } { .column_List_Row }
*/ overflow: auto; overflow-x: hidden; padding: 0px 0px; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[".column .column_Content"],"local":{"overflow":"auto","overflow-x":"hidden","padding":"0px 0px"},"pointers":[],"order":17}*/ } .column .column_List .column_ListBody, .columnComps .column_List .column_ListBody, .columnType .column_List .column_ListBody { /*
*/ /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{},"pointers":[],"order":18}*/ } .column .column_List .column_ListBody.nano .nano-pane, .columnComps .column_List .column_ListBody.nano .nano-pane, .columnType .column_List .column_ListBody.nano .nano-pane { background: none; margin: 0px 0px; margin-right: 2px; margin-bottom: 6px; border-radius: 50%; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"background":"none","margin":"0px 0px","margin-right":"2px","margin-bottom":"6px","border-radius":"50%"},"pointers":[],"order":19}*/ } .column .column_List .column_ListBody.nano .nano-slider, .columnComps .column_List .column_ListBody.nano .nano-slider, .columnType .column_List .column_ListBody.nano .nano-slider { background: #ddd; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"background":"#ddd"},"pointers":[],"order":20}*/ } .column .column_List .column_ListBody.no_header, .columnComps .column_List .column_ListBody.no_header, .columnType .column_List .column_ListBody.no_header { height: 100%; transition: height .1s; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"height":"100%","transition":"height .1s"},"pointers":[],"order":21}*/ } .column .column_List .column_List_Row, .columnComps .column_List .column_List_Row, .columnType .column_List .column_List_Row { /*
{ .column_rowTitle }
*/ float: left; clear: left; height: 40px; padding: 0px 30px; width: 100%; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[".hand"],"local":{"float":"left","clear":"left","height":"40px","padding":"0px 30px","width":"100%"},"pointers":[],"order":22}*/ } .column .column_List .column_List_Row:hover, .columnComps .column_List .column_List_Row:hover, .columnType .column_List .column_List_Row:hover { background-color: #eee; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"background-color":"#eee"},"pointers":[],"order":23}*/ } .column .column_List .column_List_Row .column_rowTitle, .columnComps .column_List .column_List_Row .column_rowTitle, .columnType .column_List .column_List_Row .column_rowTitle { /*
Column Title { .column_typeBox }
*/ position: relative; width: 100%; height: 100%; padding-top: 8px; font-size: 14px; border-bottom: 1px solid #eee; overflow: hidden; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"position":"relative","width":"100%","height":"100%","padding-top":"8px","font-size":"14px","border-bottom":"1px solid #eee","overflow":"hidden"},"pointers":[],"order":24}*/ } .column .column_List .column_List_Row .column_rowTitle .column_typeBox, .columnComps .column_List .column_List_Row .column_rowTitle .column_typeBox, .columnType .column_List .column_List_Row .column_rowTitle .column_typeBox { /*
{ .typeIcon }
*/ position: absolute; right: 0px; top: 0px; width: 15px; height: 39px; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"position":"absolute","right":"0px","top":"0px","width":"15px","height":"39px"},"pointers":[],"order":25}*/ } .column .column_List .column_List_Row .column_rowTitle .column_rowTotal, .columnComps .column_List .column_List_Row .column_rowTitle .column_rowTotal, .columnType .column_List .column_List_Row .column_rowTitle .column_rowTotal { /*
33
*/ position: absolute; right: 0px; top: 0px; padding-top: 12px; padding-right: 12px; font-size: 12px; color: #999; width: 30px; height: 39px; text-align: right; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"position":"absolute","right":"0px","top":"0px","padding-top":"12px","padding-right":"12px","font-size":"12px","color":"#999","width":"30px","height":"39px","text-align":"right"},"pointers":[],"order":26}*/ } .column .column_footer, .columnComps .column_footer, .columnType .column_footer { /*
*/ float: left; clear: left; width: 100%; height: 0px; background-color: #fff; border-top: 1px solid #eee; /* -ctag-metadata:{"definitions":[],"variables":{"height":["@column_footer_height"]},"original_value":{"height":"@column_footer_height"},"extends":[],"local":{"float":"left","clear":"left","width":"100%","height":"@column_footer_height","background-color":"#fff","border-top":"1px solid #eee"},"pointers":[],"order":27}*/ } .hand, .expandoBack, .column .column_List .column_List_Row, .statDetails .statDetails_columnList .statDetails_row, .statDetails .statDetails_close, .columnStats .columnStats_content .columnStats_tile, .columnStats .columnStats_depthChart, .ruleDetail .ruleDetail_header .ruleDetail_title .ruleDetail_close, .ruleDetail .ruleDetail_header .ruleDetail_title .ruleDetail_showTree, .ruleDetail .ruleDetail_header .ruleDetail_title .ruleDetail_titleText, .ruleDetailNav .ruleDetailNav_title .ruleDetailNav_back, .ruleDetailNav .ruleDetail_headerNav .ruleDetail_item, .ruleDetailNav .ruleDetail_headerNav .ruleDetail_back, .ruleNesting .ruleNestingColumn .ruleNestingColumn_title, .ruleOverview .ruleOverview_context .ruleOverview_subName, .expandoClose, .statDetails .statDetails_columnList .statDetails_sectionHeader, .columnComps .column_List .column_List_Row, .columnStats .columnStats_content .extendable_tile, .completeDetails .statDetails_columnList .statDetails_row, .completeDetails .statDetails_close, .depthDetails .statDetails_columnList .statDetails_row, .depthDetails .statDetails_close, .duplicateDetails .statDetails_columnList .statDetails_row, .duplicateDetails .statDetails_close, .extendableDetails .statDetails_columnList .statDetails_row, .extendableDetails .statDetails_close, .taggedDetails .statDetails_columnList .statDetails_row, .taggedDetails .statDetails_close, .columnType .column_List .column_List_Row, .ruleDetailNav .ruleDetail_headerNav .ruleDetail_item_overview, .ruleDetailNav .ruleDetail_headerNav .ruleDetail_item_css, .ruleDetailNav .ruleDetail_headerNav .ruleDetail_item_example, .ruleOverview .ruleOverview_context .ruleOverview_stateSubName, .ruleOverview .ruleOverview_context .ruleOverview_subTitle, .completeDetails .statDetails_columnList .statDetails_sectionHeader, .depthDetails .statDetails_columnList .statDetails_sectionHeader, .duplicateDetails .statDetails_columnList .statDetails_sectionHeader, .extendableDetails .statDetails_columnList .statDetails_sectionHeader, .taggedDetails .statDetails_columnList .statDetails_sectionHeader { -ctag-tags: base,button; -ctag-example: ...Label; -ctag-description: "Gives any element a hand rollover...and turns off text selection"; cursor: pointer; cursor: hand; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"cursor":"hand","-webkit-touch-callout":"none","-webkit-user-select":"none","-khtml-user-select":"none","-moz-user-select":"none","-ms-user-select":"none","user-select":"none"},"pointers":[],"tags":"base,button","example":"...Label","description":[{"definitions_index":0,"content":"Gives any element a hand rollover...and turns off text selection"}],"order":28}*/ } .hand-test { -ctag-tags: base,button; -ctag-description: "Gives any element a hand rollover...and turns off text selection"; cursor: pointer; cursor: hand; test: 8.333333vw; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ctag-tags: base,label; -ctag-example: ...Label; -ctag-description: "Basic label"; font-size: 14px; color: #555; -ctag-description: "Here is a dog state that is magically connected to a cat state"; /* -ctag-metadata:{"definitions":[],"variables":{"test":["@col_1"]},"original_value":{"test":"@col_1"},"extends":[".clearfix"],"local":{"cursor":"hand","test":"@col_1","-webkit-touch-callout":"none","-webkit-user-select":"none","-khtml-user-select":"none","-moz-user-select":"none","-ms-user-select":"none","user-select":"none"},"pointers":[".label"],"tags":"base,button","example":"...Label","description":[{"definitions_index":0,"content":"Gives any element a hand rollover...and turns off text selection"},{"definitions_index":0,"content":"Here is a dog state that is magically connected to a cat state"}],"order":29}*/ } .hand-test:empty { color: #f00; test: 16.666666vw; /* -ctag-metadata:{"definitions":[],"variables":{"test":["@col_2"]},"original_value":{"test":"@col_2"},"extends":[],"local":{"color":"#f00","test":"@col_2"},"pointers":[],"order":30}*/ } .hand-test.dog, .hand-test.cat { color: #000; test: 24.999999vw; /* -ctag-metadata:{"definitions":[],"variables":{"test":["@col_3"]},"original_value":{"test":"@col_3"},"extends":[],"local":{"color":"#000","test":"@col_3"},"pointers":[],"order":31}*/ } .handover, .styleGuideList .styleGuideNav_listRow, .styleGuideNav .styleGuideNav_mainNav .styleGuideNav_mainItem, .styleGuideNav_rulesList .styleGuideNav_listRow, .styleGuideNav_rulesList .styleGuideNav_rulesListHeader { -ctag-tags: base,button; -ctag-example: ...Label; -ctag-description: "Gives any element a hand rollover...and turns off text selection"; cursor: pointer; cursor: hand; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{},"pointers":["._handover"],"tags":"base,button","example":"...Label","description":[{"definitions_index":0,"content":"Gives any element a hand rollover...and turns off text selection"}],"order":32}*/ } .handover:hover, .styleGuideList .styleGuideNav_listRow:hover, .styleGuideNav .styleGuideNav_mainNav .styleGuideNav_mainItem:hover, .styleGuideNav_rulesList .styleGuideNav_listRow:hover, .styleGuideNav_rulesList .styleGuideNav_rulesListHeader:hover { background-color: #eeeeee; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"background-color":"rgba(238,238,238,1)"},"pointers":[],"order":33}*/ } .unhand { -ctag-tags: base,button; -ctag-example: ...Label; -ctag-description: "Counteracts the effects of 'hand'"; cursor: default; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"cursor":"default"},"pointers":[],"tags":"base,button","example":"...Label","description":[{"definitions_index":0,"content":"Counteracts the effects of 'hand'"}],"order":34}*/ } .label, .styleGuideList .styleGuideNav_listRow .styleGuideNav_rowLabel, .styleGuideList .styleGuideNav_listRow .styleGuideNav_rowLabelRight, .styleGuideNav_rulesList .styleGuideNav_rulesListHeader .styleGuideNav_rowLabel, .styleGuideNav_rulesList .styleGuideNav_listRow .styleGuideNav_rowLabel, .styleGuideNav_rulesList .styleGuideNav_listRow .styleGuideNav_rowLabelRight { -ctag-tags: base,label; -ctag-example: ...Label; -ctag-description: "Basic label"; font-size: 14px; color: #555; /* -ctag-metadata:{"definitions":[],"variables":{"font-size":["@font-size"]},"original_value":{"font-size":"@font-size"},"extends":[],"local":{"font-size":"@font-size","color":"#555"},"pointers":[],"tags":"base,label","example":"...Label","description":[{"definitions_index":0,"content":"Basic label"}],"order":35}*/ } .clearfix, .hand-test { -ctag-tags: base,misc; -ctag-example: ...; -ctag-description: "Fixes issue with floats and height"; clear: both; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"clear":"both"},"pointers":[],"tags":"base,misc","example":"...","description":[{"definitions_index":0,"content":"Fixes issue with floats and height"}],"order":36}*/ } /* Mixin's */ .typeIcon { /*
{ .tagged_incomplete_icon } { .extendedIcon }
*/ width: 16px; height: 16px; position: absolute; left: 50%; top: 50%; margin-top: -8px; margin-left: -8px; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"width":"16px","height":"16px","position":"absolute","left":"50%","top":"50%","margin-top":"-8px","margin-left":"-8px"},"pointers":[],"order":37}*/ } .typeIcon .extendedIcon { /*
{ .extendedIcon_content }
*/ width: 100%; height: 50%; position: absolute; left: 0px; top: 50%; overflow: hidden; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"width":"100%","height":"50%","position":"absolute","left":"0px","top":"50%","overflow":"hidden"},"pointers":[],"order":38}*/ } .typeIcon .extendedIcon .extendedIcon_content { /*
*/ width: 100%; height: 200%; border-radius: 50%; position: absolute; top: -100%; left: 0px; border: 3px solid #111; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"width":"100%","height":"200%","border-radius":"50%","position":"absolute","top":"-100%","left":"0px","border":"3px solid #111"},"pointers":[],"order":39}*/ } .typeIcon .extendeeIcon { /*
{ .extendeeIcon_content }
*/ width: 100%; height: 50%; position: absolute; left: 0px; top: 0px; overflow: hidden; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"width":"100%","height":"50%","position":"absolute","left":"0px","top":"0px","overflow":"hidden"},"pointers":[],"order":40}*/ } .typeIcon .extendeeIcon .extendeeIcon_content { /*
*/ width: 100%; height: 200%; border-radius: 50%; position: absolute; top: 0px; left: 0px; border: 3px solid #ccc; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"width":"100%","height":"200%","border-radius":"50%","position":"absolute","top":"0px","left":"0px","border":"3px solid #ccc"},"pointers":[],"order":41}*/ } .typeIcon .type_icon, .typeIcon .tagged_icon, .typeIcon .tagged_incomplete_icon, .typeIcon .rule_icon, .typeIcon .dup_icon { /*
*/ width: 6px; height: 6px; border-radius: 50%; position: absolute; left: 5px; top: 5px; background-color: #000; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"width":"6px","height":"6px","border-radius":"50%","position":"absolute","left":"5px","top":"5px","background-color":"#000"},"pointers":[],"order":42}*/ } .typeIcon .tagged_icon { -ctag-tag: "visualization"; -ctag-example: "..."; background-color: #79e1da; /* -ctag-metadata:{"definitions":[],"variables":{"background-color":["@csstagged-tagged-rule-color"]},"original_value":{"background-color":"@csstagged-tagged-rule-color"},"extends":[".typeIcon .type_icon"],"local":{"background-color":"@csstagged-tagged-rule-color"},"pointers":[],"tags":"visualization","example":"...","order":43}*/ } .typeIcon .tagged_icon.on { width: 300px; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"width":"300px"},"pointers":[],"order":44}*/ } .typeIcon .tagged_incomplete_icon { -ctag-tag: "visualization"; -ctag-example: "..."; border: 1px solid #79e1da; background-color: transparent; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[".typeIcon .type_icon"],"local":{"border":"1px","background-color":"transparent"},"pointers":[],"tags":"visualization","example":"...","order":45}*/ } .typeIcon .tagged_incomplete_icon.wide { width: 400px; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"width":"400px"},"pointers":[],"order":46}*/ } .typeIcon .rule_icon { -ctag-tag: "visualization"; -ctag-example: "..."; background-color: #ffe29b; /* -ctag-metadata:{"definitions":[],"variables":{"background-color":["@csstagged-simple-rule-color"]},"original_value":{"background-color":"@csstagged-simple-rule-color"},"extends":[".typeIcon .type_icon"],"local":{"background-color":"@csstagged-simple-rule-color"},"pointers":[],"tags":"visualization","example":"...","order":47}*/ } .typeIcon .dup_icon { -ctag-tag: "visualization"; -ctag-example: "..."; background-color: #ff8990; /* -ctag-metadata:{"definitions":[],"variables":{"background-color":["@csstagged-error-color"]},"original_value":{"background-color":"@csstagged-error-color"},"extends":[".typeIcon .type_icon"],"local":{"background-color":"@csstagged-error-color"},"pointers":[],"tags":"visualization","example":"...","order":48}*/ } /* -ctag-title: Circle Colors */ /* -ctag-description: Some colors... */ /* -ctag-system: csstagged-[ tagged-rule-color, simple-rule-color, error-color ]; */ /* -ctag-title: Brand Colors */ /* -ctag-description: Some colors... */ /* -ctag-system: csstagged-[ purple, blue ]; */ /* -ctag-title: Grey Colors */ /* -ctag-description: Variations of greys */ /* -ctag-system: gray-[ dark[er,est], light[er,est] ]; */ /* -ctag-title: Text Colors */ /* -ctag-description: Variations of text colors */ /* -ctag-title: Phi Layout */ /* -ctag-description: */ /* -ctag-title: Media Breakpoints (Based on Bootstrap) */ /* -ctag-description: */ /* -ctag-system: screen-[ xs[-max], sm-[min,max], md-[min,max], lg-[min,max] ]; */ /* -ctag-title: Horizontal Layout */ /* -ctag-description: Colors used; */ /* -ctag-system: col-[1,2,3...12]; */ .col_md { -ctag-tag: base,size; -ctag-example: ...; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{},"pointers":[],"tags":"base,size","example":"...","order":49}*/ } @media (max-width: 992px) { .col_md { width: 8.333333vw !important; /* -ctag-metadata:{"definitions":[],"variables":{"width":["@col_1"]},"original_value":{"width":"@col_1"},"extends":[],"local":{"width":"@col_1"},"pointers":[],"order":50}*/ } } /* -ctag-title: Horizontal Layout */ /* -ctag-description: Atoms focused on horizontal layout; */ /* -ctag-system: width-col-[1,2,3...12]; */ /* -ctag-title: Vertical Layout */ /* -ctag-description: Vertical layout (rows) */ /* -ctag-title: Horizontal Padding */ /* -ctag-description: Defines how the padding should be used. */ /* -ctag-title: Vertical Padding */ /* -ctag-description: Defines how the padding should be used in vertical space. */ /* -ctag-title: Borders */ /* -ctag-description: */ /* -ctag-title: Font Sizing */ /* -ctag-description: */ /* -ctag-description: Imported font has a more unpredictable height, so define them explicitly. This will help center valign stuff. */ .statDetails, .completeDetails, .depthDetails, .duplicateDetails, .extendableDetails, .taggedDetails { /*
{ .statDetails_columnList } { .statDetails_columnExplanation }
*/ width: 66.66666%; height: calc(100% + -90px); position: absolute; top: 0px; right: 0px; background-color: #555; z-index: 1000; color: #ddd; test: row; test: 2px; test2: 42px; test3: 210px; test4: 210px; test5: calc(100% + -42px); /* -ctag-metadata:{"definitions":[],"variables":{"test2":["@row"],"test3":["@row","@row-2"],"test4":["@row","@row-2"],"mixin_16":["@row"]},"original_value":{"mixin_2":".calc( height, 100%, -90px )","test2":"@row","test3":"@row + ( @row-2 * 2 )","test4":"( @row + ( @row-2 * 2px ) )","mixin_16":".calc( test5, 100%, @row )"},"extends":[],"local":{"width":"66.66666%","position":"absolute","top":"0px","right":"0px","background-color":"#555","z-index":"1000","color":"#ddd","test":"2px","test2":"@row","test3":"@row + ( @row-2 * 2 )","test4":"( @row + ( @row-2 * 2px ) )"},"pointers":[],"order":51}*/ } .statDetails .statDetails_column, .statDetails .statDetails_columnList, .statDetails .statDetails_columnExplanation, .completeDetails .statDetails_column, .depthDetails .statDetails_column, .duplicateDetails .statDetails_column, .extendableDetails .statDetails_column, .taggedDetails .statDetails_column, .completeDetails .statDetails_columnList, .completeDetails .statDetails_columnExplanation, .depthDetails .statDetails_columnList, .depthDetails .statDetails_columnExplanation, .duplicateDetails .statDetails_columnList, .duplicateDetails .statDetails_columnExplanation, .extendableDetails .statDetails_columnList, .extendableDetails .statDetails_columnExplanation, .taggedDetails .statDetails_columnList, .taggedDetails .statDetails_columnExplanation { /*
*/ -ctag-tag: "sdfsadasdf"; width: 50%; height: 100%; padding: 14px 0px; float: left; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"width":"50%","height":"100%","padding":"14px 0px","float":"left"},"pointers":[],"tags":"sdfsadasdf","order":52}*/ } .statDetails .statDetails_columnList, .completeDetails .statDetails_columnList, .depthDetails .statDetails_columnList, .duplicateDetails .statDetails_columnList, .extendableDetails .statDetails_columnList, .taggedDetails .statDetails_columnList { /*
{ .statDetails_sectionHeader } { .statDetails_row } { .statDetails_row } { .statDetails_row }
*/ /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[".statDetails .statDetails_column"],"local":{},"pointers":[],"order":53}*/ } .statDetails .statDetails_columnList.nano .nano-content, .completeDetails .statDetails_columnList.nano .nano-content, .depthDetails .statDetails_columnList.nano .nano-content, .duplicateDetails .statDetails_columnList.nano .nano-content, .extendableDetails .statDetails_columnList.nano .nano-content, .taggedDetails .statDetails_columnList.nano .nano-content { padding: 20px; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"padding":"20px"},"pointers":[],"order":54}*/ } .statDetails .statDetails_columnList.nano .nano-pane, .completeDetails .statDetails_columnList.nano .nano-pane, .depthDetails .statDetails_columnList.nano .nano-pane, .duplicateDetails .statDetails_columnList.nano .nano-pane, .extendableDetails .statDetails_columnList.nano .nano-pane, .taggedDetails .statDetails_columnList.nano .nano-pane { background: none; margin: 10px 0px; margin-right: 4px; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"background":"none","margin":"10px 0px","margin-right":"4px"},"pointers":[],"order":55}*/ } .statDetails .statDetails_columnList.nano .nano-slider, .completeDetails .statDetails_columnList.nano .nano-slider, .depthDetails .statDetails_columnList.nano .nano-slider, .duplicateDetails .statDetails_columnList.nano .nano-slider, .extendableDetails .statDetails_columnList.nano .nano-slider, .taggedDetails .statDetails_columnList.nano .nano-slider { background: #777; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"background":"#777"},"pointers":[],"order":56}*/ } .statDetails .statDetails_columnList .statDetails_row, .statDetails .statDetails_columnList .statDetails_sectionHeader, .completeDetails .statDetails_columnList .statDetails_row, .depthDetails .statDetails_columnList .statDetails_row, .duplicateDetails .statDetails_columnList .statDetails_row, .extendableDetails .statDetails_columnList .statDetails_row, .taggedDetails .statDetails_columnList .statDetails_row, .completeDetails .statDetails_columnList .statDetails_sectionHeader, .depthDetails .statDetails_columnList .statDetails_sectionHeader, .duplicateDetails .statDetails_columnList .statDetails_sectionHeader, .extendableDetails .statDetails_columnList .statDetails_sectionHeader, .taggedDetails .statDetails_columnList .statDetails_sectionHeader { /*
rule item { .statDetails_typeIcon }
*/ width: 100%; height: 34px; padding: 0px 30px; padding-top: 4px; position: relative; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[".hand"],"local":{"width":"100%","height":"34px","padding":"0px 30px","padding-top":"4px","position":"relative"},"pointers":[],"order":57}*/ } .statDetails .statDetails_columnList .statDetails_row:hover, .completeDetails .statDetails_columnList .statDetails_row:hover, .depthDetails .statDetails_columnList .statDetails_row:hover, .duplicateDetails .statDetails_columnList .statDetails_row:hover, .extendableDetails .statDetails_columnList .statDetails_row:hover, .taggedDetails .statDetails_columnList .statDetails_row:hover { background-color: rgba(0, 0, 0, 0.5); /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"background-color":"rgba(0,0,0,0.5)"},"pointers":[],"order":58}*/ } .statDetails .statDetails_columnList .statDetails_row .statDetails_typeIcon, .completeDetails .statDetails_columnList .statDetails_row .statDetails_typeIcon, .depthDetails .statDetails_columnList .statDetails_row .statDetails_typeIcon, .duplicateDetails .statDetails_columnList .statDetails_row .statDetails_typeIcon, .extendableDetails .statDetails_columnList .statDetails_row .statDetails_typeIcon, .taggedDetails .statDetails_columnList .statDetails_row .statDetails_typeIcon { /*
{ .typeIcon }
*/ position: absolute; right: 40px; top: 0px; height: 100%; width: 6px; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"position":"absolute","right":"40px","top":"0px","height":"100%","width":"6px"},"pointers":[],"order":59}*/ } .statDetails .statDetails_columnList .statDetails_sectionHeader, .completeDetails .statDetails_columnList .statDetails_sectionHeader, .depthDetails .statDetails_columnList .statDetails_sectionHeader, .duplicateDetails .statDetails_columnList .statDetails_sectionHeader, .extendableDetails .statDetails_columnList .statDetails_sectionHeader, .taggedDetails .statDetails_columnList .statDetails_sectionHeader { /*
rule item { .statDetails_typeIcon }
*/ font-size: 12px; text-align: left; font-style: italic; font-weight: light; padding: 0px 0px; padding-top: 6px; border-bottom: 1px solid #777; width: calc(100% + -60px); margin: 0px 30px; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{"mixin_9":".calc( width, 100%, -60px )"},"extends":[".statDetails .statDetails_columnList .statDetails_row"],"local":{"font-size":"12px","text-align":"left","font-style":"italic","font-weight":"light","padding":"0px 0px","padding-top":"6px","border-bottom":"1px solid #777","margin":"0px 30px"},"pointers":[],"order":60}*/ } .statDetails .statDetails_columnExplanation, .completeDetails .statDetails_columnExplanation, .depthDetails .statDetails_columnExplanation, .duplicateDetails .statDetails_columnExplanation, .extendableDetails .statDetails_columnExplanation, .taggedDetails .statDetails_columnExplanation { /*
{ .statDetails_divider } { .statDetails_explanation }
*/ /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[".statDetails .statDetails_column"],"local":{},"pointers":[],"order":61}*/ } .statDetails .statDetails_columnExplanation .statDetails_divider, .completeDetails .statDetails_columnExplanation .statDetails_divider, .depthDetails .statDetails_columnExplanation .statDetails_divider, .duplicateDetails .statDetails_columnExplanation .statDetails_divider, .extendableDetails .statDetails_columnExplanation .statDetails_divider, .taggedDetails .statDetails_columnExplanation .statDetails_divider { /*
*/ height: calc(100% + -60px); width: 1px; background-color: #555; position: absolute; top: 30px; left: 50%; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{"mixin_1":".calc( height, 100%, -60px )"},"extends":[],"local":{"width":"1px","background-color":"#555","position":"absolute","top":"30px","left":"50%"},"pointers":[],"order":62}*/ } .statDetails .statDetails_columnExplanation .statDetails_explanation, .completeDetails .statDetails_columnExplanation .statDetails_explanation, .depthDetails .statDetails_columnExplanation .statDetails_explanation, .duplicateDetails .statDetails_columnExplanation .statDetails_explanation, .extendableDetails .statDetails_columnExplanation .statDetails_explanation, .taggedDetails .statDetails_columnExplanation .statDetails_explanation { /*
{ .statDetails_h1 } { .statDetails_p }
*/ /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{},"pointers":[],"order":63}*/ } .statDetails .statDetails_columnExplanation .statDetails_explanation .statDetails_h1, .completeDetails .statDetails_columnExplanation .statDetails_explanation .statDetails_h1, .depthDetails .statDetails_columnExplanation .statDetails_explanation .statDetails_h1, .duplicateDetails .statDetails_columnExplanation .statDetails_explanation .statDetails_h1, .extendableDetails .statDetails_columnExplanation .statDetails_explanation .statDetails_h1, .taggedDetails .statDetails_columnExplanation .statDetails_explanation .statDetails_h1 { /*
Title
*/ font-weight: normal; font-size: 20px; padding: 0px; margin: 0px; margin: 0px 30px; margin-bottom: 20px; padding-top: 2px; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"font-weight":"normal","font-size":"20px","padding":"0px","margin":"0px 30px","margin-bottom":"20px","padding-top":"2px"},"pointers":[],"order":64}*/ } .statDetails .statDetails_columnExplanation .statDetails_explanation .statDetails_p, .completeDetails .statDetails_columnExplanation .statDetails_explanation .statDetails_p, .depthDetails .statDetails_columnExplanation .statDetails_explanation .statDetails_p, .duplicateDetails .statDetails_columnExplanation .statDetails_explanation .statDetails_p, .extendableDetails .statDetails_columnExplanation .statDetails_explanation .statDetails_p, .taggedDetails .statDetails_columnExplanation .statDetails_explanation .statDetails_p { /*
Some text that describes what's going on.
*/ font-size: 13px; margin: 0px 30px; margin-bottom: 20px; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"font-size":"13px","margin":"0px 30px","margin-bottom":"20px"},"pointers":[],"order":65}*/ } .statDetails .statDetails_close, .completeDetails .statDetails_close, .depthDetails .statDetails_close, .duplicateDetails .statDetails_close, .extendableDetails .statDetails_close, .taggedDetails .statDetails_close { /*
*/ width: 60px; height: 60px; position: absolute; right: 0px; top: 0px; background-image: url("close_light.png"); /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[".hand"],"local":{"width":"60px","height":"60px","position":"absolute","right":"0px","top":"0px","background-image":"close_light.png"},"pointers":[],"order":66}*/ } .statDetails .statDetails_close:hover, .completeDetails .statDetails_close:hover, .depthDetails .statDetails_close:hover, .duplicateDetails .statDetails_close:hover, .extendableDetails .statDetails_close:hover, .taggedDetails .statDetails_close:hover { background-color: rgba(0, 0, 0, 0.5); /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"background-color":"rgba(0,0,0,0.5)"},"pointers":[],"order":67}*/ } .styleGuideList { -ctag-tags: list; -ctag-example: "...{ .styleGuideNav_listRow }{ .styleGuideNav_listRow }"; width: 100%; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"width":"100%"},"pointers":[],"tags":"list","example":"...{ .styleGuideNav_listRow }{ .styleGuideNav_listRow }","order":68}*/ } .styleGuideList .styleGuideNav_listRow, .styleGuideNav_rulesList .styleGuideNav_listRow, .styleGuideNav_rulesList .styleGuideNav_rulesListHeader { -ctag-tags: row; /* -ctag-example: "... { .styleGuideNav_rowLabel } { .styleGuideNav_rowLabelRight }"; */ width: calc(100% + -40px); border-bottom: 1px solid #eeeeee; margin-left: 20px; height: 42px; /* -ctag-metadata:{"definitions":[],"variables":{"mixin_3":["@padding"],"border-bottom":["@border-bottom"],"margin-left":["@padding"],"height":["@row"]},"original_value":{"mixin_3":".calc( width, 100%, @padding * 2 )","border-bottom":"@border-bottom","margin-left":"@padding","height":"@row"},"extends":[".handover"],"local":{"border-bottom":"@border-bottom","margin-left":"@padding","height":"@row"},"pointers":[],"tags":"row","example":"... { .styleGuideNav_rowLabel } { .styleGuideNav_rowLabelRight }","order":69}*/ } .styleGuideList .styleGuideNav_listRow .styleGuideNav_rowLabel, .styleGuideNav_rulesList .styleGuideNav_listRow .styleGuideNav_rowLabel { -ctag-tag: label; -ctag-example: ...left label; width: 80%; font-size: 14px; padding-top: 9px; float: left; clear: left; white-space: nowrap; overflow: hidden; /* -ctag-metadata:{"definitions":[],"variables":{"font-size":["@font-size"],"mixin_5":["@row","@font-size-height"]},"original_value":{"font-size":"@font-size","mixin_5":".center( padding-top, @row, @font-size-height )"},"extends":[".label"],"local":{"width":"80%","font-size":"@font-size","float":"left","clear":"left","white-space":"nowrap","overflow":"hidden"},"pointers":[],"tags":"label","example":"...left label","order":70}*/ } .styleGuideList .styleGuideNav_listRow .styleGuideNav_rowLabelRight, .styleGuideNav_rulesList .styleGuideNav_listRow .styleGuideNav_rowLabelRight { -ctag-tag: label; -ctag-example: ...right label; color: #999; font-size: 14px; padding-top: 9px; float: right; clear: right; /* -ctag-metadata:{"definitions":[],"variables":{"font-size":["@font-size"],"mixin_5":["@row","@font-size-height"]},"original_value":{"font-size":"@font-size","mixin_5":".center( padding-top, @row, @font-size-height )"},"extends":[".label"],"local":{"color":"#999","font-size":"@font-size","float":"right","clear":"right"},"pointers":[],"tags":"label","example":"...right label","order":71}*/ } .cssComp { /* -ctag: "app,container", "...Example", "hello, there \"dog\" here", */ height: 100%; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"height":"100%"},"pointers":[],"":"app,container\", \"...Example\", \"hello, there \\\"dog\\\" here\",","order":72}*/ } .cssComp .cssComp_columns, .cssComp .cssComp_col2 { /* -ctag: "app,container", "...Example", "hello, there \"dog\" here" */ position: relative; z-index: 200; height: calc(100% + -90px); /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{"mixin_3":".calc( height, 100%, -90px )"},"extends":[],"local":{"position":"relative","z-index":"200"},"pointers":[],"":"app,container\", \"...Example\", \"hello, there \\\"dog\\\" here","order":73}*/ } .cssComp .cssComp_col2 { /* -ctag: "app,container", "...", "Example of an extended class", ".cssComp_columns" */ /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[".cssComp .cssComp_columns"],"local":{},"pointers":[],"":"app,container\", \"...\", \"Example of an extended class\", \".cssComp_columns","order":74}*/ } .columnComps { /*
{ .column_Header } { .column_List } { .column_footer }
*/ /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[".column"],"local":{},"pointers":[],"order":75}*/ } /* -ctag-title: ColumnStats;*/ /* -ctag-description: Variables local to ColumnStats;*/ .columnStats { /* -ctag: "section,column", "
{ .columnStats_graph } { .columnStats_content } { .columnStats_depthChart }
" */ /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[".column"],"local":{},"pointers":[],"":"section,column\", \"
{ .columnStats_graph } { .columnStats_content } { .columnStats_depthChart }
","order":76}*/ } .columnStats .columnStats_content { -ctag-tags: section,content; -ctag-example: "...{ .columnStats_tile }{ .columnStats_tile }{ .columnStats_tile }{ .columnStats_tile }"; height: calc(70% + -40px); float: left; clear: left; padding: 20px 30px; /* -ctag-metadata:{"definitions":[],"variables":{"mixin_3":["@overall_score_height"]},"original_value":{"mixin_3":".calc( height, 70%, ( @overall_score_height / 2 + 10px ) )"},"extends":[".column .column_Content"],"local":{"float":"left","clear":"left","padding":"20px 30px"},"pointers":[],"tags":"section,content","example":"...{ .columnStats_tile }{ .columnStats_tile }{ .columnStats_tile }{ .columnStats_tile }","order":77}*/ } .columnStats .columnStats_content .columnStats_tile, .columnStats .columnStats_content .extendable_tile { -ctag-tags: section,tile; -ctag-example: "...{ .tile_graph }{ .tile_label }"; width: 50%; height: 50%; float: left; position: relative; background-color: #fff; z-index: 10; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[".hand"],"local":{"width":"50%","height":"50%","float":"left","position":"relative","background-color":"#fff","z-index":"10"},"pointers":[],"tags":"section,tile","example":"...{ .tile_graph }{ .tile_label }","order":78}*/ } .columnStats .columnStats_content .columnStats_tile:hover, .columnStats .columnStats_content .extendable_tile:hover { box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1); z-index: 1000; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"box-shadow":"0px","z-index":"1000"},"pointers":[],"order":79}*/ } .columnStats .columnStats_content .columnStats_tile.tagged_rules, .columnStats .columnStats_content .extendable_tile.tagged_rules { /**/ /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{},"pointers":[],"order":80}*/ } body.s_statDetails_tagged .columnStats .columnStats_content .columnStats_tile.tagged_rules, body.s_statDetails_tagged .columnStats .columnStats_content .extendable_tile.tagged_rules { border: 1px solid #eee; z-index: 900; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"border":"1px solid #eee","z-index":"900"},"pointers":[],"order":81}*/ } body.s_statDetails_tagged .columnStats .columnStats_content .columnStats_tile.tagged_rules:hover, body.s_statDetails_tagged .columnStats .columnStats_content .extendable_tile.tagged_rules:hover { box-shadow: none; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"box-shadow":"none"},"pointers":[],"order":82}*/ } .columnStats .columnStats_content .columnStats_tile.complete_tags, .columnStats .columnStats_content .extendable_tile.complete_tags { /**/ /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{},"pointers":[],"order":83}*/ } body.s_statDetails_complete .columnStats .columnStats_content .columnStats_tile.complete_tags, body.s_statDetails_complete .columnStats .columnStats_content .extendable_tile.complete_tags { border: 1px solid #eee; z-index: 900; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"border":"1px solid #eee","z-index":"900"},"pointers":[],"order":84}*/ } .columnStats .columnStats_content .columnStats_tile.duplicates, .columnStats .columnStats_content .extendable_tile.duplicates { /**/ /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{},"pointers":[],"order":85}*/ } body.s_statDetails_duplicates .columnStats .columnStats_content .columnStats_tile.duplicates, body.s_statDetails_duplicates .columnStats .columnStats_content .extendable_tile.duplicates { border: 1px solid #eee; z-index: 900; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"border":"1px solid #eee","z-index":"900"},"pointers":[],"order":86}*/ } body.s_statDetails_duplicates .columnStats .columnStats_content .columnStats_tile.duplicates:hover, body.s_statDetails_duplicates .columnStats .columnStats_content .extendable_tile.duplicates:hover { box-shadow: none; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"box-shadow":"none"},"pointers":[],"order":87}*/ } .columnStats .columnStats_content .columnStats_tile .tile_graph, .columnStats .columnStats_content .extendable_tile .tile_graph { -ctag-tag: graph; -ctag-example: "...{ .tile_circle }"; width: 100%; height: calc(100% + -28px); position: absolute; top: 0px; left: 0px; font-size: 30px; text-align: center; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{"mixin_3":".calc( height, 100%, -28px )"},"extends":[],"local":{"width":"100%","position":"absolute","top":"0px","left":"0px","font-size":"30px","text-align":"center"},"pointers":[],"tags":"graph","example":"...{ .tile_circle }","order":88}*/ } .columnStats .columnStats_content .columnStats_tile .tile_graph .tile_circle, .columnStats .columnStats_content .extendable_tile .tile_graph .tile_circle { -ctag-tags: graph,unique; -ctag-example: ...43%; position: absolute; top: calc(50% + -42px); left: calc(50% + -42px); width: 84px; height: 84px; transition: all .3s; /* -ctag-metadata:{"definitions":[],"variables":{"mixin_3":["@tile_circle_diameter"],"mixin_4":["@tile_circle_diameter"],"width":["@tile_circle_diameter"],"height":["@tile_circle_diameter"]},"original_value":{"mixin_3":".calc( top, 50%, @tile_circle_diameter / 2 )","mixin_4":".calc( left, 50%, @tile_circle_diameter / 2 )","width":"@tile_circle_diameter","height":"@tile_circle_diameter"},"extends":[],"local":{"position":"absolute","width":"@tile_circle_diameter","height":"@tile_circle_diameter","transition":"all .3s"},"pointers":[],"tags":"graph,unique","example":"...43%","order":89}*/ } .columnStats .columnStats_content .columnStats_tile .tile_graph .tile_circle.go, .columnStats .columnStats_content .extendable_tile .tile_graph .tile_circle.go { font-size: 38px; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"font-size":"38px"},"pointers":[],"order":90}*/ } body.s_go .columnStats .columnStats_content .columnStats_tile .tile_graph .tile_circle, body.s_go .columnStats .columnStats_content .extendable_tile .tile_graph .tile_circle { color: #0f0; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"color":"#0f0"},"pointers":[],"order":91}*/ } .columnStats .columnStats_content .columnStats_tile .tile_label, .columnStats .columnStats_content .extendable_tile .tile_label { -ctag-tag: graph; -ctag-example: "...Rule of Dogs{ .columnStats_typeBox }"; position: absolute; left: 0px; width: 100%; text-align: center; font-size: 10px; bottom: 50%; margin-bottom: -46px; /* -ctag-metadata:{"definitions":[],"variables":{"margin-bottom":["@tile_circle_diameter"]},"original_value":{},"extends":[],"local":{"position":"absolute","left":"0px","width":"100%","text-align":"center","font-size":"10px","bottom":"50%","margin-bottom":"( ( @tile_circle_diameter / 2 ) + 4px )"},"pointers":[],"tags":"graph","example":"...Rule of Dogs{ .columnStats_typeBox }","order":92}*/ } .columnStats .columnStats_content .columnStats_tile .tile_label .columnStats_typeBox, .columnStats .columnStats_content .extendable_tile .tile_label .columnStats_typeBox { -ctag-tag: placeholder; -ctag-example: "...{ .tagged_incomplete_icon }"; position: absolute; top: 0px; left: 28px; width: 20px; height: 18px; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"position":"absolute","top":"0px","left":"28px","width":"20px","height":"18px"},"pointers":[],"tags":"placeholder","example":"...{ .tagged_incomplete_icon }","order":93}*/ } .columnStats .columnStats_content .extendable_tile { -ctag-tags: "application,section"; -ctag-example: "...{ .tile_graph }{ .tile_label }"; -ctag-description: "Exentions of columnStats_tile"; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{"mixin_0":".ctag( application,section, ...{ .tile_graph }{ .tile_label }, Exentions of columnStats_tile )"},"extends":[".columnStats .columnStats_content .columnStats_tile"],"local":{},"pointers":[],"order":94}*/ } body.s_statDetails_extendable .columnStats .columnStats_content .extendable_tile { border: 1px solid #eee; z-index: 900; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"border":"1px solid #eee","z-index":"900"},"pointers":[],"order":95}*/ } body.s_statDetails_extendable .columnStats .columnStats_content .extendable_tile:hover { box-shadow: none; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"box-shadow":"none"},"pointers":[],"order":96}*/ } .columnStats .columnStats_depthChart { -ctag-tag: "container"; -ctag-example: "..."; height: calc(30% + -30px); width: calc(100% + -60px); float: left; clear: left; padding: 10px 30px; margin: 0px 30px; border: 1px solid #fff; /* -ctag-metadata:{"definitions":[],"variables":{"mixin_2":["@overall_score_height"]},"original_value":{"mixin_2":".calc( height, 30%, @overall_score_height / 2 )","mixin_3":".calc( width, 100%, -60px )"},"extends":[".hand"],"local":{"float":"left","clear":"left","padding":"10px 30px","margin":"0px 30px","border":"1px solid #fff"},"pointers":[],"tags":"container","example":"...","order":97}*/ } .columnStats .columnStats_depthChart:hover { box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1); /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"box-shadow":"0px"},"pointers":[],"order":98}*/ } body.s_statDetails_depth .columnStats .columnStats_depthChart { border: 1px solid #eee; z-index: 900; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"border":"1px solid #eee","z-index":"900"},"pointers":[],"order":99}*/ } .columnStats .columnStats_graph { /* ...{ .column_logo } */ position: relative; width: 100%; height: 60px; float: left; clear: left; /* -ctag-metadata:{"definitions":[],"variables":{"height":["@overall_score_height"]},"original_value":{"height":"@overall_score_height"},"extends":[],"local":{"position":"relative","width":"100%","height":"@overall_score_height","float":"left","clear":"left"},"pointers":[],"order":100}*/ } .columnStats .columnStats_graph .column_logo { -ctag-tag: "placeholder"; -ctag-example: "...{ .column_logo_img }"; position: absolute; left: 30px; top: 26px; /* -ctag-metadata:{"definitions":[{"name":"@column_logo_width","value":"179px * 0.8"},{"name":"@column_logo_height","value":"38px * 0.8"}],"variables":{},"original_value":{},"extends":[],"local":{"position":"absolute","left":"30px","top":"26px"},"pointers":[],"tags":"placeholder","example":"...{ .column_logo_img }","order":101}*/ } .columnStats .columnStats_graph .column_logo .column_logo_img { -ctag-tag: "logo,graphic"; -ctag-example: "..."; width: 143.2px; height: 30.4px; background-size: contain; background-image: url("logo_h_small@2x.png"); /* -ctag-metadata:{"definitions":[],"variables":{"width":["@column_logo_width"],"height":["@column_logo_height"]},"original_value":{"width":"@column_logo_width","height":"@column_logo_height"},"extends":[],"local":{"width":"@column_logo_width","height":"@column_logo_height","background-size":"contain","background-image":"logo_h_small@2x.png"},"pointers":[],"tags":"logo,graphic","example":"...","order":102}*/ } .depthChart { /*
{ .depthChart_Column } { .depthChart_Column } { .depthChart_Column } { .depthChart_Column } { .depthChart_Column } { .depthChart_Column } { .depthChart_Column } { .depthChart_title }
*/ width: 100%; height: 100%; position: relative; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"width":"100%","height":"100%","position":"relative"},"pointers":[],"order":103}*/ } .depthChart .depthChart_title { /*
chart of bars...
*/ width: 100%; font-size: 10px; color: #999; text-align: center; position: absolute; bottom: 0px; left: 0px; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"width":"100%","font-size":"10px","color":"#999","text-align":"center","position":"absolute","bottom":"0px","left":"0px"},"pointers":[],"order":104}*/ } .depthChart .depthChart_Column { /*
{ .depthChart_Bar }
*/ width: 14.28571429%; height: 100%; float: left; position: relative; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{"width":"100% / 7"},"extends":[],"local":{"width":"100% / 7","height":"100%","float":"left","position":"relative"},"pointers":[],"order":105}*/ } .depthChart .depthChart_Column .depthChart_Bar { /*
{ .depthChart_RulesBar } { .depthChart_CompsBar }
*/ width: calc(100% + -10px); height: calc(100% + -40px); margin: 0px auto; margin-top: 20px; margin-bottom: 2px; position: relative; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{"mixin_1":".calc( width, 100%, -10px )","mixin_2":".calc( height, 100%, -40px )"},"extends":[],"local":{"margin":"0px auto","margin-top":"20px","margin-bottom":"2px","position":"relative"},"pointers":[],"order":106}*/ } .depthChart .depthChart_Column .depthChart_Bar .depthChart_CompsBar, .depthChart .depthChart_Column .depthChart_Bar .depthChart_RulesBar { width: 100%; position: absolute; bottom: 0px; left: 0px; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"width":"100%","position":"absolute","bottom":"0px","left":"0px"},"pointers":[],"order":107}*/ } .depthChart .depthChart_Column .depthChart_Bar .depthChart_CompsBar { /*
*/ background-color: #79e1da; /* -ctag-metadata:{"definitions":[],"variables":{"background-color":["@csstagged-tagged-rule-color"]},"original_value":{"background-color":"@csstagged-tagged-rule-color"},"extends":[],"local":{"background-color":"@csstagged-tagged-rule-color"},"pointers":[],"order":108}*/ } .depthChart .depthChart_Column .depthChart_Bar .depthChart_RulesBar { /*
{ .depthChart_label }
*/ background-color: #ffe29b; /* -ctag-metadata:{"definitions":[],"variables":{"background-color":["@csstagged-simple-rule-color"]},"original_value":{"background-color":"@csstagged-simple-rule-color"},"extends":[],"local":{"background-color":"@csstagged-simple-rule-color"},"pointers":[],"order":109}*/ } .depthChart .depthChart_Column .depthChart_Bar .depthChart_RulesBar .depthChart_label { /*
44
*/ position: absolute; top: -18px; left: 0px; width: 100%; text-align: center; font-size: 10px; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"position":"absolute","top":"-18px","left":"0px","width":"100%","text-align":"center","font-size":"10px"},"pointers":[],"order":110}*/ } .completeDetails { /*
*/ /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[".statDetails"],"local":{},"pointers":[],"order":111}*/ } .depthDetails { /*
*/ /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[".statDetails"],"local":{},"pointers":[],"order":112}*/ } .duplicateDetails { /*
*/ /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[".statDetails"],"local":{},"pointers":[],"order":113}*/ } .duplicateDetails .statDetails_column { height: 100px; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"height":"100px"},"pointers":[],"order":114}*/ } .extendableDetails { /*
*/ /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[".statDetails"],"local":{},"pointers":[],"order":115}*/ } .taggedDetails { /*
{ .statDetails_columnList } { .statDetails_columnExplanation }
*/ /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[".statDetails"],"local":{},"pointers":[],"order":116}*/ } .taggedDetails .statDetails_column { height: 100px; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"height":"100px"},"pointers":[],"order":117}*/ } .dog, .cat { -ctag-tag: example; -ctag-example: "..."; width: 10px; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"width":"10px"},"pointers":[],"tags":"example","example":"...","order":118}*/ } .dog .tail, .cat .tail { color: pink; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"color":"pink"},"pointers":[],"order":119}*/ } .dog .tail > .fur, .cat .tail > .fur { height: 10px; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"height":"10px"},"pointers":[],"order":120}*/ } .dog .tail > .fur .hair, .cat .tail > .fur .hair { color: purple; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"color":"purple"},"pointers":[],"order":121}*/ } .dog .tail > .fur .hair > .flea, .cat .tail > .fur .hair > .flea { text-decoration-style: dashed; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"text-decoration-style":"dashed"},"pointers":[],"order":122}*/ } .dog .tail > .fur .hair > .flea .flea_eye, .cat .tail > .fur .hair > .flea .flea_eye { height: 1000px; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"height":"1000px"},"pointers":[],"order":123}*/ } .dog .tail > .fur .hair > .flea .flea_eye .poop, .cat .tail > .fur .hair > .flea .flea_eye .poop { color: #f00; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"color":"#f00"},"pointers":[],"order":124}*/ } .cat { -ctag-tag: example; -ctag-example: "...{ .spit }"; width: 11px; /*.fur { color: pink; }*/ /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[".dog"],"local":{"width":"11px"},"pointers":[],"tags":"example","example":"...{ .spit }","order":125}*/ } .cat .spit { /*
THERE
*/ color: yellow; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"color":"yellow"},"pointers":[],"order":126}*/ } .sloth { /*
{ .sloth .spit }
*/ /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{},"pointers":[],"order":127}*/ } .sloth > .spit { /*
HI
*/ color: brown; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"color":"brown"},"pointers":[],"order":128}*/ } .overallVisual { /*
{ .cssp_OverallVisual_taggedRules }
*/ width: 100%; height: 90px; border-top: 1px solid #d9d9d9; padding-left: 30px; padding-top: 30px; position: relative; z-index: 200; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"width":"100%","height":"90px","border-top":"1px solid #d9d9d9","padding-left":"30px","padding-top":"30px","position":"relative","z-index":"200"},"pointers":[],"order":129}*/ } .overallVisual .cssp_OverallVisual_taggedRules { /*
{ .overallVisual_taggedBar } { .overallVisual_rulesBar }
*/ width: calc(100% + -30px); position: relative; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{"mixin_1":".calc( width, 100%, -30px )"},"extends":[],"local":{"position":"relative"},"pointers":[],"order":130}*/ } .overallVisual .cssp_OverallVisual_taggedRules .overallVisual_bar, .overallVisual .cssp_OverallVisual_taggedRules .overallVisual_taggedBar, .overallVisual .cssp_OverallVisual_taggedRules .overallVisual_rulesBar { /*
{ .overallBar_total } { .overallBar_percent } { .label }
*/ height: 30px; float: left; padding-top: 2px; position: relative; z-index: 200; color: #333; background-color: #ddd; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"height":"30px","float":"left","padding-top":"2px","position":"relative","z-index":"200","color":"#333","background-color":"#ddd"},"pointers":[],"order":131}*/ } .overallVisual .cssp_OverallVisual_taggedRules .overallVisual_bar .overallBar_total, .overallVisual .cssp_OverallVisual_taggedRules .overallVisual_taggedBar .tagged_total, .overallVisual .cssp_OverallVisual_taggedRules .overallVisual_rulesBar .rules_total { /*
33
*/ font-size: 16px; padding-right: 12px; float: right; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"font-size":"16px","padding-right":"12px","float":"right"},"pointers":[],"order":132}*/ } .overallVisual .cssp_OverallVisual_taggedRules .overallVisual_bar .overallBar_percent, .overallVisual .cssp_OverallVisual_taggedRules .overallVisual_taggedBar .tagged_percent, .overallVisual .cssp_OverallVisual_taggedRules .overallVisual_rulesBar .rules_percent { /*
44%
*/ font-size: 12px; padding-left: 10px; padding-top: 4px; padding-right: 10px; float: right; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"font-size":"12px","padding-left":"10px","padding-top":"4px","padding-right":"10px","float":"right"},"pointers":[],"order":133}*/ } .overallVisual .cssp_OverallVisual_taggedRules .overallVisual_taggedBar { /*
{ .tagged_total } { .tagged_percent } { .label }
*/ background-color: #79e1da; /* -ctag-metadata:{"definitions":[],"variables":{"background-color":["@csstagged-tagged-rule-color"]},"original_value":{"background-color":"@csstagged-tagged-rule-color"},"extends":[".overallVisual .cssp_OverallVisual_taggedRules .overallVisual_bar"],"local":{"background-color":"@csstagged-tagged-rule-color"},"pointers":[],"order":134}*/ } .overallVisual .cssp_OverallVisual_taggedRules .overallVisual_taggedBar .tagged_total { /*
44
*/ /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[".overallVisual .cssp_OverallVisual_taggedRules .overallVisual_bar .overallBar_total"],"local":{},"pointers":[],"order":135}*/ } .overallVisual .cssp_OverallVisual_taggedRules .overallVisual_taggedBar .tagged_percent { /*
22%
*/ /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[".overallVisual .cssp_OverallVisual_taggedRules .overallVisual_bar .overallBar_percent"],"local":{},"pointers":[],"order":136}*/ } .overallVisual .cssp_OverallVisual_taggedRules .overallVisual_taggedBar .label { /*
tagged
*/ position: absolute; right: 0px; bottom: -15px; padding-right: 3px; padding-top: 0px; height: 14px; color: #bbb; font-size: 12px; background-color: #fff; border-right: 1px solid #ddd; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"position":"absolute","right":"0px","bottom":"-15px","padding-right":"3px","padding-top":"0px","height":"14px","color":"#bbb","font-size":"12px","background-color":"#fff","border-right":"1px solid #ddd"},"pointers":[],"order":137}*/ } .overallVisual .cssp_OverallVisual_taggedRules .overallVisual_rulesBar { /*
{ .rules_total } { .rules_percent } { .label }
*/ background-color: #ffe29b; /* -ctag-metadata:{"definitions":[],"variables":{"background-color":["@csstagged-simple-rule-color"]},"original_value":{"background-color":"@csstagged-simple-rule-color"},"extends":[".overallVisual .cssp_OverallVisual_taggedRules .overallVisual_bar"],"local":{"background-color":"@csstagged-simple-rule-color"},"pointers":[],"order":138}*/ } .overallVisual .cssp_OverallVisual_taggedRules .overallVisual_rulesBar .rules_total { /*
122
*/ float: left; padding-left: 12px; padding-right: 0px; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[".overallVisual .cssp_OverallVisual_taggedRules .overallVisual_bar .overallBar_total"],"local":{"float":"left","padding-left":"12px","padding-right":"0px"},"pointers":[],"order":139}*/ } .overallVisual .cssp_OverallVisual_taggedRules .overallVisual_rulesBar .rules_percent { /*
23%
*/ float: left; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[".overallVisual .cssp_OverallVisual_taggedRules .overallVisual_bar .overallBar_percent"],"local":{"float":"left"},"pointers":[],"order":140}*/ } .ruleCSS { -ctag-tag: page; -ctag-example: "...{ .ruleDetail_code }"; z-index: 100; background-color: #eeeeee; min-height: 100%; /*@media ( max-width: @screen-lg-min ) { .calc( width , 100% , 100px ); }*/ /* -ctag-metadata:{"definitions":[],"variables":{"background-color":["@gray-lightest"]},"original_value":{"background-color":"@gray-lightest"},"extends":[".ruleDetail_contentContainer .ruleDetail_content"],"local":{"z-index":"100","background-color":"@gray-lightest","min-height":"100%"},"pointers":[],"tags":"page","example":"...{ .ruleDetail_code }","order":141}*/ } .ruleCSS .ruleDetail_textarea { /* */ width: 100%; background-color: #000; color: #eee; padding: 20px; font-family: 'Muli', sans-serif; font-weight: extralight; border: 0px; resize: none; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"width":"100%","background-color":"#000","color":"#eee","padding":"20px","font-family":"Muli","font-weight":"extralight","border":"0px","resize":"none"},"pointers":[],"order":142}*/ } .ruleCSS .ruleDetail_code { -ctag-tag: content; /* -ctag-example: ... { .ruleDetail_title } { .ruleDetail_pre };" */ width: 66.666664vw; padding-left: 8.333333vw; padding-bottom: 50px; height: 100%; overflow: auto; /* -ctag-metadata:{"definitions":[],"variables":{"width":["@col_8"],"padding-left":["@col_1"]},"original_value":{"width":"@col_8","padding-left":"@col_1"},"extends":[],"local":{"width":"@col_8","padding-left":"@col_1","padding-bottom":"50px","height":"100%","overflow":"auto"},"pointers":[],"tags":"content","example":"... { .ruleDetail_title } { .ruleDetail_pre };","order":143}*/ } @media (max-width: 992px) { .ruleCSS .ruleDetail_code { width: 58.333331vw; /* -ctag-metadata:{"definitions":[],"variables":{"width":["@col_7"]},"original_value":{"width":"@col_7"},"extends":[],"local":{"width":"@col_7"},"pointers":[],"order":144}*/ } } .ruleCSS .ruleDetail_code .ruleDetail_title { /*
Pseudo Selectors { .ruleDetail_titleButton }
*/ width: 100%; border-bottom: 1px solid #cccccc; font-size: 18px; color: #333; padding-top: 20px; margin-bottom: 10px; clear: both; position: relative; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"width":"100%","border-bottom":"1px","font-size":"18px","color":"#333","padding-top":"20px","margin-bottom":"10px","clear":"both","position":"relative"},"pointers":[],"order":145}*/ } .ruleCSS .ruleDetail_code .ruleDetail_title .ruleDetail_titleButton { /*
React
*/ position: absolute; right: 0px; bottom: 0px; font-size: 14px; -ctag-tags: base,button; -ctag-example: ...Label; -ctag-description: "Gives any element a hand rollover...and turns off text selection"; cursor: pointer; cursor: hand; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; /* -ctag-metadata:{"definitions":[],"variables":{"font-size":["@font-size"]},"original_value":{"font-size":"@font-size"},"extends":[],"local":{"position":"absolute","right":"0px","bottom":"0px","font-size":"@font-size"},"pointers":[".hand"],"order":146}*/ } .ruleCSS .ruleDetail_code .ruleDetail_pre { -ctag-tag: code; /* -ctag-example: 
a [
    color: #f00;
]
;*/ width: 100%; font-family: "Muli", sans-serif; float: left; white-space: pre-wrap; /* CSS 3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"width":"100%","font-family":"Muli","float":"left","white-space":"-o-pre-wrap","word-wrap":"break-word"},"pointers":[],"tags":"code","example":"
a [    color: #f00;]
","order":147}*/ } .ruleCSS .ruleDetail_code .ruleDetail_subTitle { -ctag-tag: code; -ctag-example: ...SubTitle; color: #333333; font-size: 16px; padding: 6px 0px; /* -ctag-metadata:{"definitions":[],"variables":{"color":["@text-color-dark"],"font-size":["@font-size-lg"]},"original_value":{"color":"@text-color-dark","font-size":"@font-size-lg"},"extends":[],"local":{"color":"@text-color-dark","font-size":"@font-size-lg","padding":"6px 0px"},"pointers":[],"tags":"code","example":"...SubTitle","order":148}*/ } .ruleCSS .ruleDetail_code .ruleDetail_noneFound { -ctag-tag: label; -ctag-example: ...None Found; color: #999999; font-size: 14px; /* -ctag-metadata:{"definitions":[],"variables":{"color":["@text-color-lighter"],"font-size":["@font-size"]},"original_value":{"color":"@text-color-lighter","font-size":"@font-size"},"extends":[],"local":{"color":"@text-color-lighter","font-size":"@font-size"},"pointers":[],"tags":"label","example":"...None Found","order":149}*/ } .ruleCSS .ruleDetail_code .ruleDetail_codeLine { -ctag-tag: code; -ctag-example: "...{ .ruleDetail_variableName }: #fff"; color: #7061ab; font-size: 14px; /* -ctag-metadata:{"definitions":[],"variables":{"color":["@csstagged-purple"],"font-size":["@font-size"]},"original_value":{"color":"@csstagged-purple","font-size":"@font-size"},"extends":[],"local":{"color":"@csstagged-purple","font-size":"@font-size"},"pointers":[],"tags":"code","example":"...{ .ruleDetail_variableName }: #fff","order":150}*/ } .ruleCSS .ruleDetail_code .ruleDetail_codeLine > pre > code { color: #333333; font-size: 14px; font-family: 'Muli', sans-serif; font-weight: light; padding: 0px; margin: 0px; -moz-tab-size: 4; /* -ctag-metadata:{"definitions":[],"variables":{"color":["@text-color-dark"],"font-size":["@font-size"]},"original_value":{"color":"@text-color-dark","font-size":"@font-size"},"extends":[],"local":{"color":"@text-color-dark","font-size":"@font-size","font-family":"Muli","font-weight":"light","padding":"0px","margin":"0px","-moz-tab-size":"4"},"pointers":[],"order":151}*/ } .ruleCSS .ruleDetail_code .ruleDetail_codeLine.indent { padding-left: 20px; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"padding-left":"20px"},"pointers":[],"order":152}*/ } .ruleCSS .ruleDetail_code .ruleDetail_codeLine .ruleDetail_variableName { -ctag-tag: code; -ctag-example: ...width; color: #333333; font-weight: normal; /* -ctag-metadata:{"definitions":[],"variables":{"color":["@text-color-dark"]},"original_value":{"color":"@text-color-dark"},"extends":[],"local":{"color":"@text-color-dark","font-weight":"normal"},"pointers":[],"tags":"code","example":"...width","order":153}*/ } .ruleCSS .ruleDetail_code .ruleDetail_codeLine .ruleDetail_selectorSpan { -ctag-tag: code; -ctag-example: ....dog; color: #3b8182; font-weight: normal; /* -ctag-metadata:{"definitions":[],"variables":{"color":["@csstagged-blue"]},"original_value":{"color":"@csstagged-blue"},"extends":[],"local":{"color":"@csstagged-blue","font-weight":"normal"},"pointers":[],"tags":"code","example":"....dog","order":154}*/ } .ruleDetail { /* -ctag: "page,modal", "...{ .ruleDetail_header } { .ruleDetail_contentContainer }" */ width: 100vw; height: 100vh; position: absolute; top: 0px; left: 0px; z-index: 1100; overflow: hidden; background-color: #fff; display: none; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"width":"100vw","height":"100vh","position":"absolute","top":"0px","left":"0px","z-index":"1100","overflow":"hidden","background-color":"#fff","display":"none"},"pointers":[],"":"page,modal\", \"...{ .ruleDetail_header } { .ruleDetail_contentContainer }","order":155}*/ } body.s_tree .ruleDetail { display: block; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"display":"block"},"pointers":[],"order":156}*/ } body.s_tag .ruleDetail { display: block; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"display":"block"},"pointers":[],"order":157}*/ } body.s_detailTab .ruleDetail { /* state */ /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{},"pointers":[],"order":158}*/ } .ruleDetail .ruleDetail_contentContainer { /* -ctag: "placeholder", "...{ .ruleDetail_content }" */ width: calc(100% + -300px); height: calc(100% + -70px); position: absolute; top: 70px; right: 0px; overflow: auto; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{"mixin_2":".calc( width, 100%, -300px )","mixin_3":".calc( height, 100%, -70px )"},"extends":[],"local":{"position":"absolute","top":"70px","right":"0px","overflow":"auto"},"pointers":[],"":"placeholder\", \"...{ .ruleDetail_content }","order":159}*/ } .ruleDetail .ruleDetail_contentContainer .ruleDetail_content { -ctag-tags: "page"; -ctag-example: "..."; background-color: #fff; width: 100%; height: 100%; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{"mixin_0":".ctag( page, ... )"},"extends":[],"local":{"background-color":"#fff","width":"100%","height":"100%"},"pointers":[],"order":160}*/ } .ruleDetail .ruleDetail_ruleNestingContainer { -ctag-tag: navigation; -ctag-example: "...{ .ruleNesting }"; width: 100%; height: calc(100% + -70px); float: left; position: relative; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{"mixin_3":".calc( height, 100%, -70px )"},"extends":[],"local":{"width":"100%","float":"left","position":"relative"},"pointers":[],"tags":"navigation","example":"...{ .ruleNesting }","order":161}*/ } body.s_detailTab .ruleDetail .ruleDetail_ruleNestingContainer { width: 300px; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"width":"300px"},"pointers":[],"order":162}*/ } .ruleDetail .ruleDetail_header { /* -ctag: "header", "...{ .ruleDetail_back } { .ruleDetail_title } { .ruleDetail_headerNav }" */ width: 100%; height: 70px; border-bottom: 1px solid #eee; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"width":"100%","height":"70px","border-bottom":"1px solid #eee"},"pointers":[],"":"header\", \"...{ .ruleDetail_back } { .ruleDetail_title } { .ruleDetail_headerNav }","order":163}*/ } body.s_detailTab .ruleDetail .ruleDetail_header { /* state */ /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{},"pointers":[],"order":164}*/ } .ruleDetail .ruleDetail_header .ruleDetail_title { /* -ctag: "container", "...{ .ruleDetail_titleText } { .ruleDetail_iconBox }" */ width: 300px; height: 100%; position: relative; float: left; transition: width .3s; /*@media ( max-width: @screen-lg-min ) { width: 120px; }*/ /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"width":"300px","height":"100%","position":"relative","float":"left","transition":"width .3s"},"pointers":[],"":"container\", \"...{ .ruleDetail_titleText } { .ruleDetail_iconBox }","order":165}*/ } .ruleDetail .ruleDetail_header .ruleDetail_title .ruleDetail_close { /* -ctag: "button", "...", "Close the detail", ".hand" */ width: 70px; height: 100%; float: left; background-image: url('close_arrow.png'); transition: width .3s; /*@media ( max-width: @screen-lg-min ) { width: 60px; }*/ /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[".hand"],"local":{"width":"70px","height":"100%","float":"left","background-image":"close_arrow.png","transition":"width .3s"},"pointers":[],"":"button\", \"...\", \"Close the detail\", \".hand","order":166}*/ } .ruleDetail .ruleDetail_header .ruleDetail_title .ruleDetail_close:hover { background-color: #eee; background-image: url('close_arrow_dark.png'); /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"background-color":"#eee","background-image":"close_arrow_dark.png"},"pointers":[],"order":167}*/ } .ruleDetail .ruleDetail_header .ruleDetail_title .ruleDetail_showTree { /* -ctag: "button", "..." */ width: 70px; height: 100%; float: right; background-image: url('show_tree.png'); display: none; transition: width .3s; /*@media ( max-width: @screen-lg-min ) { width: 60px; }*/ /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[".hand"],"local":{"width":"70px","height":"100%","float":"right","background-image":"show_tree.png","display":"none","transition":"width .3s"},"pointers":[],"":"button\", \"...","order":168}*/ } .ruleDetail .ruleDetail_header .ruleDetail_title .ruleDetail_showTree:hover { background-color: #eee; background-image: url('show_tree_dark.png'); /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"background-color":"#eee","background-image":"show_tree_dark.png"},"pointers":[],"order":169}*/ } body.s_detailTab .ruleDetail .ruleDetail_header .ruleDetail_title .ruleDetail_showTree { display: block; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"display":"block"},"pointers":[],"order":170}*/ } .ruleDetail .ruleDetail_header .ruleDetail_title .ruleDetail_titleText { /* -ctag: "title", "...A Title" */ -ctag-tags: "label"; -ctag-example: "...A Title"; float: left; padding: 16px 0px; padding-left: 0px; height: 100%; font-size: 14px; color: #555; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{"mixin_1":".ctag( label, ...A Title )"},"extends":[".hand"],"local":{"float":"left","padding":"16px 0px","padding-left":"0px","height":"100%","font-size":"14px","color":"#555"},"pointers":[],"":"title\", \"...A Title","order":171}*/ } .ruleDetail .ruleDetail_header .ruleDetail_title .ruleDetail_titleText:hover { background-color: #eee; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"background-color":"#eee"},"pointers":[],"order":172}*/ } .ruleDetail .ruleDetail_header .ruleDetail_title .ruleDetail_iconBox { /* -ctag: "container,nav_item", "...
" */ width: 50px; height: 100%; position: relative; float: left; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"width":"50px","height":"100%","position":"relative","float":"left"},"pointers":[],"":"container,nav_item\", \"...
","order":173}*/ } .ruleDetail .ruleDetail_ruleNavPlaceholder { -ctag-tags: placeholder; -ctag-example: "...{ .ruleDetailNav }"; position: absolute; right: 0px; top: 0px; width: 100%; width: calc(100% + -299px); height: 70px; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{"mixin_6":".calc( width, 100%, -299px )"},"extends":[],"local":{"position":"absolute","right":"0px","top":"0px","width":"100%","height":"70px"},"pointers":[],"tags":"placeholder","example":"...{ .ruleDetailNav }","order":174}*/ } .ruleDetailNav { -ctag-tag: navigation; -ctag-example: "...{ .ruleDetailNav_title }"; height: 100%; width: 100%; border-bottom: 1px solid #eee; transition: left .3s; z-index: 200; background-color: #fff; /*display: none; body.s_detailTab & { display: block; }*/ /*@media ( max-width: @screen-lg-min ) { left: 119px; }*/ /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"height":"100%","width":"100%","border-bottom":"1px solid #eee","transition":"left .3s","z-index":"200","background-color":"#fff"},"pointers":[],"tags":"navigation","example":"...{ .ruleDetailNav_title }","order":175}*/ } .ruleDetailNav .ruleDetailNav_title { /*
rule_name
*/ width: 100%; position: absolute; left: 0px; top: 0px; height: 70px; padding-left: 0px; position: relative; overflow: hidden; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"width":"100%","position":"relative","left":"0px","top":"0px","height":"70px","padding-left":"0px","overflow":"hidden"},"pointers":[],"order":176}*/ } .ruleDetailNav .ruleDetailNav_title .ruleDetailNav_back { width: 40px; height: 100%; float: left; background-image: url('back_arrow.png'); transition: width .3s; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[".hand"],"local":{"width":"40px","height":"100%","float":"left","background-image":"back_arrow.png","transition":"width .3s"},"pointers":[],"order":177}*/ } .ruleDetailNav .ruleDetailNav_title .ruleDetailNav_back:hover { width: 60px; background-color: #eee; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"width":"60px","background-color":"#eee"},"pointers":[],"order":178}*/ } .ruleDetailNav .ruleDetailNav_title .ruleDetailNav_titleText { padding-top: 16px; font-size: 22px; color: #333; float: left; margin-left: 20px; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"padding-top":"16px","font-size":"22px","color":"#333","float":"left","margin-left":"20px"},"pointers":[],"order":179}*/ } .ruleDetailNav .ruleDetailNav_title .ruleDetailNav_typeIcon { float: left; width: 16px; height: 100%; position: relative; margin-left: 20px; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"float":"left","width":"16px","height":"100%","position":"relative","margin-left":"20px"},"pointers":[],"order":180}*/ } .ruleDetailNav .ruleDetailNav_title .ruleDetailNav_typeIcon:hover { background-color: #eee; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"background-color":"#eee"},"pointers":[],"order":181}*/ } .ruleDetailNav .ruleDetail_headerNav { -ctag-tag: nav; /* -ctag-example: ... { .ruleDetail_item_css } { .ruleDetail_item_overview } { .ruleDetail_item_example } { .ruleDetail_back };*/ position: absolute; right: 0px; top: 0px; width: 410px; height: 100%; /* -ctag-metadata:{"definitions":[{"name":"@item_color","value":"rgba(204,204,204,1)"},{"name":"@item_selected","value":"rgba(0,0,0,1)"}],"variables":{},"original_value":{},"extends":[],"local":{"position":"absolute","right":"0px","top":"0px","width":"410px","height":"100%"},"pointers":[],"tags":"nav","example":"... { .ruleDetail_item_css } { .ruleDetail_item_overview } { .ruleDetail_item_example } { .ruleDetail_back }","order":182}*/ } body.s_detailTab .ruleDetailNav .ruleDetail_headerNav { display: block; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"display":"block"},"pointers":[],"order":183}*/ } .ruleDetailNav .ruleDetail_headerNav .ruleDetail_item, .ruleDetailNav .ruleDetail_headerNav .ruleDetail_item_overview, .ruleDetailNav .ruleDetail_headerNav .ruleDetail_item_css, .ruleDetailNav .ruleDetail_headerNav .ruleDetail_item_example { -ctag-tag: nav_item; -ctag-example: ...link_title; color: #cccccc; height: 100%; padding-top: 24px; width: 8.333333vw; float: right; text-align: center; /* -ctag-metadata:{"definitions":[],"variables":{"color":["@item_color"],"width":["@col_1"]},"original_value":{"color":"@item_color","width":"@col_1"},"extends":[".hand"],"local":{"color":"@item_color","height":"100%","padding-top":"24px","width":"@col_1","float":"right","text-align":"center"},"pointers":[],"tags":"nav_item","example":"...link_title","order":184}*/ } .ruleDetailNav .ruleDetail_headerNav .ruleDetail_item:hover, .ruleDetailNav .ruleDetail_headerNav .ruleDetail_item_overview:hover, .ruleDetailNav .ruleDetail_headerNav .ruleDetail_item_css:hover, .ruleDetailNav .ruleDetail_headerNav .ruleDetail_item_example:hover { color: #000000; border-bottom: 3px solid #ccc; /* -ctag-metadata:{"definitions":[],"variables":{"color":["@item_selected"]},"original_value":{"color":"@item_selected"},"extends":[],"local":{"color":"@item_selected","border-bottom":"3px solid #ccc"},"pointers":[],"order":185}*/ } .ruleDetailNav .ruleDetail_headerNav .ruleDetail_item_overview { /* -ctag: "nav_item", "...overview" */ /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[".ruleDetailNav .ruleDetail_headerNav .ruleDetail_item"],"local":{},"pointers":[],"":"nav_item\", \"...overview","order":186}*/ } body.s_detailTab_overview .ruleDetailNav .ruleDetail_headerNav .ruleDetail_item_overview { color: #000000; border-bottom: 3px solid #555; /* -ctag-metadata:{"definitions":[],"variables":{"color":["@item_selected"]},"original_value":{"color":"@item_selected"},"extends":[],"local":{"color":"@item_selected","border-bottom":"3px solid #555"},"pointers":[],"order":187}*/ } .ruleDetailNav .ruleDetail_headerNav .ruleDetail_item_css { /* -ctag: "nav_item", "...overview" */ /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[".ruleDetailNav .ruleDetail_headerNav .ruleDetail_item"],"local":{},"pointers":[],"":"nav_item\", \"...overview","order":188}*/ } body.s_detailTab_code .ruleDetailNav .ruleDetail_headerNav .ruleDetail_item_css { color: #000000; border-bottom: 3px solid #555; /* -ctag-metadata:{"definitions":[],"variables":{"color":["@item_selected"]},"original_value":{"color":"@item_selected"},"extends":[],"local":{"color":"@item_selected","border-bottom":"3px solid #555"},"pointers":[],"order":189}*/ } .ruleDetailNav .ruleDetail_headerNav .ruleDetail_item_example { /* -ctag: "nav_item", "...example" */ /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[".ruleDetailNav .ruleDetail_headerNav .ruleDetail_item"],"local":{},"pointers":[],"":"nav_item\", \"...example","order":190}*/ } body.s_detailTab_example .ruleDetailNav .ruleDetail_headerNav .ruleDetail_item_example { color: #000000; border-bottom: 3px solid #555; /* -ctag-metadata:{"definitions":[],"variables":{"color":["@item_selected"]},"original_value":{"color":"@item_selected"},"extends":[],"local":{"color":"@item_selected","border-bottom":"3px solid #555"},"pointers":[],"order":191}*/ } .ruleDetailNav .ruleDetail_headerNav .ruleDetail_back { /* -ctag: "button", "..." */ width: 70px; height: 100%; background-image: url("close.png"); background-color: #fff; margin-right: 0px; float: right; transition: all .2s; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[".hand"],"local":{"width":"70px","height":"100%","background-image":"close.png","background-color":"#fff","margin-right":"0px","float":"right","transition":"all .2s"},"pointers":[],"":"button\", \"...","order":192}*/ } .ruleDetailNav .ruleDetail_headerNav .ruleDetail_back:hover { background-color: #eee; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"background-color":"#eee"},"pointers":[],"order":193}*/ } .ruleNesting { -ctag-tag: navigation; -ctag-example: ...; width: 100%; height: 100%; background-color: #fff; padding: 20px; overflow: auto; position: relative; z-index: 200; transition: width .3s; border-right: 1px solid #eee; display: block; /*@media ( max-width: @screen-lg-min ) { body.s_detailTab_example &, body.s_detailTab_css & { width: 120px; padding: 10px; } }*/ /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"width":"100%","height":"100%","background-color":"#fff","padding":"20px","overflow":"auto","position":"relative","z-index":"200","transition":"width .3s","border-right":"1px solid #eee","display":"block"},"pointers":[],"tags":"navigation","example":"...","order":194}*/ } .ruleNesting .ruleNesting_noChildren { /*
no children
*/ padding-left: 20px; padding-top: 6px; font-size: 14px; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"padding-left":"20px","padding-top":"6px","font-size":"14px"},"pointers":[],"order":195}*/ } .ruleNesting .ruleNestingColumn { /* */ width: calc(50vw + -165px); float: left; font-size: 12px; position: relative; transition: width 0.3s; /*@media ( max-width: @screen-lg-min ) { body.s_detailTab_example &, body.s_detailTab_css & { width: 40px; &.first_one { width: 20px; } .ruleNesting_titleText { display: none; } .ruleNestingColumn_title, .ruleNestingColumn_children { width: 20px; transition: width ( -@transitionOffset + @transitionBase ); } .ruleNestingColumn_stackedLine, .ruleNestingColumn_line { left: 20px; &.first_one { left: 0px; } } .ruleNestingColumn_lineCover { left: 20px; } } }*/ /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"float":"left","font-size":"12px","position":"relative","transition":"width"},"pointers":[".doubleColumnWidth"],"order":196}*/ } .ruleNesting .ruleNestingColumn.no_children { width: calc(25vw + -82.5px); /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{},"pointers":[".columnWidth"],"order":197}*/ } .ruleNesting .ruleNestingColumn.no_children .ruleNestingColumn_children { display: none; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"display":"none"},"pointers":[],"order":198}*/ } .ruleNesting .ruleNestingColumn.first_one { width: calc(25vw + -82.5px); /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{},"pointers":[".columnWidth"],"order":199}*/ } body.s_detailTab .ruleNesting .ruleNestingColumn { width: calc(100% + 0px); /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{"mixin_1":".calc( width, 100%, 0px )"},"extends":[],"local":{},"pointers":[],"order":200}*/ } body.s_detailTab .ruleNesting .ruleNestingColumn.first_one { width: calc(100% + -30px); /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{"mixin_1":".calc( width, 100%, -30px )"},"extends":[],"local":{},"pointers":[],"order":201}*/ } body.s_detailTab .ruleNesting .ruleNestingColumn .ruleNestingColumn_title { width: calc(100% + 0px); transition: width 0.25s; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{"mixin_1":".calc( width, 100%, 0px )"},"extends":[],"local":{"transition":"width"},"pointers":[],"order":202}*/ } body.s_detailTab .ruleNesting .ruleNestingColumn .ruleNestingColumn_children { width: calc(100% + -20px); clear: left; transition: width 0.25s; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{"mixin_1":".calc( width, 100%, -20px )"},"extends":[],"local":{"clear":"left","transition":"width"},"pointers":[],"order":203}*/ } body.s_detailTab .ruleNesting .ruleNestingColumn .ruleNestingColumn_children.first_one { width: calc(100% + 0px); /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{"mixin_0":".calc( width, 100%, 0px )"},"extends":[],"local":{},"pointers":[],"order":204}*/ } body.s_detailTab .ruleNesting .ruleNestingColumn .ruleNestingColumn_stackedLine { left: 20px; top: 30px; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"left":"20px","top":"30px"},"pointers":[],"order":205}*/ } body.s_detailTab .ruleNesting .ruleNestingColumn .ruleNestingColumn_stackedLine.first_one { left: 0px; top: 0px; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"left":"0px","top":"0px"},"pointers":[],"order":206}*/ } body.s_detailTab .ruleNesting .ruleNestingColumn .ruleNestingColumn_stackedLine { display: block; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"display":"block"},"pointers":[],"order":207}*/ } body.s_detailTab .ruleNesting .ruleNestingColumn .ruleNestingColumn_line { display: none; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"display":"none"},"pointers":[],"order":208}*/ } body.s_detailTab .ruleNesting .ruleNestingColumn .ruleNestingColumn_lineCover { display: none; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"display":"none"},"pointers":[],"order":209}*/ } .ruleNesting .ruleNestingColumn .ruleNestingColumn_stackedLine, .ruleNesting .ruleNestingColumn .ruleNestingColumn_line { /*
*/ width: 1px; position: absolute; left: calc(25vw + -82.5px); top: 0px; background-color: #eee; transition: left 0.3s; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"width":"1px","position":"absolute","top":"0px","background-color":"#eee","transition":"left"},"pointers":[".columnWidthLeft"],"order":210}*/ } .ruleNesting .ruleNestingColumn .ruleNestingColumn_stackedLine.first_one, .ruleNesting .ruleNestingColumn .ruleNestingColumn_line.first_one { left: -1px; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"left":"-1px"},"pointers":[],"order":211}*/ } .ruleNesting .ruleNestingColumn .ruleNestingColumn_stackedLine { display: none; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"display":"none"},"pointers":[],"order":212}*/ } .ruleNesting .ruleNestingColumn .ruleNestingColumn_lineCover { width: 5px; height: 6px; background-color: #fff; position: absolute; left: calc(25vw + -82.5px); top: 0px; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"width":"5px","height":"6px","background-color":"#fff","position":"absolute","top":"0px"},"pointers":[".columnWidthLeft"],"order":213}*/ } .ruleNesting .ruleNestingColumn .ruleNestingColumn_title { /*
rule_name
*/ width: calc(25vw + -82.5px); float: left; clear: left; height: 30px; border-bottom: 1px solid #eee; padding-left: 10px; padding-right: 10px; padding-top: 5px; position: relative; overflow: hidden; transition: width 0.35s; color: #999; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[".hand"],"local":{"float":"left","clear":"left","height":"30px","border-bottom":"1px solid #eee","padding-left":"10px","padding-right":"10px","padding-top":"5px","position":"relative","overflow":"hidden","transition":"width","color":"#999"},"pointers":[".columnWidth"],"order":214}*/ } .ruleNesting .ruleNestingColumn .ruleNestingColumn_title:hover { background-color: #ddd; color: #222; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"background-color":"#ddd","color":"#222"},"pointers":[],"order":215}*/ } .ruleNesting .ruleNestingColumn .ruleNestingColumn_title.selected { background-color: #eee; color: #000; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"background-color":"#eee","color":"#000"},"pointers":[],"order":216}*/ } .ruleNesting .ruleNestingColumn .ruleNestingColumn_title .ruleNesting_typeIcon { right: 4px; top: 0px; width: 20px; height: 30px; position: absolute; left: auto; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"right":"4px","top":"0px","width":"20px","height":"30px","position":"absolute","left":"auto"},"pointers":[],"order":217}*/ } .ruleNesting .ruleNestingColumn .ruleNestingColumn_children { /* */ width: calc(25vw + -82.5px); float: right; clear: right; transition: width 0.35s; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"float":"right","clear":"right","transition":"width"},"pointers":[".columnWidth"],"order":218}*/ } .ruleOverview { /*
*/ z-index: 100; /*@media ( max-width: @screen-lg-min ) { .calc( width , 100% , -100px ); }*/ /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[".ruleDetail_contentContainer .ruleDetail_content"],"local":{"z-index":"100"},"pointers":[],"order":219}*/ } body.s_detailTab_overview .ruleOverview { display: block; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"display":"block"},"pointers":[],"order":220}*/ } .ruleOverview .ruleOverview_context { /* */ padding: 30px; height: calc(100% + -30px); width: 100%; float: left; overflow: auto; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{"mixin_2":".calc( height, 100%, -30px )"},"extends":[],"local":{"padding":"30px","width":"100%","float":"left","overflow":"auto"},"pointers":[],"order":221}*/ } .ruleOverview .ruleOverview_context .ruleOverview_subName, .ruleOverview .ruleOverview_context .ruleOverview_stateSubName, .ruleOverview .ruleOverview_context .ruleOverview_subTitle { /* */ float: left; clear: left; height: 30px; width: 100%; padding-top: 8px; font-size: 16px; color: #333; white-space: nowrap; overflow: hidden; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[".hand"],"local":{"float":"left","clear":"left","height":"30px","width":"100%","padding-top":"8px","font-size":"16px","color":"#333","white-space":"nowrap","overflow":"hidden"},"pointers":[],"order":222}*/ } .ruleOverview .ruleOverview_context .ruleOverview_subName:hover { background-color: #eee; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"background-color":"#eee"},"pointers":[],"order":223}*/ } .ruleOverview .ruleOverview_context .ruleOverview_stateSubName { -ctag-tags: base,button; -ctag-example: ...Label; -ctag-description: "Counteracts the effects of 'hand'"; cursor: default; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[".ruleOverview .ruleOverview_context .ruleOverview_subName"],"local":{},"pointers":[".unhand"],"order":224}*/ } .ruleOverview .ruleOverview_context .ruleOverview_stateSubName:hover { background-color: none; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"background-color":"none"},"pointers":[],"order":225}*/ } .ruleOverview .ruleOverview_context .ruleOverview_subTitle { /* */ margin-top: 8px; padding-top: 0px; font-size: 16px; color: #999; padding-left: 0px; border-bottom: 1px solid #eee; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[".ruleOverview .ruleOverview_context .ruleOverview_subName"],"local":{"margin-top":"8px","padding-top":"0px","font-size":"16px","color":"#999","padding-left":"0px","border-bottom":"1px solid #eee"},"pointers":[],"order":226}*/ } .rulePreview { -ctag-tag: page; -ctag-example: "...{ .rulePreview_stage }{ .rulePreview_nav }"; /* -ctag-description: This is a description that is long, so needs a commented version. */ z-index: 300; /*@media ( max-width: @screen-lg-min ) { .calc( width , 100% , -120px ); }*/ /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[".ruleDetail_contentContainer .ruleDetail_content"],"local":{"z-index":"300"},"pointers":[],"tags":"page","example":"...{ .rulePreview_stage }{ .rulePreview_nav }","description":[{"definitions_index":0,"content":"This is a description that is long, so needs a commented version."}],"order":227}*/ } .rulePreview .rulePreview_stage { -ctag-tags: page,rulePreview; -ctag-example: "...{ .rulePreview_iframe }"; width: 100%; height: calc(100% + -40px); background-color: #fff; position: absolute; left: 0px; top: 0px; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{"mixin_3":".calc( height, 100%, -40px )"},"extends":[],"local":{"width":"100%","background-color":"#fff","position":"absolute","left":"0px","top":"0px"},"pointers":[],"tags":"page,rulePreview","example":"...{ .rulePreview_iframe }","order":228}*/ } .rulePreview .rulePreview_stage .rulePreview_iframe { -ctag-tags: page,rulePreview; -ctag-example: ""; width: 100%; height: 100%; background-color: #eee; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"width":"100%","height":"100%","background-color":"#eee"},"pointers":[],"tags":"page,rulePreview","example":"","order":229}*/ } .rulePreview .rulePreview_nav { -ctag-tag: navigation; /* -ctag-example: ...{ .rulePreview_navLabel } { .rulePreview_state } { .rulePreview_stateApplied } { .rulePreview_toggleBGColor } { .rulePreview_outline } */ position: absolute; width: 100%; height: 40px; background-color: #fff; border-top: 0px solid #eee; left: 0px; bottom: 0px; box-shadow: 0px -3px 3px 0px rgba(0, 0, 0, 0.05); z-index: 1000; /*@media ( max-width: @screen-lg-min ) { width: 119px; left: -120px; }*/ /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"position":"absolute","width":"100%","height":"40px","background-color":"#fff","border-top":"0px solid #eee","left":"0px","bottom":"0px","box-shadow":"0px","z-index":"1000"},"pointers":[],"tags":"navigation","example":"...{ .rulePreview_navLabel } { .rulePreview_state } { .rulePreview_stateApplied } { .rulePreview_toggleBGColor } { .rulePreview_outline }","order":230}*/ } .rulePreview .rulePreview_nav .rulePreview_navLabel { -ctag-tag: "label"; -ctag-example: "...states"; height: 40px; float: left; text-align: center; font-size: 12px; padding: 10px 10px; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"height":"40px","float":"left","text-align":"center","font-size":"12px","padding":"10px 10px"},"pointers":[],"tags":"label","example":"...states","order":231}*/ } .rulePreview .rulePreview_nav .rulePreview_navItem, .rulePreview .rulePreview_nav .rulePreview_state, .rulePreview .rulePreview_nav .rulePreview_toggleBGColor, .rulePreview .rulePreview_nav .rulePreview_outline, .rulePreview .rulePreview_nav .rulePreview_html { -ctag-tag: "button"; -ctag-example: "..."; width: 40px; height: 100%; margin-right: 1px; margin-top: 0px; float: right; text-align: center; font-size: 12px; padding-top: 10px; -ctag-tags: base,button; -ctag-example: ...Label; -ctag-description: "Gives any element a hand rollover...and turns off text selection"; cursor: pointer; cursor: hand; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"width":"40px","height":"100%","margin-right":"1px","margin-top":"0px","float":"right","text-align":"center","font-size":"12px","padding-top":"10px"},"pointers":[".handover"],"tags":"button","example":"...","order":232}*/ } .rulePreview .rulePreview_nav .rulePreview_navItem:hover, .rulePreview .rulePreview_nav .rulePreview_state:hover, .rulePreview .rulePreview_nav .rulePreview_toggleBGColor:hover, .rulePreview .rulePreview_nav .rulePreview_outline:hover, .rulePreview .rulePreview_nav .rulePreview_html:hover { background-color: #eeeeee; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"background-color":"rgba(238,238,238,1)"},"pointers":[],"order":233}*/ } .rulePreview .rulePreview_nav .rulePreview_state { -ctag-tag: "button"; -ctag-example: "...1"; float: left; min-width: 40px; overflow: hidden; white-space: nowrap; width: auto; padding-left: 8px; padding-right: 8px; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[".rulePreview .rulePreview_nav .rulePreview_navItem"],"local":{"float":"left","min-width":"40px","overflow":"hidden","white-space":"nowrap","width":"auto","padding-left":"8px","padding-right":"8px"},"pointers":[],"tags":"button","example":"...1","order":234}*/ } .rulePreview .rulePreview_nav .rulePreview_state.selected { background-color: #777; color: #fff; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"background-color":"#777","color":"#fff"},"pointers":[],"order":235}*/ } .rulePreview .rulePreview_nav .rulePreview_stateApplied { -ctag-tag: "label"; -ctag-example: "....myAppliedState"; padding: 10px; font-size: 12px; float: left; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"padding":"10px","font-size":"12px","float":"left"},"pointers":[],"tags":"label","example":"....myAppliedState","order":236}*/ } .rulePreview .rulePreview_nav .rulePreview_toggleBGColor { -ctag-tag: "button"; -ctag-example: "..."; margin-right: 10px; background-color: #fff; background-image: url("bg_color_icon.png"); /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[".rulePreview .rulePreview_nav .rulePreview_navItem"],"local":{"margin-right":"10px","background-color":"#fff","background-image":"bg_color_icon.png"},"pointers":[],"tags":"button","example":"...","order":237}*/ } .rulePreview .rulePreview_nav .rulePreview_toggleBGColor:hover { background-image: url("bg_color_icon_dark.png"); /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"background-image":"bg_color_icon_dark.png"},"pointers":[],"order":238}*/ } .rulePreview .rulePreview_nav .rulePreview_toggleBGColor.selected { background-color: #777; background-image: url("bg_color_icon_dark.png"); /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"background-color":"#777","background-image":"bg_color_icon_dark.png"},"pointers":[],"order":239}*/ } .rulePreview .rulePreview_nav .rulePreview_toggleBGColor.selected:hover { background-color: #aaa; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"background-color":"#aaa"},"pointers":[],"order":240}*/ } .rulePreview .rulePreview_nav .rulePreview_outline { -ctag-tag: "button"; -ctag-example: "..."; background-image: url("outline_icon.png"); /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[".rulePreview .rulePreview_nav .rulePreview_navItem"],"local":{"background-image":"outline_icon.png"},"pointers":[],"tags":"button","example":"...","order":241}*/ } .rulePreview .rulePreview_nav .rulePreview_outline:hover { background-image: url("outline_icon_dark.png"); /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"background-image":"outline_icon_dark.png"},"pointers":[],"order":242}*/ } .rulePreview .rulePreview_nav .rulePreview_outline.selected { background-color: #777; background-image: url("outline_icon_dark.png"); /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"background-color":"#777","background-image":"outline_icon_dark.png"},"pointers":[],"order":243}*/ } .rulePreview .rulePreview_nav .rulePreview_outline.selected:hover { background-color: #aaa; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"background-color":"#aaa"},"pointers":[],"order":244}*/ } .rulePreview .rulePreview_nav .rulePreview_html { -ctag-tag: "button"; -ctag-example: "..."; background-color: #fff; background-image: url("html_icon.png"); /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[".rulePreview .rulePreview_nav .rulePreview_navItem"],"local":{"background-color":"#fff","background-image":"html_icon.png"},"pointers":[],"tags":"button","example":"...","order":245}*/ } .rulePreview .rulePreview_nav .rulePreview_html:hover { background-image: url("html_icon_dark.png"); /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"background-image":"html_icon_dark.png"},"pointers":[],"order":246}*/ } .styleGuide { -ctag-tags: app; -ctag-example: "...{ .styleGuide_nav }{ .styleGuide_content }"; width: 100%; height: 100%; position: relative; overflow: hidden; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"width":"100%","height":"100%","position":"relative","overflow":"hidden"},"pointers":[],"tags":"app","example":"...{ .styleGuide_nav }{ .styleGuide_content }","order":247}*/ } .styleGuide .styleGuide_nav { -ctag-tags: placeholder; -ctag-example: "...{ .styleGuideNav }"; position: absolute; left: 0px; top: 0px; width: 24.999999vw; height: 100%; /* -ctag-metadata:{"definitions":[],"variables":{"width":["@col_3"]},"original_value":{"width":"@col_3"},"extends":[],"local":{"position":"absolute","left":"0px","top":"0px","width":"@col_3","height":"100%"},"pointers":[],"tags":"placeholder","example":"...{ .styleGuideNav }","order":248}*/ } @media (max-width: 992px) { .styleGuide .styleGuide_nav { width: 33.333332vw; /* -ctag-metadata:{"definitions":[],"variables":{"width":["@col_4"]},"original_value":{"width":"@col_4"},"extends":[],"local":{"width":"@col_4"},"pointers":[],"order":249}*/ } } .styleGuide .styleGuide_content { -ctag-tags: placeholder; -ctag-example: "...{ .rulePreview }"; position: absolute; left: 24.999999vw; top: 0px; width: 74.999997vw; height: 100%; overflow: auto; /* -ctag-metadata:{"definitions":[],"variables":{"left":["@col_3"],"width":["@col_9"]},"original_value":{"left":"@col_3","width":"@col_9"},"extends":[],"local":{"position":"absolute","left":"@col_3","top":"0px","width":"@col_9","height":"100%","overflow":"auto"},"pointers":[],"tags":"placeholder","example":"...{ .rulePreview }","order":250}*/ } @media (max-width: 992px) { .styleGuide .styleGuide_content { width: 66.666664vw; left: 33.333332vw; /* -ctag-metadata:{"definitions":[],"variables":{"width":["@col_8"],"left":["@col_4"]},"original_value":{"width":"@col_8","left":"@col_4"},"extends":[],"local":{"width":"@col_8","left":"@col_4"},"pointers":[],"order":251}*/ } } .styleGuide .styleGuide_content .styleGuide_ruleNavPlaceholder { -ctag-tags: placeholder; -ctag-example: "...{ .ruleDetailNav }"; position: absolute; right: 0px; top: 0px; width: 100%; height: 67.957386px; /* -ctag-metadata:{"definitions":[],"variables":{"height":["@row-lg"]},"original_value":{"height":"@row-lg"},"extends":[],"local":{"position":"absolute","right":"0px","top":"0px","width":"100%","height":"@row-lg"},"pointers":[],"tags":"placeholder","example":"...{ .ruleDetailNav }","order":252}*/ } .styleGuide .styleGuide_content .styleGuide_previewPlaceholder { -ctag-tags: placeholder; -ctag-example: "...{ .rulePreview }"; position: absolute; right: 0px; top: 67.957386px; width: 100%; height: calc(100% + -67.957386px); overflow: auto; /* -ctag-metadata:{"definitions":[],"variables":{"top":["@row-lg"],"mixin_6":["@row-lg"]},"original_value":{"top":"@row-lg","mixin_6":".calc( height, 100%, @row-lg )"},"extends":[],"local":{"position":"absolute","right":"0px","top":"@row-lg","width":"100%","overflow":"auto"},"pointers":[],"tags":"placeholder","example":"...{ .rulePreview }","order":253}*/ } .styleGuideNav { -ctag-tags: container; -ctag-example: "...{ .styleGuideNav_mainNav }{ .styleGuideNav_listContainer }"; width: 100%; height: 100%; border-right: 1px solid #ddd; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"width":"100%","height":"100%","border-right":"1px solid #ddd"},"pointers":[],"tags":"container","example":"...{ .styleGuideNav_mainNav }{ .styleGuideNav_listContainer }","order":254}*/ } .styleGuideNav .styleGuideNav_mainNav { -ctag-tags: container,navigation; /* -ctag-example: ... { .styleGuideNav_mainItem }
Rules
*/ width: 100%; height: 67.957386px; border-bottom: 1px solid #eee; /* -ctag-metadata:{"definitions":[],"variables":{"height":["@row-lg"]},"original_value":{"height":"@row-lg"},"extends":[],"local":{"width":"100%","height":"@row-lg","border-bottom":"1px solid #eee"},"pointers":[],"tags":"container,navigation","example":"... { .styleGuideNav_mainItem }
Rules
","order":255}*/ } .styleGuideNav .styleGuideNav_mainNav .styleGuideNav_mainItem { -ctag-tags: button,navigation; -ctag-example: ...Variables; width: 33.33333333%; height: 100%; float: left; font-size: 14px; text-align: center; white-space: nowrap; overflow: hidden; padding-top: 21.978693px; /* -ctag-metadata:{"definitions":[],"variables":{"font-size":["@font-size"],"mixin_10":["@row-lg","@font-size-height"]},"original_value":{"width":"100% / 3","font-size":"@font-size","mixin_10":".center( padding-top, @row-lg, @font-size-height )"},"extends":[".handover"],"local":{"width":"100% / 3","height":"100%","float":"left","font-size":"@font-size","text-align":"center","white-space":"nowrap","overflow":"hidden"},"pointers":[],"tags":"button,navigation","example":"...Variables","order":256}*/ } .styleGuideNav .styleGuideNav_mainNav .styleGuideNav_mainItem.selected { border-bottom: 4px solid #777; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"border-bottom":"4px solid #777"},"pointers":[],"order":257}*/ } .styleGuideNav .styleGuideNav_listContainer { -ctag-tags: unique,list,container; -ctag-example: "...{ .styleGuideNav_listRow }{ .styleGuideNav_listRow }{ .styleGuideNav_listRow }"; -ctag-description: "Contains the list of variable categories or rules. This is just the list not the header for rules."; width: 100%; height: calc(100% + -67.957386px); position: absolute; bottom: 0px; left: 0px; /* -ctag-metadata:{"definitions":[],"variables":{"mixin_4":["@row-lg"]},"original_value":{"mixin_4":".calc( height, 100%, @row-lg )"},"extends":[],"local":{"width":"100%","position":"absolute","bottom":"0px","left":"0px"},"pointers":[],"tags":"unique,list,container","example":"...{ .styleGuideNav_listRow }{ .styleGuideNav_listRow }{ .styleGuideNav_listRow }","description":[{"definitions_index":0,"content":"Contains the list of variable categories or rules. This is just the list not the header for rules."}],"order":258}*/ } .styleGuideNav_rulesList { -ctag-tags: list; /* -ctag-example: "...{ .styleGuideNav_rulesListHeader } { .styleGuideNav_listRow } { .styleGuideNav_listRow }";*/ width: 100%; height: 100%; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"width":"100%","height":"100%"},"pointers":[],"tags":"list","example":"...{ .styleGuideNav_rulesListHeader } { .styleGuideNav_listRow } { .styleGuideNav_listRow }","order":259}*/ } .styleGuideNav_rulesList .styleGuideNav_listRow { -ctag-tags: row; /* -ctag-example: "... { .styleGuideNav_rowLabel } { .styleGuideNav_rowLabelRight }"; */ /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[".styleGuideList .styleGuideNav_listRow"],"local":{},"pointers":[],"tags":"row","example":"... { .styleGuideNav_rowLabel } { .styleGuideNav_rowLabelRight }","order":260}*/ } .styleGuideNav_rulesList .styleGuideNav_rulesListHeader { -ctag-tags: row; /* -ctag-example: "...{ .styleGuideNav_rowLabel }";*/ height: 50.4px; width: 100%; margin-left: 0px; background-image: url("back_arrow_small.png"); background-position: 20px center; padding-left: 26px; /* -ctag-metadata:{"definitions":[],"variables":{"height":["@row-md-lg"]},"original_value":{"height":"@row-md-lg"},"extends":[".styleGuideList .styleGuideNav_listRow"],"local":{"height":"@row-md-lg","width":"100%","margin-left":"0px","background-image":"back_arrow_small.png","background-position":"20px center","padding-left":"26px"},"pointers":[],"tags":"row","example":"...{ .styleGuideNav_rowLabel }","order":261}*/ } .styleGuideNav_rulesList .styleGuideNav_rulesListHeader .styleGuideNav_rowLabel { -ctag-tags: label,pow; -ctag-example: ...left label; font-size: 16px; padding-top: 11.2px; float: left; clear: left; padding-left: 20px; white-space: nowrap; overflow: hidden; /* -ctag-metadata:{"definitions":[],"variables":{"font-size":["@font-size-lg"],"mixin_4":["@row-md-lg","@font-size-height-lg"],"padding-left":["@padding"]},"original_value":{"font-size":"@font-size-lg","mixin_4":".center( padding-top, @row-md-lg, @font-size-height-lg )","padding-left":"@padding"},"extends":[".label"],"local":{"font-size":"@font-size-lg","float":"left","clear":"left","padding-left":"@padding","white-space":"nowrap","overflow":"hidden"},"pointers":[],"tags":"label,pow","example":"...left label","order":262}*/ } .styleGuideNav_rulesList .styleGuideNav_rulesList_listWithHeader { -ctag-tags: row; /* -ctag-example: "... { .styleGuideNav_rulesList .styleGuideNav_listRow } { .styleGuideNav_rulesList .styleGuideNav_listRow }"; */ width: 100%; height: calc(100% + -50.4px); position: absolute; top: 50.4px; left: 0px; overflow: auto; /* -ctag-metadata:{"definitions":[],"variables":{"mixin_3":["@row-md-lg"],"top":["@row-md-lg"]},"original_value":{"mixin_3":".calc( height, 100%, @row-md-lg )","top":"@row-md-lg"},"extends":[],"local":{"width":"100%","position":"absolute","top":"@row-md-lg","left":"0px","overflow":"auto"},"pointers":[],"tags":"row","example":"... { .styleGuideNav_rulesList .styleGuideNav_listRow } { .styleGuideNav_rulesList .styleGuideNav_listRow }","order":263}*/ } .styleGuideNav_rulesList .styleGuideNav_rulesList_list { -ctag-tags: row; /* -ctag-example: "... { .styleGuideNav_rulesList .styleGuideNav_listRow } { .styleGuideNav_rulesList .styleGuideNav_listRow }"; */ width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; overflow: auto; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"width":"100%","height":"100%","position":"absolute","top":"0px","left":"0px","overflow":"auto"},"pointers":[],"tags":"row","example":"... { .styleGuideNav_rulesList .styleGuideNav_listRow } { .styleGuideNav_rulesList .styleGuideNav_listRow }","order":264}*/ } .variablePage { -ctag-tags: page,container; /* -ctag-example: '... { .variablePage_title } { .variablePage_description } { .variablePage_variableLabel } { .variablePage_variableLabel } { .variablePage_variableLabel } { .variablePage_variableLabel } { .variablePage_variableLabel } { .variablePage_title } { .variablePage_description } { .variablePage_variableLabel } { .variablePage_variableLabel } { .variablePage_variableLabel } { .variablePage_variableLabel } { .variablePage_variableLabel }';*/ background-color: #eeeeee; padding: 20px 19.098301%; min-height: 100%; /* -ctag-metadata:{"definitions":[],"variables":{"background-color":["@gray-lightest"],"padding":["@vpadding-xlg"]},"original_value":{"background-color":"@gray-lightest","padding":"@vpadding-xlg"},"extends":[],"local":{"background-color":"@gray-lightest","padding":"@vpadding-xlg","min-height":"100%"},"pointers":[],"tags":"page,container","example":"... { .variablePage_title } { .variablePage_description } { .variablePage_variableLabel } { .variablePage_variableLabel } { .variablePage_variableLabel } { .variablePage_variableLabel } { .variablePage_variableLabel } { .variablePage_title } { .variablePage_description } { .variablePage_variableLabel } { .variablePage_variableLabel } { .variablePage_variableLabel } { .variablePage_variableLabel } { .variablePage_variableLabel }","order":265}*/ } .variablePage .variablePage_title { -ctag-tags: container,header; -ctag-example: ...Title of Variable Cluster; width: 100%; font-size: 22px; height: 67.957386px; padding-top: 14.978693px; color: #555555; border-bottom: 1px solid #cccccc; margin-bottom: 10px; /* -ctag-metadata:{"definitions":[],"variables":{"font-size":["@font-size-xxlg"],"height":["@row-lg"],"mixin_5":["@row-lg","@font-size-height-xxlg"],"color":["@gray-dark"],"border-bottom":["@border-bottom-dk"],"margin-bottom":["@vpadding"]},"original_value":{"font-size":"@font-size-xxlg","height":"@row-lg","mixin_5":".center( padding-top, @row-lg, @font-size-height-xxlg )","color":"@gray-dark","border-bottom":"@border-bottom-dk","margin-bottom":"@vpadding"},"extends":[],"local":{"width":"100%","font-size":"@font-size-xxlg","height":"@row-lg","color":"@gray-dark","border-bottom":"@border-bottom-dk","margin-bottom":"@vpadding"},"pointers":[],"tags":"container,header","example":"...Title of Variable Cluster","order":266}*/ } .variablePage .variablePage_description { -ctag-tags: text; /* -ctag-example: ...These variables are used to describe something in your site.These variables are used to describe something in your site. These variables are used to describe something in your site.;*/ width: 100%; font-size: 14px; color: #999999; margin-bottom: 10px; /* -ctag-metadata:{"definitions":[],"variables":{"font-size":["@font-size"],"color":["@gray-light"],"margin-bottom":["@vpadding"]},"original_value":{"font-size":"@font-size","color":"@gray-light","margin-bottom":"@vpadding"},"extends":[],"local":{"width":"100%","font-size":"@font-size","color":"@gray-light","margin-bottom":"@vpadding"},"pointers":[],"tags":"text","example":"...These variables are used to describe something in your site.These variables are used to describe something in your site. These variables are used to describe something in your site.","order":267}*/ } .variablePage .variablePage_variableLabel { -ctag-tags: container,header; -ctag-example: "...@variable_name: 123px;"; font-size: 14px; height: 33.6px; padding-top: 4.8px; color: #999999; /* -ctag-metadata:{"definitions":[],"variables":{"font-size":["@font-size"],"height":["@row-md-sm"],"mixin_4":["@row-md-sm","@font-size-height"],"color":["@gray-light"]},"original_value":{"font-size":"@font-size","height":"@row-md-sm","mixin_4":".center( padding-top, @row-md-sm, @font-size-height )","color":"@gray-light"},"extends":[],"local":{"font-size":"@font-size","height":"@row-md-sm","color":"@gray-light"},"pointers":[],"tags":"container,header","example":"...@variable_name: 123px;","order":268}*/ } .variablePage .variablePage_variableLabel .variablePage_variableName { color: #777777; font-weight: bold; /* -ctag-metadata:{"definitions":[],"variables":{"color":["@gray"]},"original_value":{"color":"@gray"},"extends":[],"local":{"color":"@gray","font-weight":"bold"},"pointers":[],"order":269}*/ } /** initial setup **/ .nano { position: relative; width: 100%; height: 100%; overflow: hidden; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"position":"relative","width":"100%","height":"100%","overflow":"hidden"},"pointers":[],"order":270}*/ } .nano > .nano-content { position: absolute; overflow: scroll; overflow-x: hidden; top: 0; right: 0; bottom: 0; left: 0; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"position":"absolute","overflow":"scroll","overflow-x":"hidden","top":"0","right":"0","bottom":"0","left":"0"},"pointers":[],"order":271}*/ } .nano > .nano-content:focus { outline: thin dotted; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"outline":"thin dotted"},"pointers":[],"order":272}*/ } .nano > .nano-content::-webkit-scrollbar { display: none; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"display":"none"},"pointers":[],"order":273}*/ } .has-scrollbar > .nano-content::-webkit-scrollbar { display: block; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"display":"block"},"pointers":[],"order":274}*/ } .nano > .nano-pane { background: rgba(0, 0, 0, 0.25); position: absolute; width: 10px; right: 0; top: 0; bottom: 0; visibility: hidden\9; /* Target only IE7 and IE8 with this hack */ opacity: .01; -webkit-transition: .2s; -moz-transition: .2s; -o-transition: .2s; transition: .2s; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"background":"rgba(0,0,0,0.25)","position":"absolute","width":"10px","right":"0","top":"0","bottom":"0","visibility":"hidden\\9","opacity":".01","-webkit-transition":".2s","-moz-transition":".2s","-o-transition":".2s","transition":".2s","-moz-border-radius":"5px","-webkit-border-radius":"5px","border-radius":"5px"},"pointers":[],"order":275}*/ } .nano > .nano-pane > .nano-slider { background: #444; background: rgba(0, 0, 0, 0.5); position: relative; margin: 0 1px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"background":"rgba(0,0,0,0.5)","position":"relative","margin":"0 1px","-moz-border-radius":"3px","-webkit-border-radius":"3px","border-radius":"3px"},"pointers":[],"order":276}*/ } .nano:hover > .nano-pane, .nano-pane.active, .nano-pane.flashed { visibility: visible\9; /* Target only IE7 and IE8 with this hack */ opacity: 0.99; /* -ctag-metadata:{"definitions":[],"variables":{},"original_value":{},"extends":[],"local":{"visibility":"visible\\9","opacity":"0.99"},"pointers":[],"order":277}*/ }