summaryrefslogtreecommitdiff
path: root/gnowsys-ndf/gnowsys_ndf/ndf/static/ndf/scss/_app_styles.scss
blob: 980731438ca52654a31ec276496a20176ab71b80 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
/*
*   The Foundation Stylesheet
*   You can paste sass snippets from compass or foundation here
*   Consider submitting these snippets upstream
*   http://compass-style.org/reference/compass/css3/
*   http://foundation.zurb.com/docs/components/global.html
*/


/*
*   Foundation fixes and hacks. Please document issues on https://github.com/zurb/foundation/issues
*/

/* Too many apps cause breakage */



/*
/* Protects reflowing elements on error */
[data-abide] span.error, [data-abide] small.error{
    position: absolute;
}

/*active color for side-nav links*/
.side-nav li.active a:not(.button){
    color:$side-nav-link-color-active;
}


/*
*   Foundation extensions
*/

pre{
    width:92%;
	overflow: auto;
	border: 1px solid #eee;
	border-left: 1rem solid #eee;
	font: lighter 1.2rem/2rem Monaco;
	background: url('/static/ndf/pre.png');
	background-size:1px 4rem;
	padding-left:0.5rem;
	font-family: monospace;
}


.fixme{
    // Use this class for any placeholder text to be replaced by variables by the developer
    opacity: 0.5;
    &:hover{
        opacity:1;
        color:inherit;
        &:after{
            content:" fixme";
            color:orange;
        }
    }
}

/* Utility class to display the child spans of this element on hover */
.show-span-on-hover{
    span{
    display:none;
    }
    &:hover span{
    display:inline;
    }
}
.show-on-hover{

    .show{
        display:none;
        z-index: 1000;
    }
    &:hover .show{
    display:block;
    }
}
/* Utility class to display the next siblings on hoverr */
.extra.app {
  display: none;
    
}

/* Effects */
.drop-shadow{
	-webkit-box-shadow: 0px 0px 5px 1px black;
	box-shadow: 0px 0px 5px 1px black;
}
.rounded{
	border-radius: 2px;
	-webkit-border-radius:2px;
}
.transition-opacity{
	transition: opacity .3s ease;
	-moz-transition: opacity .3s ease;
	-webkit-transition: opacity .3s ease;
	-o-transition: opacity .3s ease;
}

/*Ratings bar based on http://codepen.io/lsirivong/pen/ekBxI */

.rating-bar {
 

  &>span {
      /* remove inline-block whitespace */
      font-size: 0;
         /* flip the order so we can use the + and ~ combinators */
  unicode-bidi: bidi-override;
  direction: rtl;
  }
    
    &.unrated{
        /* If the user has not rated yet */
        &:checked ~ label:before{
      color: $secondary-color;
    }
  }
        

  [type*="radio"] {
    display: none;
    & + label {
      /* only enough room for the star */
      display: inline-block;
      overflow: hidden;
      text-indent: 9999px;
      width: 1em;
      height: 1.4em;
      white-space: nowrap;
        font-size: 1.5rem;
        margin:0;
      &:before {
        display: inline-block;
        text-indent: -9999px;
        content: '\2606'; /* WHITE STAR */
        color: #888;
      }
    }
    &:checked ~ label:before,
      & + label:hover ~ label:before,
      & + label:hover:before {
      content: '\2605'; /* BLACK STAR */
      color: $highlight-color;
      text-shadow: 0 0 1px #333;
    }
  }
  
  /* the hidden clearer */
    
  .last[type*="radio"] + label {
    text-indent: -9999px;
    width: .5em;
    margin-left: -.5em;
  }
  .last[type*="radio"] + label:before {
    width: .5em;
    height: 1.4em;
  }
  
  /* this is gross, I threw this in to override the starred
     buttons when hovering. */
  &:hover{
     [type*="radio"] + label:before {
    content: '\2606'; /* WHITE STAR */
    color: #888;
    text-shadow: none;
  }
  [type*="radio"] + label:hover ~ label:before,
  [type*="radio"] + label:hover:before {
    content: '\2605'; /* BLACK STAR */
    color: $highlight-color;
    text-shadow: 0 0 1px #333;
  }
  }
}

body a{
  &:visited{
    color: #1d484a;
  }
}